Question

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

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

1 个答案: