结构化Angular2表单-如何包含验证

上下文

Jecelyn Yeen对如何在Angular2中组织嵌套表单有自己的见解

在她的示例中，她使用一个数组来显示多个地址表单子组件，以便用户可以无休止地单击“添加地址”，并且表单仍将正确验证。我想做一些类似的事情，但不是拥有子窗体数组，而是根据下拉列表的值显示不同的子窗体

我尝试将我的代码结构与她的类似，除了不返回form builder数组，而是为我要显示的每个子表单使用一个表单组。选择下拉选项后，我将删除不应显示的表单组，并重新创建应显示的表单组。我遇到的问题是，当以这种方式构造时，父窗体不会在子窗体中拾取更改

代码

ts:

html:

---

换句话说，我输入子表单组的文本永远不会被父表单拾取。但是我可以看到，

myForm.controls.nameInfo

确实有一个包含正确信息的值，当选择其他值时也是如此。所有这些属性都有一个

valid

属性

true

。但是，除非我手动调用

myForm.updateValueAndValidity（）

，否则父窗体不会接受这些更改。这并不理想，因为我希望表单一生效就显示为有效，而不必添加我自己的事件侦听器来实现它。

根据注释，问题是隐藏控件，它们仍在进行验证

如果要隐藏和显示select

FormGroups

并且不希望它们计入验证或

form.value

属性，则可以在单个控件或包含

FormGroups

的控件上调用

disable（）

：

this.myForm.addressInfo.disable(); // disables the entire addressInfo group
// which removes it from validation, thus preventing false flags.

---

为什么要绑定按钮上的

[ngClass]

而不是

[disabled]

属性？其中之一实际上控制按钮是否将被禁用。另一个是基于表单有效性对按钮应用css类。你说得对！我道歉。我在本地看到了这一点，因为我正在更新选择下拉列表时应显示的表单。我正在删除其他表单组件，然后执行

myForm.addressInfo=this.getAddressForm（）

，这会破坏模板。因此，我想真正的问题是如何有选择地显示子表单并正确验证父表单（如果未显示的表单的必填字段为空，则返回为无效，如果未显示，则返回为空）。禁用IIRC的控件不计入验证。通过

disable（）。如果你想更新你的问题，如果这有效，我明天会回来把它作为答案。如果我记错了，我会去做一些研究。谢谢！那确实有效。请随意添加正确答案，我会接受的。
<form [formGroup]="myForm">
  <div [formGroupName]="'nameInfo'" *ngIf="showNameForm">
    <input type="text" formControlName="name" />
  </div>
  <!-- Similar for other fields -->
  <!-- ... -->
  <button [ngClass]="{disabled: !myForm.valid}">Submit</button>
</form>

{
  nameInfo: {
    name: ""
  }
}

this.myForm.addressInfo.disable(); // disables the entire addressInfo group
// which removes it from validation, thus preventing false flags.