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