forms - 在 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],
  }]),

但我不断收到类似“错误类型错误:control.registerOnChange 不是函数”的错误。发现这与缺少 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>

你的 fork PLUNKER