角度2 ng-required

Question

私は2番目のモデル駆動型を作成し、入力フィールドの1つは上のチェックボックスがチェックされていない場合にのみ表示する必要があります。* ngIfでこれを行いました。 私の質問は、チェックボックスをオフにした場合にのみ、その入力を設定する方法です。角度1.xでは、これはビューでng-required = "condition"を使って行うことができます。ここで

はhtmlです：

//チェックボックス

<div class="checkbox col-sm-9"> 
    <label> 
    <input type="checkbox" id="getCompanyAddress" style="cursor: pointer;" [formControl]="form.controls['address']" >Use the company address 
    </label> 
</div> 

//オプション入力：

<div *ngIf="form.value.address == false" class="form-group" [ngClass] = "{'has-error':!form.controls['address'].valid && form.controls['address'].touched}" > 
<label for="add_gestion_adress" class="col-sm-3 control-label">Address 
</label> 
    <div class="col-sm-9"><textarea rows="1" id="add_gestion_adress" class="form-control" name="add_gestion_adress" [formControl]="form.controls['address']" ></textarea> 
    </div> 
</div> 

//とモデルコード：

form: FormGroup; 
    constructor(fb:FormBuilder){ 
     this.form = fb.group({ 
     'name': [null,Validators.compose([Validators.required, Validators.minLength(1)])], 
     'type': ["en gros",Validators.compose([Validators.required, Validators.minLength(2)])], 
     'person':[null,Validators.compose([Validators.required, Validators.minLength(1)])], 
     'address':[false,Validators.compose([Validators.minLength(1)])], 
     'locality':[null, Validators.compose([Validators.required])], 
     'county':[null,Validators.compose([Validators.required])], 
     'country':[null,Validators.compose([Validators.required])] 
     }) 

    } 

Answer 1

これを行う1つの方法は、値を聞くことですチェックボックスフォームの変更を行い、それに応じて他のコントロールのバリデータを追加/削除します。

例：

this.form.get('checkbox-control').valueChanges.map(
     value => { 

      if(value) { 
       this.form.get('other-control').setValidators(Validators.required); 
      }else { 
       this.form.get('other-control').clearValidators(); 
      } 

     } 
    ); 

Answer 2

<textarea [required]="your angular expression"> 

FormBuilderクロスフィールド妥当性検査のために意図されているバリデータを受け付ける第二引数をとる角度4

Answer 3

の最新バージョンで上記作品：

this.form = fb.group({ 
     'name': [null,Validators.compose([Validators.required, Validators.minLength(1)])], 
     'type': ["en gros",Validators.compose([Validators.required, Validators.minLength(2)])], 
     'person':[null,Validators.compose([Validators.required, Validators.minLength(1)])], 
     'address':[false,Validators.compose([Validators.minLength(1)])], 
     'locality':[null, Validators.compose([Validators.required])], 
     'county':[null,Validators.compose([Validators.required])], 
     'country':[null,Validators.compose([Validators.required])] 
     } 
    , { validator: this.crossFieldValidation }); 

これは何でも行うことができます。

crossFieldValidation(ctrl: FormGroup): ValidationErrors|null { 
    let isRequired = ctrl.controls.myCheckbox.value === true; 
    let hasValue = ctrl.controls.myMaybeRequiredControlXX.value; 
    if (isRequired && !hasValue) return {XXrequired: true}; 
    return null; 
} 

、表示/ ngClassのエラーをチェックform.errors?.XXrequiredを使用するか、どのようなキーあなたのcrossFieldValidation()ではなくform.controls.XX.errors?.requiredの、返さします。