Angular nested form

Angular nested form DEFAULT

Nested Angular Reactive Forms

Dealing with forms is rarely simple anymore. Many SaaS products offer highly customizable setups managed by complex and dynamic forms. Knowing how to use Angulars ControlContainer will give you more control, heh, over managing your forms.


The ControlContainer is a base class for form directives that contain multiple registered instances of NgControl. We can use the ControlContainer to access FormControls, FormGroups, and FormArrays and manage a main form chunked across components.

A common situation is having a group of form controls, like an “address” groups of fields like “street”, “city”, “zip” that you use repeatedly across your application. To use bind a Reactive FormControl to the DOM we need access to that FormControl - and can use the FormGroup directive to pass a main FormGroup instance to nested components.

Inside our reusable Address component we can access the by injecting the ControlContainer class in our constructor - this will return the parent FormGroupDirective and allow us to access that control. From there we can use the for our FormControls as expected.

We can use the same approach in other situations, for example a form that’s presented across multiple paths.

In the child component we access the parent formDirective through the class and bind it to a new form directive in our component and include the formControls we want to present to the user.

Code demo here:

Cheers from a dairy farm 🐮in New Zealand!

Dairy farm


Angular reactive nested forms

I am trying to nest multiple reactive forms in my angular project and there forms are in different components.

For example I have a component that contains a form with two inputs one input for name and one input for description and a submit button. I call this component

I am planning to use this component across multiple pages and forms. Here is the html for the component.

And here is the abbreviated ts file

Then in a page where I am using this component I also have another form with the inside the form, like this

Currently what I am doing is passing the from its component to the with the Output and EventEmitter. This solution seems to work and when I update child I am able to access the values. But the downside is when I go to submit the form I have to check that the and then are both valid and manage both forms separately.

I am wondering if there is a better way to approach this? When I can access the from within the parent form?


asked Jan 9 '19 at 11:53


34322 silver badges88 bronze badges

  1. Compression sacks walmart
  2. Ip routing cisco switch
  3. Altium live 2020
  4. Sulfur lotion walmart

Nested Forms in Angular 6

A step-by-step guide to use nested forms within the latest version of Angular. 

Recently, I was working on a portal that needed to use an array within an array. For that, I decided to use the nested form structure, and it worked very well for me. I thought this might be helpful for a lot of other people too, so I decided to share about nested forms because they can be used in any scenario.

What is a Nested Form?

In simple words, nested forms are forms within a form. Using nested forms, we can create an array of objects within a single field and we can have an array of these fields.

Hence, the nested form helps us manage large form groups and divides it into small groups.

For example:

  • A company decides to issue a form to collect data from users.
  • The users should add all the cities in which they have lived, so the users should be able to create a text box dynamically for each city they add.
  • Within the Cities, the users may have multiple address lines, so the users should also be able to add new text boxes for the address lines dynamically.
  • Here Cities itself is a form array, and, within that form array, the address is nested form array.

Let’s see how we can achieve this scenario using Angular 6.

We’ll go step by step and start writing the code in parallel to achieve our goal.

Demo Application

For the demo application, we will create nested forms by which we will be able to add new Cities and, within those cities, new address lines.

So basically, we are going to build this:


As you can see here, after this assignment, we will be able to dynamically add Cities and the address lines within a city. So, let us start.

Form Creation and the Default Data

First of all, we will decide the structure of our nested array, and once the structure is ready, we will try to set the default data in the form.

Our array structure looks like this: 

Here, the city is an array and the addressLines is the array within the Cities array.

Our form group would look like below: 


We are using the Form builder(fb) to build our form. Here the Cities array will be filled with the City name and the AddressLine array.

Now, if we try to set the default data then our methods would look like below:

Set the Cities 




  • We are fetching the Cities control and we are pushing the City name and the array of Address Lines.
  • setAddressLines function is called to fill the data of the Address lines.
  • The above code will set the cities.

Set the Address Lines 




  • We have the instance of the parent City, so we are pushing new Address Lines within that parent City.
  • The above code will set the Address lines.

The HTML for the Default Data

Once our default data is pushed, let us see how our HTML looks. We have pushed the data into the Form arrays in the component, so in HTML we will iterate through this array to show the Address Lines and the Cities.

For the AddressLines Array 


Here, we are looping through the addressLines array so that new AddressLines would be generated as you can see below:


For the Cities Array

Once we have written the HTML for the address lines, let us add the HTML for the Cities array.



  • We are looping through the Cities array.
  • The Address Lines array is part of the Cities array.

The result looks the like below:


Add Cities and the Address Lines Dynamically

Our basic nested form is ready, but a very important part is missing – adding the values in the array dynamically.

Add New City Dynamically

Let us add a button on whose click event we will push new Cities array.


<button style="margin-top:5px; margin-bottom:5px;"type="button"class="btn btn-primary btn-sm" 
  <span class="glyphicon glyphicon-plus"aria-hidden="true"></span> Add New City




  • On button click, addNewCity() would be called.
  • New Cities array control would be pushed to the existing City array.
  • We are not pushing anything in the Address lines on the creation of the Cities, but we will add a button to add new address lines later.

Now, we can add new cities as you can see below:


Add New Address Lines

As I just mentioned above, we will add a button within the City that will allow us to add the address lines within the cities.

Here, we will have to make sure that the address lines are added for the correct cities. For example, if you click on AddressLine button under City 2, then that address line should be added under City 2. For this, we will have to give the reference of the city array.



As you can see, I am passing the city.controls.addressLines, which will make sure that the address lines are added under the expected city




  • On button click, addNewAddressLine would be called along with the parent city control reference.
  • AddressLines would be pushed within the parent city.

Now, we can add new Address lines, as you can see below:


Remove Cities and the Address Lines

At this point, we can add new cities and the address lines within the cities.

The next step is to be able to remove the dynamically created city or the address line.

Remove the City

To remove the city, we need to pass the index of the cities array to the method.



deleteCity(index) {

  let control = <FormArray>this.myForm.controls.cities;





  • deleteCity will be called on the button click along with the index.
  • Specific array element will be removed from the FormArray of the cities.

Now, we can remove the city from the Cities array dynamically:


Remove the Address Lines

The next step is to remove the address lines from the specific cities.

As we have used the parent(city) control reference while adding a new address line within a city, we will again use the parent’s control to remove the address line from the specific city.



Here, we are passing the parent city's reference of the address lines along with the current index.




  • deleteAddressLine would be called on the button click along with the current control and the current index.
  • The Address line would be removed from specific parent city.

Now, we can remove the address line from a city:


That is it. Our nested form is ready.

The Complete Array

Let us see how our array will look once the text boxes are filled.

For example, we have filled in the details as below:


The array will look like the below: 

The demo application is here and the code for the same is here.

Hope this helps! How are you using nested forms in your projects? Feel free to share in the comments below.

Want to learn more about Angular? Check out our All Things Angular page that has a wide range of info and pointers to Angular information – from hot topics and up-to-date info to how to get started and creating a compelling UI.

Angular, forms, JavaScript, Tutorial

Angular 9 Tutorial For Beginners #51- Reactive Forms - Nested Form Array

Managing Nested and Dynamic Forms in Angular


Angular's ReactiveForms give us immense capabilities with its robust API, but the learning curve can be a bit steep from plain old template-driven forms that many are used to. This quick guide will explain Angular's main form elements and how to combine them, nest them, and dynamically create them in almost any scenario.


First, it’s important to know about AbstractControl, the class extended across most of the form elements we’ll be working with. It has multiple properties that manage everything from the validity state to what the parent element may be, and methods that allow us to mark the state of the control (touched, untouched, dirty, etc), enable/disable the control, get the value, set the value, etc. There’s a lot going in this class, so it’s handy to have its documentation available to refer to:


The basic element of building Angular forms is the FormControl. This is a class that represents that input element on a page with a name value you’re likely used to seeing. Any piece of information we want to collect in a form, whether it’s an input, select, dropdown, or custom element needs to have a representative FormControl. The  directive is used to bind the input element in the DOM to its respective FormControl.

FormControls can be initialized with a value, like ‘your name here’ in the above example, and enabled/disables status, and set any validators necessary.


FormGroup is the class that allows us to group a number of controls together. It also extends the AbstractControl class, meaning we can track the validity and value of all the FormControls in a FormGroup together. This allows us to easily manage our form as a whole. The  directive binds the FormGroup to a DOM element.


FormArray is a class that aggregates FormControls into an array, similar to FormGroup creating an object from FormControls. FormArrays can have controls pushed to them or removed from them similar to the way you’d manipulate an array in vanilla JS, and offer us a lot of power and flexibility when creating nested and dynamic forms.

In this example, we’re using an  loop to iterate through , because  is a FormArray. In this FormArray are controls, so as we loop through the controls, we need to be sure to use the  directive to bind each iteratee DOM element to it’s respective FormGroup instance.


Repeatedly typing , , and  can become a bit tedious, especially when creating larger forms. Fortunately Angular has shorthand syntax we can use thanks to the FormBuilder class.

Now that we have an understanding of the pieces we can build forms with, let’s look at building a more complex form example.

Creating And Removing FormControls & FormGroups Dynamically

Let’s say we want to create a form that allows a user to create an unlimited number of users. This form will need to be able to allow a user to add new FormGroups to create additional users as needed, as well as remove FormGroups they don’t want. We use a FormArray to hold a FormGroups of FormControls for each user we want to create. To do this, we can use FormArray methods:

  • An  method that takes two parameters, the index at which to insert, and the control to insert.
  • A  method, which takes the index of the control to remove.

Now we have a form that dynamically adds and removes FormGroups to allow the user to create as many users as they would like. With a thorough understanding of FormControl, FormGroup, and FormArray we can create any form structure to meet our data submissions needs.

To see working examples of all the code snippets shown above, take a look at the repo on stackblitz.


Need help managing complicated form situations in your application? We're available for training or for hire, just let us know what you need help with! 


Form angular nested

Most of the applications that are built today are just forms, there are numerous forms, and even some of those are dynamic. The structure of the form changes depending on the user. They contain a lot of data. Today, we will take a look into nested reactive forms in Angular 4.
Let’s go!

Reactive Forms

Angular reactive forms
One of the primary reasons why we are using Reactive form is due to the synchronous property of the form whereas the template-driven forms are not synchronous. Reactive forms are driven through the “Form Control” where the value will be in our control.
The value will be updated concurrently once we are done with the changes in form as it would be easy for unit testing. Another advantage of using a Reactive form is that we can easily create tree structures and validations without any hassles.

Nested Forms

Nested Forms will allow us to create the array of objects for a single field and this hierarchy goes on. (i.e) A single object can have a number of objects inside of it, and we can achieve it in Reactive forms through the concept of “Form Array”.
For example, In Nested form, if you want to create a user profile there you can add multiple addresses and inside of that address, we can add multiple phone numbers similarly the list goes on.

For example, { "name": 'abc', "addressess": [{ "street": 'nehru nagar', "phone number": [ { number1: 9845612378 }, { number2: 1589635015 }] }, { "street": 'gandhi nagar', "phone number": [ { number1:7412563474 }, { number2:1578963248 }] }] }

How to Build the Nested Reactive Form in Angular?

These are the 3 steps required to create Nested Reactive Form,
Step 1: create a new application in angular using the command.

“ng new new-app.”

Step 2: Import the forms module and reactive forms module in the app.module.ts file.
Step 3: Three fundamental blocks are used to build a reactive form in ngoninit. There are

  1. formcontrol
  2. formgroup
  3. formarray

Now, Let’s look into these 3 Blocks.

1. FormGroup

FormGroup is the basic block which is formed with various elements of form control and form array. The name of the form control elements will be considered as the key in the formgroup. First, we want to initialize the form name as a formgroup. If we add validation to the child components, once the child element validation gets failed, then the form group validation also would get fail.

2. FormArray

Form array will contain the array of formcontrol objects. It can have an array of objects. Same as form group, if one validation of form control fails, the entire form array validation would get fail. Plus, Some basic built-in methods of formarray are,

  • at(i: index) – get the formcontrol of the given index
  • push(control)  – push the controls at the end of the array
  • insert(i: index, control)  – Add the control at the given index
  • remove at(i: index)  – Will Remove the control at the given index

3. FormControl

The primary use of formcontrol is, We could easily track the changes that occur in the form. At first, we can initialize the value of the form control. Now, we can add the validation in the form control which is used to validate the particular field. Additionally, We can also give options for the form control. Usually, the form control would get updated on the blur event.
An example syntax for the formcontrol is shown below,

const c = new FormControl(‘’, Validators.required,{ updateOn: ‘blur’}

Related: Angular 4 Template Driven Forms: Building and Validating Forms


To give easy syntax. Formbuilder will act as a medium for initializing form array, form control, form group. And, it can be done using the inbuilt methods of the form builder.
To use the formbuilder , we want to import formbuilder from the angular forms.
Methods used in FormBuilder are,

  • group() will return a new formgroup
  • control() will return a new formcontrol
  • array() will return a new formarray

In the Below code, I have given an example for initializing the nested reactive forms. To ensure your reactive form is user-friendly, you can able to add or remove multiple addresses, and also each address can have multiple mobile numbers.
The code snippet for initializing form group, form array is given below,

ngOnInit() { this.myForm ={ name: ['', [Validators.required, Validators.minLength(5)]], addresses: this.formBuilder.array([ this.initAddress(), ]) }); } initAddress() { return{ street: ['', Validators.required], postcode: [''], phonenumber: this.formBuilder.array([ this.initNumber() ]) }); } initNumber() { return{ number: ['', Validators.required] }) }

The HTML code for adding Address, Number, removing address and number is given below,

<div formArrayName="addresses"> <div *ngFor="let address of myForm.controls.addresses.controls; let i=index" class="panel panel-default"> <div class="panel-heading "> <span>Address {{i + 1}}</span> <a *ngIf="myForm.controls.addresses.controls.length > 1" (click)="removeAddress(i)" style="cursor: default"> X </a> </div> <div class="panel-body" [formGroupName]="i" class="col-md-12 border"> <div class="row"> <div class="form-group col-md-6"> <label>street</label> <input type="text" class="form-control" formControlName="street"> </div> <div class="form-group col-md-6"> <label>postcode</label> <input type="text" class="form-control" formControlName="postcode"> </div> </div> <div class="row"> <div formArrayName="phonenumber" *ngFor="let number of myForm.controls.addresses.controls[i].controls.phonenumber.controls; let j=index" class="col-md-6"> <div [formGroupName]="j" > <div class="form-group" style="padding-right:0px"> <label>Number</label> <a *ngIf="address.controls.phonenumber.controls.length > 1" (click)="removeNumber(address, j)" style="cursor: default">X</a> <input type="text" class="form-control" placeholder="Enter Number" formControlName="number"> </div> </div> <a class="pull-right" *ngIf="j == address.controls.phonenumber.controls.length-1" (click)="addNumber(address)" >AddNumber</a> </div> </div> </div> </div> </div>

I have added the live preview for building nested reactive form as you can see it using this link.
I hope you find this building useful to build nested reactive forms for your Angular applications. Throw your doubts, we are happy to solve it for you. Like what you’re reading? then get our exclusive updates and blogs on Angular by subscribing to the newsletter.
If you are looking for Angular developers for your project? Hire Angular developer from Agira Technologies to build the best web-apps at affordable rates. Our dedicated Angular developers are well-versed with all the updates and ensure top-notch web application development to meet your business requirements. For any queries reach us via [email protected]

Turn your vision to magnificent reality With
Our Web and Mobile Solutions
Nesting Reactive Forms in Angular tutorial


Now discussing:


662 663 664 665 666