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