有條件地在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(); 
      } 

     }; 
    ) 
    }