Angular 2 - 删除验证器错误

Question

我编写了一个函数，如果选择了某个选项，则使用此方法更新输入上的验证器规则（表单是使用 FormGroup 构建的）：

onValueChanged(data : any) {
    let appVIP1 = this.vip1TabForm.get('option1');
    let appVIP2 = this.vip2TabForm.get('option2');
    let appVIP3 = this.vip3TabForm.get('option3');

    //Set required validation if data is 'option3'
    if(data != 'option3') {
        //Due to initialization errors in UI, need to start with the case
        //That there are validations, check to remove them
        appVIP1.setValidators([]);
        appVIP2.setValidators([]);
        appVIP3.setValidators([]);
    }
    else {
        appVIP1.setValidators([Validators.required]);
        appVIP2.setValidators([Validators.required]);
        appVIP3.setValidators([Validators.required]);
    }
}       

我将该函数调用绑定到单选按钮上的单击事件（我最初使用了此答案中的指南，但 onChange 函数未正确绑定）。

这非常有效，如果用户选择选项 1 或 2，验证将为空，并且不会被触发。如果他们选择选项 3，则会显示验证并停止提交。但是，我遇到了用户提交、看到错误并返回更改选项 1 或 2 的问题。虽然验证器被清除，但我的表单仍然显示为无效。我正在验证多个输入字段，因此如果以这种方式删除验证器，我不能将表单设置为有效。我该怎么做呢？我可以删除has-error表单组中某一特定字段的 吗？

Answer 1

如果正确的验证器已就位，您可以在它们选择选项后手动调用：AbstractControl#updateValueAndValidity

this.formBuilder.updateValueAndValidity();

（当然，this.formBuilder你的FormBuilder实例在哪里。）

您也可以直接在 FormElements 上调用它。

这通常用于在以编程方式更改表单元素的值后触发验证。