Question

如果使用此方法选择了某个选项，我编写了一个函数来更新输入上的Validator规则（表单是使用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]);
    }
}

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

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

Answer 1

如果有正确的验证器，您可以在选择选项后manually call AbstractControl#updateValueAndValidity：

this.formBuilder.updateValueAndValidity();

（当然，this.formBuilder是您的FormBuilder个实例。）

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

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

Answer 2

代替删除和添加验证。启用和禁用字段更为简单。您需要为所有必填字段添加Validators.required。并禁用不需要的字段。

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

    if(data != 'option3') {
        appVIP1.disable();
        appVIP2.disable();
        appVIP3.disable();
    }
    else {
        appVIP1.enable();
        appVIP2.enable();
        appVIP3.enable();
    }
}

Angular 2 - 删除Validator错误

2 个答案: