在 FormBuilder 中使用嵌套对象

Question

所以我有这个表格，它工作正常..但现在我想扩展 json 结构一些...

https://plnkr.co/edit/aYaYTBRHekHzyS0M7HDM?p=preview

我想使用的新结构如下所示（仅地址：已更改）:

  email: ['', [Validators.required, Validators.email]],
  password: ['', [Validators.required, Validators.minLength(5)]],
  address: this.fb.array([{
    name: '',
    addressLine1: ['', [Validators.required]],
    city: ['', [Validators.required]],
    postalCode: [Validators.required],
  }]),

但我不断收到 "ERROR TypeError: control.registerOnChange is not a function" 之类的错误。发现这与缺少 formControlName 有关，但我不希望所有数据都显示..

在输入字段中，我只想显示 addressLine1（根本不显示姓名、城市或邮政编码）。

Answer 1

我会为 address 使用表单组而不是 formarray，所以它看起来像这样：

this.registrationForm = fb.group({
  email: ['', [Validators.required, Validators.email]],
  password: ['', [Validators.required, Validators.minLength(5)]],
  address: this.fb.group({ // make a nested group
    name: '',
    addressLine1: ['', [Validators.required]],
    city: ['', [Validators.required]],
    postalCode: [Validators.required],
  }),
});

然后在你的模板中，记得标记formGroupName:

<md-input-container formGroupName="address"> <!-- Mark the nested formgroup name -->
   <input mdInput type="text" placeholder="AddressLine1" name="address" 
         formControlName="addressLine1" fodiGoogleplace 
         (updateAdress)="setAdressOnChange($event)">
</md-input-container>

你的分叉 PLUNKER

在 FormBuilder 中使用嵌套对象

Using nested objects in FormBuilder

forms

angular

angular2-formbuilder