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).
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