首页 文章

反应形式的多个自定义验证器角度2

提问于
浏览 427 次
1

我在 reactive form 中有两个自定义 validator ,我在下面调用函数在组件构造函数中创建表单:

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])(?=.*?[#[email protected]$%^&*-]).{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 并且不起作用,我不知道,请帮忙 .

1 回答

  • 3

    最好使用 Validators.compose([]) ,它接受在表单组中的特定用户控件上使用的验证器数组 .

    例如,如果你想针对 passwordconfirmnewpassword 控件添加验证器,你可以像下面这样做

    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

相关问题