angular - FormBuilder中的嵌套属性

我想知道是否有方法使用Angular2的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，即使它在那里。
这对我有很大帮助，因为我的状态很长，组织得更好会更好。
提前感谢。

最佳答案

Saxa的回答有一半，但是没有看到模板评估部分的错误。因此为什么发布模板很重要。
若要修复此问题，请将模板的地址部分包装在一些不显眼的元素中，如：

<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

关于angular - FormBuilder中的嵌套属性，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/41174533/

formbuilder

angular - FormBuilder中的嵌套属性