有条件地在Angular 2反应形式的表单域中实现验证

Question

我可以有条件地在Angular 2反应形式中实现验证。我有3个formControl字段的反应形式一个是选择，另外两个是名字和姓氏的输入文本。我希望有条件地根据第一个字段'validateBy'的选择来实现名字和姓氏的验证。如果用户选择'byFirstName'，则只应验证firstName。如果用户选择“byLastName”，则只应验证lastName。如果用户选择“byBoth”，则应验证firstName和lastName。我为此创造了一个蹲点。只有通过两个验证的作品。

ngOnInit() { 
this.myForm = this._fb.group({ 
    validateBy: ['byFirstName'], 
    firstName: ['', isFirstNameValid(() => (this.validateBy === 'byFirstName' || this.validateBy === 'byBoth'), 
        Validators.required)], 
    lastName: ['', isLastNameValid(() => (this.validateBy === 'byLastName' || this.validateBy === 'byBoth'), 
        Validators.required)], 
}); 

https://plnkr.co/edit/X0zOGf?p=preview

Answer 1

的问题是，你的代码计算表达式只有一次 - 在创建FormGroup时。您需要通过创建自定义验证程序来使其动态化，该验证程序会在每次调用时评估表达式：

this.personForm= this.fb.group({ 
    firstName: ['', Validators.required]; 
    lastName: [ 
    '', 
    conditionalValidator(
     (() => this.isValidationForLastName === true), 
     Validators.required 
    ) 
    ] 
}); 

function conditionalValidator(condition: (() => boolean), validator: ValidatorFn): ValidatorFn { 
    return (control: AbstractControl): {[key: string]: any} => { 
    if (! condition()) { 
     return null; 
    } 
    return validator(control); 
    } 
} 

Answer 2

另一种方法是这样。似乎在plunker

ngOnInit() { 
    this.myForm = this._fb.group({ 
     validateBy: ['byFirstName'], 
     firstName: [''], 
     lastName: [''], 
    }); 

    this.myForm.get('validateBy').valueChanges.subscribe(
     (validateBy : string) => { 
      if (validateBy === 'byFirstName' || validateBy === 'byBoth') { 
      this.myForm.get('firstName').setValidators([Validators.required]); 
      this.myForm.get('firstName').updateValueAndValidity(); 
      } 
      if (validateBy === 'byLastName' || validateBy == 'byBoth') { 
      this.myForm.get('lastName').setValidators([Validators.required]); 
      this.myForm.get('lastName').updateValueAndValidity(); 
      } 

     }; 
    ) 
    }