Is there a way to utilize Angular 2's FormBuilder to set nested attributes? For example:
this.form = formBuilder.group({
name: ['', Validators.required],
email: ['', Validators.required],
address: {
state: ['ca', Validators.required], // <---- this gives an error
}
});
Template:
<form [formGroup]="form" (ngSubmit)="onSubmit()">
<ion-item-divider color="light">Personal Data</ion-item-divider>
<ion-item>
<ion-label floating>Name</ion-label>
<ion-input type="text" formControlName="name"></ion-input>
</ion-item>
<ion-item>
<ion-label floating>Email</ion-label>
<ion-input type="text" formControlName="email"></ion-input>
</ion-item>
<ion-item>
<ion-label floating>State</ion-label>
<ion-input type="text" formControlName="address.state"></ion-input>
</ion-item>
</form>
Despite having the field state, an error is returned indicating it wasn't found.
This feature would greatly benefit me as I am working with a lengthy form that could use better organization.
Thank you in advance.