Angular 2 - 删除Validator错误

时间:2017-07-26 17:55:43

标签: forms angular validation

如果使用此方法选择了某个选项,我编写了一个函数来更新输入上的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吗?

2 个答案:

答案 0 :(得分:4)

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

this.formBuilder.updateValueAndValidity();

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

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

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

答案 1 :(得分:0)

代替删除和添加验证。启用和禁用字段更为简单。您需要为所有必填字段添加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();
    }
}