angular - FormBuilder 中的嵌套属性

Question

我想知道是否有一种方法可以使用 Angular 2 的 FormBuilder 设置嵌套属性，如下所示:

this.form = formBuilder.group({
  name: ['', Validators.required],
  email: ['', Validators.required],

  address: {
     state: ['ca', Validators.required],   // <---- this gives an error
  }
});

模板:

<form [formGroup]="form" (ngSubmit)="onSubmit()">
  <ion-item-divider color="light">Personal Data</ion-item-divider>
  <ion-item>
    <ion-label floating>Name</ion-label>
    <ion-input type="text" formControlName="name"></ion-input>
  </ion-item>
  <ion-item>
    <ion-label floating>Email</ion-label>
    <ion-input type="text" formControlName="email"></ion-input>
  </ion-item>
  <ion-item>
    <ion-label floating>State</ion-label>
    <ion-input type="text" formControlName="address.state"></ion-input>
  </ion-item>
</form>

这给了我一个错误，指出它找不到字段名称 state，即使它在那里。

这对我有很大帮助，因为我的表格很长，最好能更好地组织它。

提前致谢。

Answer 1

Sasxa 回答到一半，但没有注意到您在模板评估部分看到了错误。因此发布模板很重要。

要修复它，您可以将模板的地址部分包装在一些不显眼的元素中，例如:

<span formGroupName="address">
    <ion-item>
        <ion-label floating>State</ion-label>
        <ion-input type="text" formControlName="state"></ion-input>
     </ion-item>
</span>

当您构建表单时，请按照建议进行操作:

address: formBuilder.group({
   state: ['ca', Validators.required]
})

FormGroupName 的文档