多个定制检验角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