Angular 2の条件付きバリデーション

Question

Angular 2のバリデーションはとても簡単ですが、これは素晴らしいものです。しかし、他のフィールドが選択されている場合は、どのフィールドをオプションフィールドにするかはどうでしょうか。ここで

は私のルールは、私は必要に応じてREFNOがユーザによって提供されている場合、他のフィールドは、「非必要」であるとフラグを立てたい

this.contractsFilter = this.fb.group({ 
    selectedContractType: ['', [Validators.required]], 
    selectedYear: ['', [Validators.required]], 
    selectedPde: ['', [Validators.required]], 
    refNo: ['', []] 
}); 

です。ここで

Answer 1

はあなたが動的に追加したり、いくつかの制御

private addValidator(control, validator) { 
    let existingValidators = control.validator; 
    control.setValidators(Validators.compose([existingValidators, validator])); 
    control.updateValueAndValidity(); 
    } 

にバリデータを削除し、バリにフォームコントロールのために/解除バリデータを設定するsetValidatorsの

private removeRequiredValidator(control, otherValidators) { 
    control.clearValidators(); 
    if (otherValidators) { 
     control.setValidators(otherValidators); 
    } 
    control.updateValueAndValidity(); 
    } 

Answer 2

メイクの使用を削除することができる方法である

import {FormControl, Validators, FormGroup} from "@angular/forms"; 

onRefNoEntered() { 
     if(this.contractsFilter.controls['refNo'].value && this.contractsFilter.controls['refNo'].valid) { 
      this.contractsFilter.controls['selectedContractType'].setValidators(null); 
      this.contractsFilter.controls['selectedYear'].setValidators(null); 
      this.contractsFilter.controls['selectedPde'].setValidators(null); 
     } 
     else { 
      this.contractsFilter.controls['selectedContractType'].setValidators(Validators.required); 
      this.contractsFilter.controls['selectedYear'].setValidators(Validators.required); 
      this.contractsFilter.controls['selectedPde'].setValidators(Validators.required); 
     } 
} 

Answer 3

カスタムバリデーターとsetValidatorsは非常に迅速に非常に複雑になることがあります。私は、バリデータを必要に応じて設定し、それを条件付きで有効または無効にすることを好みます。

this.contractsFilter = this.fb.group({ 
    selectedContractType: ['', [Validators.required]], 
    selectedYear: ['', [Validators.required]], 
    selectedPde: ['', [Validators.required]], 
    refNo: ['', []] 
}); 

を、私は、その後refNoためvalueChangesに加入します：

this.contractsFilter.controls['refNo'].valueChanges.subscribe(value => { 
    if (value) { // There is a refNo specified 
    this.contractsFilter.controls['selectedContractType'].disable(); 
    this.contractsFilter.controls['selectedYear'].disable(); 
    this.contractsFilter.controls['selectedPde'].disable(); 
    } else { 
    this.contractsFilter.controls['selectedContractType'].enable(); 
    this.contractsFilter.controls['selectedYear'].enable(); 
    this.contractsFilter.controls['selectedPde'].enable(); 
    } 
}); 

は今、あなたのバリデータは、すべて1つの一貫性のある場所に指定されている、とあなたはまだかどうかを制御することができ、正確にあなたのコードを使用して

バリデータが実行されるかどうか。