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)
    };

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

    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;
    }

通过这种方式，我们可以例如按照优先级对验证器进行“排序”。