Nested Reactive Forms With AngularJS

Angular provides two different ways to work with forms. The first one is template-driven forms and the second is reactive forms. The working of both forms is different.  In this article, we will discuss the reactive forms and different terms related to them and examples to explain them.

But before moving to that, we will go through the plan of our tutorial.

  • What is Reactive Form
  • How to create a basic reactive form
  • What is Form Array
  • How to create Nested Form with Form array
  • How to update form validators
  • Advantages
  • Conclusion

1. What is Reactive Form    

Reactive forms are forms in which we define the basic structure of the form in the component. We need to create the form model with form groups, form controls, and form arrays in this form. We also define the different validation rules in the component class depending upon our requirement, then link this form structure to the HTML form in the template. This is different from template-based forms, where we define the logic and controls in the HTML template.

Reactive forms are used to develop a nested and complex form structure. So for developing complex forms, we can use reactive forms, so this is basic information about reactive forms, so in the next point, we will go through How to create basic reactive forms.

2. How to create basic reactive forms

To create a  basic reactive form in angularjs we need to go through below steps

Firstly we need to import the reactive form module in your project module, then we can start using a reactive form, so for importing reactive form modules we need to use the below code.

import { ReactiveFormsModule } from '@angular/forms'

After importing the reactive form module we need to add that module in imports like below.

 imports: [ReactiveFormsModule]

So this is about importing the module; now we need to create reactive forms, so for that, we are required to import some form components like form control, form builder, validators in form components like below.

import {  FormGroup, FormBuilder,  Validators, FormArray, FormControl} 

 from "@angular/forms";


Now we have to create a reactive form, so for that, we need to use the form builder method, so form builder is used to creating a form with the group of form controls.

this.userForm = this.formBuilder.group({

                           firstName:  new FormControl(“”, Validators.required),

                           lastName: new FormControl(“”, Validators.required),

                           email: new FormControl(“”, Validators.required),

                           phoneNumber:  new FormControl(“”, Validators.required),

                           address:  new FormControl(“”)

                            });

Here, we have applied the form builder method to create a form and we have initialized the form fields. Here we are setting default values for form fields. Also, we can add validators to them, so this is how you can initialize the form. So these are the changes in the TS file; after that, we need to connect this form to HTML code. Now moving to HTML code as below-

  <form [formGroup]="userForm">    </form>


In the HTML file, you can link HTML code like shown in the above code, from the group helps to bind the form with a user form. Inside this form, we need to add an input field with form ControlName as below.

         <input

              type="text"

              formControlName="firstName"             

            />

In the above code, we have added fromControlName so it works like two-way binding, as we already added the firstname field in the form builder method so for every input field we need to add a form control name. So these are some simple steps to create your basic form.       

3. What is Form Array

The FormArray allows us to add controls dynamically to the reactive forms. The controls can be a FormGroup or a FormControl or another FormArray. So we can group the form controls using two ways one is using a form and another one is using a form array.

So let’s take a scenario where we can use form arrays. We will go through the student form. In student form, we have fields like studentName, subject, so in this, the student can have multiple subjects depending upon their stream, so we need to define the subject as a form array and inside the subject, we can have subject name and chapters.

So here again, the chapter is a form array and inside the form array, we have a chapter name field. So this is a perfect example of nested forms, so at this point, we have seen what a form array is and its scenario. Now in the next point, we will see the implementation of this scenario.

4. How to create Nested Form with Form Array

In the previous points, we have seen how to build a basic form and also seen what form array is now, and we will be structured to form an array as below.

private formBuilder: FormBuilder;




 this.studentForm = this.formBuilder.group({

                                 studentName:new FormControl(“”, Validators.required),

                                 subjects:new FormArray(this.inItSubjectArray() ) });





 inItSubjectArray() {  return this.formBuilder.group({

                                subjectName: new FormControl(''),

                                chapters: new FormArray([

                                this.inItChapterArray()

                                 ]) });}




inItChapterArray(){ return this.formBuilder.group({

                              chapterName: new FormControl('')

                               });}

In the above code snippet, we initialize the basic student form and al for array field; we need to make a separate formArray group function so that we can easily understand the structure of the form array.

Now we have initialized the form array, but we need to handle extra things like we need to create a function to add this array fields dynamically, here we need to add subjects and chapters dynamically. For this, we need to create the below function.

    const control = <FormArray>this.studentForm.get('subjects');

    control.push(this.inItSubjectArray());

We need to get that control from that form. After that, we need to push our form array initialized field function to that control and then our function will be created, so this is for subject array and if you want to add an array of the array that is chapter array, then we need to pass the index of the subject array to chapter array like below

const control=<FormArray>this.studentForm.get('subjects').

                        controls[subjectIndex].get(‘chapters’);

   

 control.push(this.inItChapterArray());

5. How to update form validators

At this point, we will learn how to update the validators value of any input field.

If we want to change the validators, it means in some scenarios, we want some field mandatory and after any condition happens, we need those fields optional, so for these purposes, we need to update validators. 

this.studentForm.get(‘firstName’).setValidators([Validators.required]);

this.studentForm.get(‘firstName’).updateValueAndValidity();



this.studentForm.get(‘firstName’).clearValidators();

this.studentForm.get(‘firstName’).updateValueAndValidity();

Here you can see the firstName control name, at the time of form creation if we added any validators then to remove the validator we can use setValidators method and after that to apply those changes we need to use updateValueAndValidity method and if we wanted to clear all the validations applied to any control then we can use clearValidators methods and same to apply those changes we need to use updateValueAndValidators method.

So this is how you can update validators in your form.

6. Advantages

  • Flexible to use.
  • Easily handles complex scenarios.
  • No data binding is required.
  • Reusable

Hire Dedicated AngularJS Developers

coma

Conclusion

In this tutorial, we learned about What are reactive forms, and then we went through formArrays and illustrated basic form with form array through implementation also we have seen How to update validators in reactive forms and in the last, we went through the advantages of reactive forms. 

 

Rishikesh Devkate

Full-stack developer

Rishikesh is a Full-stack developer with 3+ years of experience. He has experience in web technologies like AngularJS, ReactJS. His expertise is building Python integrated web applications, creating REST APIs with well-designed, testable and efficient and optimized code. He loves to learn new technologies.

Get in touch for a detailed discussion.

Hear From Our 100+ Customers
coma

Mindbowser helped us build an awesome iOS app to bring balance to people’s lives.

author
ADDIE WOOTTEN
CEO, SMILINGMIND
coma

We had very close go live timeline and MindBowser team got us live a month before.

author
Shaz Khan
CEO, BuyNow WorldWide
coma

They were a very responsive team! Extremely easy to communicate and work with!

author
Kristen M.
Founder & CEO, TotTech
coma

We’ve had very little-to-no hiccups at all—it’s been a really pleasurable experience.

author
Chacko Thomas
Co-Founder, TEAM8s
coma

Mindbowser is one of the reasons that our app is successful. These guys have been a great team.

author
Dave Dubier
Founder & CEO, MangoMirror
coma

Mindbowser was very helpful with explaining the development process and started quickly on the project.

author
Hieu Le
Executive Director of Product Development, Innovation Lab
coma

The greatest benefit we got from Mindbowser is the expertise. Their team has developed apps in all different industries with all types of social proofs.

author
Alex Gobel
Co-Founder, Vesica
coma

Mindbowser is professional, efficient and thorough. 

author
MacKenzie R
Consultant at XPRIZE
coma

Very committed, they create beautiful apps and are very benevolent. They have brilliant Ideas.

author
Laurie Mastrogiani
Founder, S.T.A.R.S of Wellness
coma

MindBowser was great; they listened to us a lot and helped us hone in on the actual idea of the app.” “They had put together fantastic wireframes for us.

author
Bennet Gillogly
Co-Founder, Flat Earth
coma

They're very tech-savvy, yet humble.

author
Uma Nidmarty
CEO, GS Advisorate, Inc.
coma

Ayush was responsive and paired me with the best team member possible, to complete my complex vision and project. Could not be happier.

author
Katie Taylor
Founder, Child Life On Call
coma

As a founder of a budding start-up, it has been a great experience working with Mindbower Inc under Ayush's leadership for our online digital platform design and development activity.

author
Radhika Kotwal
Founder of Courtyardly
coma

The team from Mindbowser stayed on task, asked the right questions, and completed the required tasks in a timely fashion! Strong work team!

author
Michael Wright
Chief Executive Officer, SDOH2Health LLC
coma

They are focused, patient and; they are innovative. Please give them a shot if you are looking for someone to partner with, you can go along with Mindbowser.

author
David Cain
CEO, thirty2give
coma

We are a small non-profit on a budget and they were able to deliver their work at our prescribed budgets. Their team always met their objectives and I'm very happy with the end result. Thank you, Mindbowser team!!

author
Bart Mendel
Founder, Mindworks