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

Question

尝试在表单组上添加自定义验证程序formValidator()。根据某些条件，我将错误设置为{invalidData: true}.但是当条件为假时，将错误设置为 null。控件 2 本身具有必需的验证器。如果我将错误设置为 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;
};
}