nested formarray in angular 8
import { Component } from '@angular/core';
import { FormGroup, FormArray, FormBuilder } from '@angular/forms'
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'Nested FormArray Example Add Form Fields Dynamically';
empForm:FormGroup;
constructor(private fb:FormBuilder) {
this.empForm=this.fb.group({
employees: this.fb.array([]) ,
})
}
employees(): FormArray {
return this.empForm.get("employees") as FormArray
}
newEmployee(): FormGroup {
return this.fb.group({
firstName: '',
lastName: '',
skills:this.fb.array([])
})
}
addEmployee() {
console.log("Adding a employee");
this.employees().push(this.newEmployee());
}
removeEmployee(empIndex:number) {
this.employees().removeAt(empIndex);
}
employeeSkills(empIndex:number) : FormArray {
return this.employees().at(empIndex).get("skills") as FormArray
}
newSkill(): FormGroup {
return this.fb.group({
skill: '',
exp: '',
})
}
addEmployeeSkill(empIndex:number) {
this.employeeSkills(empIndex).push(this.newSkill());
}
removeEmployeeSkill(empIndex:number,skillIndex:number) {
this.employeeSkills(empIndex).removeAt(skillIndex);
}
onSubmit() {
console.log(this.empForm.value);
}
}
export class country {
id: string;
name: string;
constructor(id: string, name: string) {
this.id = id;
this.name = name;
}
}
4.17
6
<h1>{{title}}</h1>
<form [formGroup]="empForm" (ngSubmit)="onSubmit()">
<div formArrayName="employees">
<div *ngFor="let employee of employees().controls; let empIndex=index">
<div [formGroupName]="empIndex" style="border: 1px solid blue; padding: 10px; width: 600px; margin: 5px;">
{{empIndex}}
First Name :
<input type="text" formControlName="firstName">
Last Name:
<input type="text" formControlName="lastName">
<button (click)="removeEmployee(empIndex)">Remove</button>
<div formArrayName="skills">
<div *ngFor="let skill of employeeSkills(empIndex).controls; let skillIndex=index">
<div [formGroupName]="skillIndex">
{{skillIndex}}
Skill :
<input type="text" formControlName="skill">
Exp:
<input type="text" formControlName="exp">
<button (click)="removeEmployeeSkill(empIndex,skillIndex)">Remove</button>
</div>
</div>
<button type="button" (click)="addEmployeeSkill(empIndex)">Add Skill</button>
</div>
</div>
</div>
</div>
<p>
<button type="submit">Submit</button>
</p>
</form>
<p>
<button type="button" (click)="addEmployee()">Add Employee</button>
</p>
{{this.empForm.value | json}}
Thank you!
6
4.17
(6 Votes)
0
Are there any code examples left?
New code examples in category Javascript
Relative searches
angular reactive form nested array
nested formarray with validations in angular
nested formarray validation angular 6
angular forms nested form arrays
angular nested formarray group
set FormArray value nested inside FormArray - angular
nested formarray in angular 11
nested form arrays angular 8
how to get value from nested formarray in angular
how to get value from nested form array in angular
how to patchvalue for nested formarray in angular
how to patchvalues for nested formarray in angular
angualr form .get formarray .get formarray nested
angular reactive form nested formarray
angular nested formarray example
nested form angular formgroup array
how to send form data added nested array in angular
how to define nested formarray in angular 6
how to define nested form array in angular 6
nested formarray in angular
angular nested formarray
angular formarray nested
angular nest 2 form array
how to manage nested form array with control value acessor in angular
angular 5 nested formarray
angular nested formarray in formgroup
angular formarray nested formgroup
nested form array how to setvalue angular
2 step nesting formarray angular
nested formarray angular 8
nested formarray angular
form array nested on reactiveform
nested formarray in angular stackblitz
nested formarray angular 8 stackbiltz
formarray nested in reactuve forms angular
angular accessing nested formarray
angular nested form arrays
formarray in angular 8
nested formarray
edit nested formarray
nested forarray
nnested forms array
for loop in nested formarray in reactive form
get form array which is nested inside form group array
angular nested formarray
push to nested formarray angular form control
nested formarray in angular 10 reactive forms
angular validation nested tag
nested form array in angular 7
angular FormArray nested forGroup
nested formarray in angular 8
how to access elements of neste reactive form using loo[s
formarray with nested formgroup
nesting form group in form array angular
nested formarray angular 6
