1

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

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

这是我的代码：

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

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

如何达到这一点？

4

1 回答 1

2

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

通过这种方式，我们可以通过验证器的优先级来完成“排序”。

于 2017-01-26T13:07:13.800 回答