多个自定义验证器，其反应形式为角度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