Post
Ask Question

Angular 4 - Reactive Form

A form is a container of your controls or we can say, it is used for gathering the data from the user; the user provides values to the controls.

Angular provides 2 types of forms which can be used to declare and define controls at the form level.

  • Template driven
  • Reactive Form

We have already discussed Template driven forms. You can find the article here.

The purpose of the Reactive form is same as Template driven form. The only difference is that we create controls at run time. There are a few concepts which we need to take care of in case of Reactive forms.

Form Group

Form group is a class which is used to create a form model for your application. It is a collection of Form Control or we can say that it contains form control which will be rendered on the browser.

It is available in - @angular/forms

Form Control

Form controls are basically controls (html , etc.) which will bind to the form group and get rendered on the browser. Or we can say they are the smallest units of a template just like a leaf of a tree.

To understand how form group & form controls work, let's create a simple application using Reactive Form.

Create a component and name it anything. Here, we name it Contact. Use "ng g c componentName" to create the new component.

Add the following code to contact.component.ts and add form group & form control directives available in @angular/forms.

  1. countries = ['USA', 'Germany', 'Italy', 'France'];  
  2. requestTypes = ['Claim', 'Feedback', 'Help Request'];  
  3. contactForm: FormGroup;  
  4. constructor() {  
  5.     this.contactForm = this.createFormGroup();  
  6. }  
  7. createFormGroup() {  
  8.     returnnewFormGroup({  
  9.         personalData: newFormGroup({  
  10.             email: newFormControl(),  
  11.             mobile: newFormControl(),  
  12.             country: newFormControl()  
  13.         }),  
  14.         requestType: newFormControl(),  
  15.         text: newFormControl()  
  16.     });  
  17. }  
Add the following code in contact.component.html.
  1. <form [formGroup]="contactForm" (ngSubmit)="onSubmit()" novalidate>  
  2.     <divformGroupName="personalData"novalidate>  
  3.         <inputformControlName="email">  
  4.             <inputformControlName="mobile">  
  5.                 <selectformControlName="country">  
  6.                     <option *ngFor="let country of countries" [value]="country">{{country}}</option> </select> </div>  
  7.                  <selectformControlName="requestType">  
  8.             <option *ngFor="let requestType of requestTypes" [value]="requestType">{{requestType}}</option> </select>  
  9.           <inputformControlName="text">  
  10.        <buttontype="submit" [disabled]="contactForm.pristine">Save</button>  
  11.     <buttontype="reset" (click)="revert()" [disabled]="contactForm.pristine">Revert</button>  
  12. </form>  

We are binding [formGroup] with the contactform defined in code behind. Similarly, we are binding the input tag with the formControlName.formGroupName is the name of form group which we have created.

Import Reactive form module in app.module.ts.

  1. import { ReactiveFormsModule } from '@angular/forms';  
Add ReactiveFormsModule in NgModule Import.
  1. imports: [  
  2.    ReactiveFormsModule,  
  3. ],  
Add the below code for Submit button event.
  1. onSubmit() {  
  2.    console.log(this.contactForm.value.personalData.email);  
  3. }  

Now, run the application using ng serve and load your component. You will find your control rendered on the browser.

Make changes in the email control rendered on the browser and click on the Submit button. Check what value gets logged on the browser. I have entered [email protected].

Angular

So my values get logged on the browser. This is how you can change any of the value and use contactform.value to get your values.

Hope this article will help people who just have started using Angular and are facing some challenges in developing Reactive Form.