Using nested objects in FormBuilder

Question

So I have this form, and it works fine.. but now I would like to extend the json structure some...

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

The new structure I want to use looks like this (only address: has changed):

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

But I keep getting errors like "ERROR TypeError: control.registerOnChange is not a function". Figured out that this has to do with formControlName missing but I don´t want all data do show..

In the input field I only want addressLine1 to show (not showing name, city, or postalCode at all).

Answer 1

I would use a form group instead of a formarray for the address, so it would look like this instead:

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

Then in your template, remember to mark the 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>

Your forked PLUNKER