web-dev-qa-db-ja.com

Angular反応型フォームの条件付きフォーム検証

angular反応性フォームに条件付きフォーム検証を設定しようとしていますが、助けが必要です。

ユーザーがエンティティタイプを個人またはビジネスに設定するフォームコントロールがあります

<select formControlName="entity">
  <option [value]="individual">Individual</option>
  <option [value]="business">Business</option>
</select>

次に、選択したエンティティに基づいて表示または非表示にするフォーム入力があります。

<div *ngIf="myForm.controls.entity.value == individual>
  <input formControlName="fullName" />
</div>

<div *ngIf="myForm.controls.entity.value == business>
  <input formControlName="businessName" />
</div>

対応するエンティティが選択されている場合にのみ、両方の入力を必須にするにはどうすればよいですか？

angularangular-reactive-forms
9
jordanpowell88

このHTMLがformGroup要素内にあると想定して、属性[formControl] = "name_of_your_input_control"を使用できます。

<div [hidden]="isBusiness">
  <input [formControl]="fullName" />
</div>

<div [hidden]="!isBusiness">
  <input [formControl]="businessName" />
</div>

あなたのtsクラスで：

フォームを作成したら、これを追加します。

isBusiness:boolean = false;
//...
this.nameOfYourForm.valueChanges.subscribe((newForm) => {
     this.isBusiness = (newForm.controls.entity.value == 'business');
     if(this.isbusiness){
        this.nameOfYourForm.controls.fullName.setValidators(/*your new validation here*/);
           //set the validations to null for the other input
     }else{       
           this.nameOfYourForm.controls.businessName.setValidators(/*your new validation here*/);
           //set the validations to null for the other input
     } 
});

* ngIfは[ngden]がテンプレートからコントロールを完全に削除するため、* ngIfを[hidden]に変更したことに注意してください。[hidden]は表示を適用しません。

フォーム全体ではなく、特定のコントロールに変更リスナーを追加することもできますが、考え方は同じです。

10
Mehdi

他のバージョンがあります：

[〜＃〜] html [〜＃〜]

<select #select formControlName="entity">
  <option  [ngValue]="Individual">Individual</option>
  <option  [ngValue]="Business">Business</option>
</select>
<br>
<div *ngIf="select.value[0]  === '0'">
  <input #input [required]="select.value[0] === '0'" formControlName="fullName" />
  <span *ngIf="!myForm.get('fullName').valid">Invalid</span>
</div>

[〜＃〜] demo [〜＃〜]

2
Vega