googleads
Building Nested Reactive forms In Angular | Hire Angular Developers
preloder
Angular Web Development

Building Nested Reactive form In Angular 4

 

Reactive Forms

One of the primary reason 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 Reactive form is that we can easily create tree structure 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 more 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.

 

Let’s see, How we can 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 called formcontrol, formgroup, and formarray are used to build the reactive form in ngoninit.

Let’s look into these 3 Blocks,

[Related: Angular 4 Reactive Forms : Building and Validating Forms ]

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.

FormArray:

Form array will contain the array of formcontrol objects. It can have the array of objects. Same like 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

FormControl:

The primary use of formcontrol is, We could easily track the changes that occurs 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 blur event.
An example syntax for the formcontrol is shown below,

 

 

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

 

FormBuilder:

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 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 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 address, and also each address can have multiple mobile number.

The code snippet for initializing form group, form array is given below,

 

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

 

I have added the live preview for building nested reactive form as you can see it using the below link,
https://stackblitz.com/edit/angular-bkvstd?embed=1&file=src/app/app.component.html

Want to explore more about technologies and web development? You are at the right place to explore both present and future technologies, Our enthusiastic developers at Agira Technologies excel in evolving technologies up-to-date, stay updated with us for more technical updates and blogs. Meanwhile, Don’t forget to post your interest and impressions in the comment section.
If you are looking for angular developers for your project ? Hire Angular developer from Agira Technologies to build best web-apps at affordable rates. Our dedicated Angular developers are well-versed with all the updates and ensure top-notch web applications development to meet your business requirements. For any queries reach us via info@agiratech.com

The following two tabs change content below.

Preetha Ravi

A Young Junior Software Developer with 1 year of experience in Web Development arena. Holding well grounded experience in Angular, Ruby, Ruby On Rails.

Leave a Reply

Your email address will not be published. Required fields are marked *

[contact-form-7 id="120788" title="Web Page Form"]

Schedule Your Call