角度 6 响应式表单表单组验证

Question

尝试根据某些条件添加验证器。当条件为真时，我将添加所需的验证器并在它为假时将其删除。

createReactiveForm(data: any) {
const formGroup = new FormGroup({
'control1': new FormControl(data.key1),
'control2': new FormControl(data.key2)
}, this.formValidators.bind(this)),
}

formValidators(formGroup: FormGroup){
const control1Val: boolean = formGroup.controls['control1'].value;
if (control1Val) {
const control2: AbstractControl = formGroup.controls['control2'];
constrol2.setValidators(Validators.required);
} else {
const control2: AbstractControl = formGroup.controls['control2'];
constrol2.setValidators(() => null);
}
}

1. formValidators(( 方法被称为无限次 - 我在这里做错了什么吗？

2. 当条件为 true 时，它将添加验证器并显示错误。但是当条件为假时，验证器被删除，但控件上的错误仍然存在 - 原因是什么？

3. 在formGroup中绑定formValidators((方法是一个好方法吗？

帮帮我这个。

Answer 1

1. 不，它在每个变化检测周期/控制变化时调用。
2. 呼叫control.setErrors(null).
3. 第二个参数需要一个函数。您的代码没有问题。

验证器函数应返回错误对象或null。我不建议将逻辑放在验证器函数中，因为它不是正确的位置。您可以valueChanges收听控件1并将逻辑移动到该控件1。这样，您将优化代码，使其仅在 control1 值更改时运行。