Question

我有一个这样创建的表单组：

this.formGroupName = this.formBuilder.group({
  control1: ['', Validators.compose([Validators.required])],
  control2: this.formBuilder.group({
    innerControl1: ['', Validators.compose([Validators.required])],
    innerControl2: ['', Validators.compose([Validators.required])]
  }),
  control3: ['', Validators.compose([Validators.required])],
});

通常，我的用户将始终为control1和control3输入一些内容，并且不需要control2来填写表格。但是，如果用户选择其他选项，我也希望同时需要control2。

我将如何实现这种功能？有内置工具吗？我尝试在formBuilder中使用if语句，但这不起作用。

Answer 1

您需要使用setValidators()函数来动态添加验证器，并使用clearValidators()函数来删除验证器。此外，您可能需要调用updateValueAndValidity()函数以强制验证程序立即采取行动。

现在，如果您的情况是由外部代码触发的（不是窗体的控件），请尝试以下示例代码：

if(some-condition){
   this.formGroupName.controls.control2.setValidators([Validators.required]);
   this.formGroupName.controls.control2.updateValueAndValidity();
}else{
   this.formGroupName.controls.control2.clearValidators();
}

另一方面，如果条件取决于表单的控件，请订阅该控件的valueChanges。试试这个示例代码：

this.formGroupName.controls.anotherControl.valueChanges.subscribe(val => {

    if(val){
        this.formGroupName.controls.control2.setValidators([Validators.required]);
        this.formGroupName.controls.control2.updateValueAndValidity();
    }
    else{
        this.formGroupName.controls.control2.clearValidators();
    }

}

如何建立对条件做出反应的表单组？

1 个答案: