forms - 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]);
    }
}       

然后我将该函数调用绑定(bind)到单选按钮上的点击事件(我最初使用来自 this answer 的指南，但 onChange 函数未正确绑定(bind))。

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

Answer 1

如果正确的验证器就位，您可以 manually call AbstractControl#updateValueAndValidity在他们选择一个选项后:

this.formBuilder.updateValueAndValidity();

(当然，this.formBuilder 是您的 FormBuilder 实例。)

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

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