在 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 使用表单组而不是表单数组，所以它看起来像这样：

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