多個定製檢驗角2

Question

我有兩個定製validator在reactive form，我調用下面函數來創建在部件的構造形式爲：

private createForm(): void { 
this.passwordUpdateForm = this.formBuilder.group({ 
    newpassword : [null, Validators.required], 
    passwordconfirm: [null, Validators.required] 
}, 
{ 
    validator: [PasswordValidation.PasswordMatch, PasswordValidation.PasswordRule] // validation method 

}); 

}

PasswordValidation是具有類兩個功能如下

export class PasswordValidation { 

    public static PasswordMatch(control: AbstractControl) { 
     let password = control.get('newpassword'); // to get value in input tag 
     if(password){ 
      let confirmPassword = control.get('passwordconfirm').value; // to get value in input tag 
      if (password.value !== confirmPassword) { 
       control.get('passwordconfirm').setErrors({ ['passwordmatch'] : true}); 
      }else { 
       return null; 
      } 
     } 
    } 

    public static PasswordRule(control: AbstractControl) { 
     let password = control.get('newpassword').value; // to get value in input tag 
     let pattern = new RegExp('^(?=.*?[A-Z])(?=.*?[a-z])(?=.*?[0-9])(?=.*?[#?!@$%^&*-]).{8,64}');    
     if (!pattern.test(password)) { 
      control.get('newpassword').setErrors({ ['passwordrule'] : true}); 
     }else if (password.toLowerCase() === 'something') { 
      control.get('newpassword').setErrors({ ['passwordrule'] : true}); 
     }else { 
      return null; 
     } 
    } 
} 

每個自定義驗證工作正常分別是這樣

validator: PasswordValidation.PasswordMatch 

或本

validator: PasswordValidation.PasswordRule 

但在陣列狀

validator: [PasswordValidation.PasswordMatch, PasswordValidation.PasswordRule] 

得到錯誤this.validator is not a function使用他們與不工作，我沒有任何想法，請幫幫我。

Answer 1

它更好地使用Validators.compose([])它接受驗證器數組用於在窗體組中的特定用戶控件。

例如，如果您要添加的驗證對passwordconfirm和newpassword的控制，你可以像下面

private createForm(): void { 
this.passwordUpdateForm = this.formBuilder.group({ 
    newpassword : [null, Validators.compose([Validators.required,PasswordValidation.PasswordRule])], 
    passwordconfirm: [null, Validators.compose([Validators.required, PasswordValidation.PasswordMatch])] 
}); 

引擎蓋這下是代碼的樣子

group(controlsConfig: {[key: string]: any}, extra: {[key: string]: any} = null): FormGroup { 
    const controls = this._reduceControls(controlsConfig); 
    const validator: ValidatorFn = isPresent(extra) ? extra['validator'] : null; 
    const asyncValidator: AsyncValidatorFn = isPresent(extra) ? extra['asyncValidator'] : null; 
    return new FormGroup(controls, validator, asyncValidator); 
} 

你可以看到參數validator實際上是一種類型的接口ValidatorFn，看起來像下面那樣

interface ValidatorFn { 
    (c: AbstractControl): ValidationErrors|null 
} 

所以你可以看到它可以接受任何具有上述簽名的方法。

來源：https://angular.io/api/forms/ValidatorFn

檢查此鏈接更多：https://toddmotto.com/reactive-formgroup-validation-angular-2