Angular2：如何将两个或多个验证器应用于同一控件？

Question

我正在使用 Angular2 创建表单，并为电子邮件地址字段创建了两个自定义验证器。

第一个验证器检查电子邮件的有效性，第二个（异步）验证器检查电子邮件地址是否已存在于数据库中。另外我想添加第三个验证器来进行另一个验证。

这是我的代码：

'email': ['', [validateEmail(), thirdValidator()], asyncValidator]

我想要的行为如下：只有当第一个验证器验证控件时，第二个验证器才应该启动。只有当第二个验证器终止时，第三个验证器才能开始验证。

如何达到这个目的？

Answer 1

Validators.compose 方法应该可以完成工作，例如：

   let formControls = {
        'oldPassword': new FormControl({ value: ''}),
        'newPassword': new FormControl({ value: ''}, Validators.compose([customValidator1, customValidator2]), customAsyncValidator)
    };

复合验证器同时工作，这意味着我们可以同时在控件上有多个错误（如果验证失败，每个验证器都会附加自己的错误）。如果我们一次只需要在控件上出现一个错误，我们可以 'chain' 通过在执行下一个验证之前检查上一个验证的状态来验证器。像这样：

    let customValidator2 = (ctrl: FormControl): any => {
        if(ctrl.hasError('customValidationError1')) {
            // there is the error attached by customValidator1, 
            // skip executing customValidator2 (nullify its error)
            return null;
        }

        let isInvalid = true; // some condition...

        return isInvalid ? { customValidationError2: true } : null;
    }

这样我们就可以完成'ordering'验证器的优先级。

Angular2：如何将两个或多个验证器应用于同一控件？

Angular2: how to apply two or more validators to the same control?

validation

angular

angular2-forms

custom-validators

angular2-formbuilder