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的文档

Answer 2

试试这个：

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

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

并在模板中：

<ion-input type="text" [formControl]="address.get('state')"></ion-input>

FormBuilder中的嵌套属性

2 个答案: