Nested FormArray Example Add Form Fields Dynamically

In this guide, we will show you how to build a multi-level nested FormArray Example. The only way to build nested forms in angular is by using the FormArray. We show you how to add form fields dynamically in a 2 level nested Form. Our Form will consist of an employee and his skills. The user will be able to add/remove employee’s and under each employee, you can add/remove any number of skills. If you have not used FormArray, then we suggest you read the FormArray Example in Angular.

Applies to: Angular 2 to the latest edition of i.e. Angular 8. Angular 9, Angular 10, Angular 11, Angular 12

Angular Nested Formarray

Create a new Angular Project. Open the app.module.ts and import the ReactiveFormsModule

Also, add it to the imports array of NgModule of the AppModule

You can refer to the completed Source Code from StackBlitz

Import FormArray

Go to the AppComponent. Import the FormArray from the Angular Forms Module.

Build a Form Model

The First task is to build a Form Model empForm. It has only one property a FormArray of employees.

Employee FormArray

Helper method, which returns the employees FormArray from the model empForm

The newEmployee method creates a new employee FormGroup and returns it. It has three properties. firstName, lastName and skills FormArray.

Next, the method to add an employee. It uses the newEmployee method which returns the Employee FormGroup and ads it to employees array.

Method to remove the employee form the array. It needs the index position to remove it.

Skills FormArray

Under each employee, we have skills array. Hence create helper method which returns a skills array from the employee array. We need to pass the index position of the employee array as argument.

newSkill method returns a skill FormGroup. It has two fields. Name of the skill and years of exp

addEmployeeSkill method the skill to employee.

Finally, removeEmployeeSkill method, which removes the skill of an employee.

The onSubmit method accepts the Employee Forms. You can validate and update the database from here.

Template

Create a <form> and bind it to empForm using formgroup directive

Under empForm we have employees array. Bind it to the div element using formArrayName directive

Next, loop through the controls under the employees using ngFor. let empIndex=index will save the index position in the empIndex local variable.

The index is used as the name of the control in a Form Array. Hence use the [formGroupName]="empIndex" to bind it to the FormGroup. The style exists to show a nice border around employee

Input element for employee’s firstNamelastName. Also, place a button removeEmployee(empIndex) to remove this employee from the array.

Bind the skills of the empoyee to a div using formArrayName directive

ngFor, now loops through the skills array of the employee.

input fields for skill and exp, Also button to remove the skill, which calls the removeEmployeeSkill(empIndex,skillIndex)

Finally a button the add the skill to the employee

Finally a button the add the employee


Best Angular Books
The Top 8 Best Angular Books, which helps you to get started with Angular  

Nested FormArray Example. Add Form Fields Dynamically
Nested FormArray Example. Add Form Fields Dynamically

Updating the Nested forms With Initial Data

Setting the initial values in the nested Forms is a little tricky. You need to build the form dynamically and then use the PatchValue & SetValue methods to update the form.

SetValue & PatchValue in FormArray Angular

Source Code

You can view the source code from the StackBlitz.

app.component.ts

app.component.html

Summary

In this tutorial, we learned how to create Multiple levels of nested forms in Angular.

Reference

10 thoughts on “Nested FormArray Example Add Form Fields Dynamically”

  1. this example is good. However I have an existing dataset in the same format being received from a service method. I need to provide the capability to add/delete/modify. The delete/modify should work on existing data received from service as well. How do I render the existing data set? Any suggestion.

  2. great walkthrough. Thank you. I was wondering how to add infinite employee forms to each other. I have a list of commands, and each can have a subcommands. Subcommands can also have subcommands as well until the flow is met. Any suggestions on how it can be done? thanks again

    1. “infinite” depth sub-commands where depth is unknown would be tricky. I think you should go with Nested Components along with the Nested FormArray.

      I hope this helps

      1. I don’t expect the number of sun-commands to be very large. However, I also can’t determine the number of sub-commands. Thus, having the option to add as many sub-commands as it’s needed is quite what i need. I don’t see the use of sub components since i need to use the exact same form. What do you think? any thoughts on how that can be implemented.

        Thanks,

Leave a Comment

Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Scroll to Top