What is the Dynamic form?
A dynamic form is a form where the user can add as many fields as they want in the form. For eg consider we have a form with fields Name, Skills and Experience. One user can have multiple skills and corresponding years of experience in that particular skill, based on the above condition we cannot give only one form field for skills and experience. So we are going to give one ADD button on click of which skill and experience fields will be dynamically added.
Table of content
Some of the common methods in Formarray
Stackblitz example on FormArray
Commonly used FormArray methods
push: This will push the form control at the end
removeAt(Index): This takes the parameter as index position and removes the form control at that particular position
insertAt(index,controls): This will insert form control at a specific position in the form, it takes two parameter index and controls
Index- position in the array to insert the control
Control- Form control to be inserted
Now we are going to discuss some basic functions of formArray
- Dynamic Form
Here i have keeped skill name field and experience field as dynamic field, when we click on Add button skill name and experience field will be pushed as a form control at the end of the formArray
.html file
<button type="button" (click)="addSkills()">Add</button>
.ts file
addSkills() {
this.skills.push(this.newSkill());
}
newSkill(): FormGroup {
return this.fb.group({
skill: new FormControl('', Validators.required),
exp: new FormControl('', Validators.required),
});
}
removeAt(index)
Below is the function which causes skill to be removed at the specified index in the form array
. on click of Remove button index of specific formContol element will be passed in removeAt function which will remove the field at that specific index
.html file
<button (click)="removeSkill(i)">Remove</button>
.ts file
removeSkill(i: number) {
this.skills.removeAt(i);
}
insertAt(index,controls)
When we click on Add above button current index will be passed which will add skills and experience form control to the current index and the current index field will be pushed to the next index
.html
<button type="button" (click)="atSpecificIndex(i)">Add above</button>
.ts
atSpecificIndex(i: number) {
this.skills.insert(i, this.newSkill());
console.log(this.skillsForm.controls.skills.status);
}
newSkill(): FormGroup {
return this.fb.group({
skill: new FormControl('', Validators.required),
exp: new FormControl('', Validators.required),
});
}
Bellow is the link of the project