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

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

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

这样我们就可以完成“订购”。例如，验证者的优先级。

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

1 个答案: