在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不是函数".想通知这与formControlName缺失有关,但我不希望所有数据都显示..

在输入字段中,我只想显示addressLine1(根本不显示name,city或postalCode).

Answer 1

我会使用表单组而不是formarray 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