如何构建一个对条件做出反应的表单组？

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();
    }

}

如何构建一个对条件做出反应的表单组？

How to build a Form Group that reacts to conditions?

angular-material

angular

angular-reactive-forms