Building dynamic form with Angular FormArray

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

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

https://stackblitz.com/edit/angular-ivy-gy7rqc