FormBuilder In Reactive Forms

The Code Points
0

FormBuilder In Reactive Forms

The Code Points 0

In this article, we will learn about the how to use the FormBuilder to create a Form and add validation criteria. The Angular FormBuilder API simplifies the creation of reactive forms. FormGroups, nested FormGroups, FormArrays, and FormControls are all simple to add. It also enables us to configure the Validation rules for each control.

We recommend learning how to develop reactive forms if you're new to Reactive Forms.

What is FormBuilder

The FormBuilder is an Angular utility API for creating forms. It provides shortcuts for creating FormControl, FormGroup, and FormArray instances. It cuts down on the amount of code needed to create complex forms.

How to use FormBuilder

Import & inject FormBuilder API

To use the FormBuilder, we must first import it in our component.

  1. import { FormBuilder } from '@angular/forms'

 Following that, we must inject it into our component class. 
  1. constructor(private formBuilder: FormBuilder) {
  2. }

Finally, construct the FormModel using the group, array, and control methods.

FormGroup

To create the Form Group, we use the group method. As a key-value pair, we supply the group method a list of Form Controls, a Form Array, or another Form Group. The name of the FormControl, FormGroup, or FormArray is the key. The control's configuration is the value.

We've added six form controls to the example below. The initial value, which we set to empty string, is the first argument to the FormControl.
  1. this.contactForm = this.formBuilder.group({
  2.   firstname: [''],
  3.   lastname: [''],
  4.   email: [''],
  5.   gender: [''],
  6.   isMarried: [''],
  7.   country: [''],
  8. });

Nested FormGroup

It's exactly as simple to make a Nested FormGroup. As demonstrated below, use the formbuilder.group method.
  1. this.contactForm = this.formBuilder.group({
  2.   firstname: [''],
  3.   lastname: [''],
  4.   email: [''],
  5.   gender: [''],
  6.   isMarried: [''],
  7.   country: [''],
  8.   address: this.formBuilder.group({
  9.     city: [''],
  10.     street: [''],
  11.     pincode: ['']
  12.   })
  13. })

Validations

The list of sync validators is the FormControl second argument. The example below demonstrates how to add validators.
  1. this.contactForm = this.formBuilder.group({
  2.   firstname: ['', [Validators.required, Validators.minLength(10)]],
  3.   lastname: ['', [Validators.required, Validators.maxLength(15), Validators.pattern("^[a-zA-Z]+$")]],
  4.   email: ['', [Validators.required, Validators.email]],
  5.   gender: ['', [Validators.required]],
  6.   isMarried: ['', [Validators.required]],
  7.   country: ['', [Validators.required]],
  8.   address: this.formBuilder.group({
  9.     city: ['', [Validators.required]],
  10.     street: ['', [Validators.required]],
  11.     pincode: ['', [Validators.required]],
  12.   })
  13. });

Example of FormBuilder

The Angular Reactive Forms article taught us how to create reactive forms.

Open the app.component.ts file and add the following code:
  1. import { Component, ViewChild, ElementRef } from '@angular/core';
  2. import { FormGroup, FormControl, Validators } from '@angular/forms'
  3. import { FormBuilder } from '@angular/forms'
  4. import { groupBy } from 'rxjs/internal/operators/groupBy';
  5.  
  6.  
  7. @Component({
  8.   selector: 'app-root',
  9.   templateUrl: './app.component.html',
  10.   styleUrls: ['./app.component.css']
  11. })
  12. export class AppComponent {
  13.  
  14.   title = 'Angular Reactive forms';
  15.  
  16.   contactForm;
  17.  
  18.   constructor(private formBuilder: FormBuilder) {
  19.  
  20.  
  21.  
  22.     // this.contactForm = this.formBuilder.group({
  23.     //   firstname: [''],
  24.     //   lastname: [''],
  25.     //   email: [''],
  26.     //   gender: [''],
  27.     //   isMarried: [''],
  28.     //   country: [''],
  29.     // });
  30.  
  31.     // this.contactForm = this.formBuilder.group({
  32.     //   firstname: [''],
  33.     //   lastname: [''],
  34.     //   email: [''],
  35.     //   gender: [''],
  36.     //   isMarried: [''],
  37.     //   country: [''],
  38.     //   address: this.formBuilder.group({
  39.     //     city: [''],
  40.     //     street: [''],
  41.     //     pincode: ['']
  42.     //   })
  43.     // });
  44.  
  45.     this.contactForm = this.formBuilder.group({
  46.       firstname: ['', [Validators.required, Validators.minLength(10)]],
  47.       lastname: ['', [Validators.required, Validators.maxLength(15), Validators.pattern("^[a-zA-Z]+$")]],
  48.       email: ['', [Validators.required, Validators.email]],
  49.       gender: ['', [Validators.required]],
  50.       isMarried: ['', [Validators.required]],
  51.       country: ['', [Validators.required]],
  52.       address: this.formBuilder.group({
  53.         city: ['', [Validators.required]],
  54.         street: ['', [Validators.required]],
  55.         pincode: ['', [Validators.required]],
  56.       })
  57.     });
  58.   }
  59.  
  60.  
  61.   get firstname() {
  62.     return this.contactForm.get('firstname');
  63.   }
  64.  
  65.   get lastname() {
  66.     return this.contactForm.get('lastname');
  67.   }
  68.  
  69.   get email() {
  70.     return this.contactForm.get('email');
  71.   }
  72.  
  73.   get gender() {
  74.     return this.contactForm.get('gender');
  75.   }
  76.  
  77.   get isMarried() {
  78.     return this.contactForm.get('isMarried');
  79.   }
  80.  
  81.   get country() {
  82.     return this.contactForm.get('country');
  83.   }
  84.  
  85.   get city() {
  86.     return this.contactForm.get("address").get('city');
  87.   }
  88.  
  89.   get street() {
  90.     return this.contactForm.get("address").get('street');
  91.   }
  92.  
  93.   get pincode() {
  94.     return this.contactForm.get("address").get('pincode');
  95.   }
  96.  
  97.  
  98.   countryList: country[] = [
  99.     new country("1", "India"),
  100.     new country('2', 'USA'),
  101.     new country('3', 'England')
  102.   ];
  103.  
  104.   onSubmit() {
  105.     console.log(this.contactForm.value);
  106.   }
  107.  
  108. }
  109.  
  110.  
  111. export class country {
  112.   id: string;
  113.   name: string;
  114.  
  115.   constructor(id: string, name: string) {
  116.     this.id = id;
  117.     this.name = name;
  118.   }
  119. }

Now, open the app.component.html file and add the following code:
  1. <div style="float: left; width:50%;">
  2.  
  3. <form [formGroup]="contactForm" (ngSubmit)="onSubmit()" novalidate>
  4.  
  5.   <p>
  6.     <label for="firstname">First Name </label>
  7.     <input type="text" id="firstname" name="firstname" formControlName="firstname">
  8.   </p>
  9.  
  10.   <div
  11.     *ngIf="!firstname?.valid && (firstname?.dirty ||firstname?.touched)">
  12.     <div [hidden]="!firstname.errors.required">
  13.       First Name is required
  14.     </div>
  15.     <div [hidden]="!firstname.errors.minlength">
  16.       Min Length is 10
  17.     </div>
  18.   </div>
  19.  
  20.   <p>
  21.     <label for="lastname">Last Name </label>
  22.     <input type="text" id="lastname" name="lastname" formControlName="lastname">
  23.   </p>
  24.  
  25.   <div *ngIf="!lastname.valid && (lastname.dirty ||lastname.touched)">
  26.     <div [hidden]="!lastname.errors.pattern">
  27.       Only characters are allowed
  28.     </div>
  29.     <div [hidden]="!lastname.errors.maxLength">
  30.       Max length allowed is {{lastname.errors.maxlength?.requiredLength}} 
  31.     </div>
  32.     <div [hidden]="!lastname.errors.required">
  33.       Last Name is required
  34.     </div>
  35.   </div>
  36.  
  37.   <p>
  38.     <label for="email">Email </label>
  39.     <input type="text" id="email" name="email" formControlName="email">
  40.   </p>
  41.   <div *ngIf="!email.valid && (email.dirty ||email.touched)">
  42.     <div [hidden]="!email.errors.required">
  43.       email is required
  44.     </div>
  45.     <div [hidden]="!email.errors.email">
  46.       invalid email id
  47.     </div>
  48.   </div>
  49.  
  50.  
  51.   <p>
  52.     <label for="gender">Geneder </label>
  53.     <input type="radio" value="male" id="gender" name="gender" formControlName="gender"> Male
  54.     <input type="radio" value="female" id="gender" name="gender" formControlName="gender"> Female
  55.   </p>
  56.   <div *ngIf="!gender.valid && (gender.dirty ||gender.touched)">
  57.     <div [hidden]="!gender.errors.required">
  58.       gender is required
  59.     </div>
  60.   </div>
  61.  
  62.   <p>
  63.     <label for="isMarried">Married </label>
  64.     <input type="checkbox" id="isMarried" name="isMarried" formControlName="isMarried">
  65.   </p>
  66.   <div *ngIf="!isMarried.valid && (isMarried.dirty ||isMarried.touched)">
  67.     <div [hidden]="!isMarried.errors.required">
  68.       isMarried is required
  69.     </div>
  70.   </div>
  71.  
  72.  
  73.   <p>
  74.     <label for="country">country </label>
  75.     <select id="country" name="country" formControlName="country">
  76.       <option [ngValue]="c.id" *ngFor="let c of countryList">
  77.         {{c.name}}
  78.       </option>
  79.     </select>
  80.   </p>
  81.   <div *ngIf="!country.valid && (country.dirty ||country.touched)">
  82.     <div [hidden]="!country.errors.required">
  83.       country is required
  84.     </div>
  85.   </div>
  86.  
  87.   <div formGroupName="address">
  88.  
  89.     <div class="form-group">
  90.       <label for="city">City</label>
  91.       <input type="text" class="form-control" name="city" formControlName="city">
  92.     </div>
  93.     <div *ngIf="!city.valid && (city.dirty ||city.touched)">
  94.       <div [hidden]="!city.errors.required">
  95.         city is required
  96.       </div>
  97.     </div>
  98.  
  99.  
  100.     <div class="form-group">
  101.       <label for="street">Street</label>
  102.       <input type="text" class="form-control" name="street" formControlName="street">
  103.     </div>
  104.     <div *ngIf="!street.valid && (street.dirty ||street.touched)">
  105.       <div [hidden]="!street.errors.required">
  106.         street is required
  107.       </div>
  108.     </div>
  109.  
  110.     <div class="form-group">
  111.       <label for="pincode">Pin Code</label>
  112.       <input type="text" class="form-control" name="pincode" formControlName="pincode">
  113.     </div>
  114.     <div *ngIf="!pincode.valid && (pincode.dirty ||pincode.touched)">
  115.       <div [hidden]="!pincode.errors.required">
  116.         pincode is required
  117.       </div>
  118.     </div>
  119.  
  120.   </div> 
  121.  
  122.   <p>
  123.     <button type="submit" [disabled]="!contactForm.valid">Submit</button>
  124.   </p>
  125.  
  126. </form>
  127.  
  128. </div>
  129.  
  130. <div style="float: right; width:50%;">
  131.  
  132.   <h3>Form Status</h3>
  133.   <b>valid : </b>{{contactForm.valid}}
  134.   <b>invalid : </b>{{contactForm.invalid}}
  135.   <b>touched : </b>{{contactForm.touched}}
  136.   <b>untouched : </b>{{contactForm.untouched}}
  137.   <b>pristine : </b>{{contactForm.pristine}}
  138.   <b>dirty : </b>{{contactForm.dirty}}
  139.   <b>disabled : </b>{{contactForm.disabled}}
  140.   <b>enabled : </b>{{contactForm.enabled}}
  141.  
  142.   <h3>Form Value</h3>
  143.   {{contactForm.value |json}}
  144.  
  145. </div>

Conclusion

The FormBuilder API makes it easy to interact with Angular reactive forms. To create our    FormModel, we can use the group, array, and control methods. FormBuilder cuts down on the amount of code needed to create sophisticated forms.

I hope this article helps you and you will like it.👍

If you have any doubt or confusion then free to ask in comment section.

Tags:

Post a Comment

Previous Post Next Post