为什么 Angular 4 FormGroup 自定义验证器不起作用？

Question

尝试在表单组上添加自定义验证器 formValidator()。根据某些情况，我正在设置错误{invalidData: true}。但是当条件为假时，将错误设置为空。 control2 本身具有必需的验证器。如果我将错误设置为 null，它也会清除所需的验证器。

参考以下代码，

createReactiveForm(data: any) {
    const formGroup = new FormGroup({
        'control1': new FormControl(data.value1),
        'control2': new FormControl(data.value2, [Validators.required])
    }, this.formValidator());
}

formValidator(): ValidatorFn {
    return (group: FormGroup): ValidationErrors => {
        const control1 = group.controls['control1'];
        const control2 = group.controls['control2'];
        if (control1.value === 'ABC' && control2.value !== 'ABC') {
            control2.setErrors({ invalidData: true });
        } else {
            control2.setErrors(null);
        }
        return;
    };
}

解决办法是什么？还是我在自定义验证器中做错了什么？请帮忙。

Answer 1

验证函数不应该在控件上设置错误。他们应该返回验证错误对象。

formValidator(): ValidatorFn {
    return (group: FormGroup): ValidationErrors => {
        // use the abstraction provided by the framework
        const control1 = group.get('control1');
        const control2 = group.get('control2');
        // return the correct value depending on your condition
        return control1.value === 'ABC' && control2.value !== 'ABC' ? 
          { invalidData: true } : null;
    };
}