A Simple Example how to implement Nested FormGroups and FormArrays in Angular

export class NestedComponent implements OnInit {
constructor() { }
userForm:any;
ngOnInit(): void {
this.userForm=new FormGroup({
users:new FormArray([])
})
this.loadData();
}
loadData(){
for(let x in userData){
this.userForm.get('users').push(new FormGroup(
{
id: new FormControl({value:userData[x].id,disabled:true}),
name: new FormControl(userData[x].name,[Validators.required]),
username: new FormControl(userData[x].username,[Validators.required]),
email: new FormControl(userData[x].email,[Validators.required,Validators.email]),
address:new FormGroup({
street: new FormControl(userData[x].address.street,[Validators.required]),
suite: new FormControl(userData[x].address.suite,[Validators.required]),
city: new FormControl(userData[x].address.city,[Validators.required]),
zipcode: new FormControl(userData[x].address.zipcode,[Validators.required]),
geo:new FormGroup({
lat:new FormControl(userData[x].address.geo.lat,[Validators.required]),
lng:new FormControl(userData[x].address.geo.lng,[Validators.required])
})
}),
phone: new FormControl(userData[x].phone,[Validators.required]),
website: new FormControl(userData[x].website,[Validators.required]),
company:new FormGroup({
name:new FormControl(userData[x].company.name,[Validators.required]),
catchPhrase:new FormControl(userData[x].company.catchPhrase,[Validators.required]),
bs:new FormControl(userData[x].company.bs,[Validators.required])
}),
cars:new FormArray(this.loadCars(x))
}
))}}
loadCars(x):any{
let controls=[];
for(let y in userData[x].cars){
controls.push(new FormGroup({
name:new FormControl(userData[x].cars[y].name,[Validators.required]),
models:new FormControl(userData[x].cars[y].models,[Validators.required])
}))
}
return controls;
}
track(item:any,index:number){
return index;
}
submit(f)
{
console.log(f.value);
}
}
this.userForm=new FormGroup({
users:new FormArray([])
})
loadData(){
for(let x in userData){
this.userForm.get('users').push(new FormGroup(
{
id: new FormControl({value:userData[x].id,disabled:true}),
name: new FormControl(userData[x].name,[Validators.required]),
username: new FormControl(userData[x].username,[Validators.required]),
email: new FormControl(userData[x].email,[Validators.required,Validators.email]),
address:new FormGroup({
street: new FormControl(userData[x].address.street,[Validators.required]),
suite: new FormControl(userData[x].address.suite,[Validators.required]),
city: new FormControl(userData[x].address.city,[Validators.required]),
zipcode: new FormControl(userData[x].address.zipcode,[Validators.required]),
geo:new FormGroup({
lat:new FormControl(userData[x].address.geo.lat,[Validators.required]),
lng:new FormControl(userData[x].address.geo.lng,[Validators.required])
})
}),
phone: new FormControl(userData[x].phone,[Validators.required]),
website: new FormControl(userData[x].website,[Validators.required]),
company:new FormGroup({
name:new FormControl(userData[x].company.name,[Validators.required]),
catchPhrase:new FormControl(userData[x].company.catchPhrase,[Validators.required]),
bs:new FormControl(userData[x].company.bs,[Validators.required])
}),
cars:new FormArray(this.loadCars(x))
}
))}}
loadCars(x):any{
let controls=[];
for(let y in userData[x].cars){
controls.push(new FormGroup({
name:new FormControl(userData[x].cars[y].name,[Validators.required]),
models:new FormControl(userData[x].cars[y].models,[Validators.required])
}))
}
return controls;
}
“cars”: [{ “name”:”Ford”, “models”:”Fiesta” },{ “name”:”BMW”, “models”:”X3" },{ “name”:”Fiat”, “models”:”500" }]
<form [formGroup]=”userForm” (ngSubmit)=”submit(userForm)”>
<div formArrayName=”users”>
<table class=”table-bordered”>
<tr>
<th>ID</th>
<th>NAME</th>
<th>USERNAME</th>
<th>EMAIL</th>
<th>STREET</th>
<th>SUITE</th>
<th>CITY</th>
<th>ZIPCODE</th>
<th>LAT</th>
<th>LNG</th>
<th>PHONE</th>
<th>WEBSITE</th>
<th>COMPANY NAME</th>
<th>COMPANY CATCHPHRASE</th>
<th>COMPANY BS</th>
<th colspan=”3">CARS OWNED</th>
</tr><tr *ngFor=”let x of this.userForm.get(‘users’).controls;let i=index;trackBy:track” [formGroupName]=”i”><td><input type=”text” formControlName=”id”></td>
<td><input type=”text” formControlName=”name”></td>
<td><input type=”text” formControlName=”username”></td>
<td><input type=”text” formControlName=”email”></td>
<ng-container formGroupName=”address”>
<td><input type=”text” formControlName=”street”></td>
<td><input type=”text” formControlName=”suite”></td>
<td><input type=”text” formControlName=”city”></td>
<td> <input type=”text” formControlName=”zipcode”></td>
<ng-container formGroupName=”geo”>
<td><input type=”text” formControlName=”lat”></td>
<td><input type=”text” formControlName=”lng”></td>
</ng-container>
</ng-container>
<td><input type=”text” formControlName=”phone”></td>
<td><input type=”text” formControlName=”website”></td>
<ng-container formGroupName=”company”>
<td><input type=”text” formControlName=”name”></td>
<td><input type=”text” formControlName=”catchPhrase”></td>
<td><input type=”text” formControlName=”bs”></td>
</ng-container>
<ng-container formArrayName=”cars”>
<ng-container *ngFor=”let y of x.get(‘cars’).controls;let j=index;trackBy:track” [formGroupName]=”j”>
<td>
<input type=”text” formControlName=”name”><input type=”text” formControlName=”models”>
</td>
</ng-container>
</ng-container>
</tr>
</table>
</div>
<button type=”submit”>Submit</button>
</form>
<div formArrayName=”users”>
<tr *ngFor=”let x of this.userForm.get(‘users’).controls;let i=index;trackBy:track” [formGroupName]=”i”>
<ng-container formGroupName=”address”>
<td><input type=”text” formControlName=”street”></td>
<td><input type=”text” formControlName=”suite”></td>
<td><input type=”text” formControlName=”city”></td>
<td> <input type=”text” formControlName=”zipcode”></td>
<ng-container formGroupName=”geo”>
<td><input type=”text” formControlName=”lat”></td>
<td><input type=”text” formControlName=”lng”></td>
</ng-container>
</ng-container>
<ng-container formArrayName=”cars”>
<ng-container *ngFor=”let y of x.get(‘cars’).controls;let j=index;trackBy:track” [formGroupName]=”j”>
<td>
<input type=”text” formControlName=”name”><input type=”text” formControlName=”models”>
</td>
</ng-container>
</ng-container>

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store