Angular 8 - Form Vapdation

Form vapdation is an important part of web apppcation. It is used to vapdate whether the user input is in correct format or not.

RequiredVapdator

Let’s perform simple required field vapdation in angular.

Open command prompt and go to reactive-form-app.

cd /go/to/reactive-form-app

Replace the below code in test.component.ts file.

import { Component, OnInit } from  @angular/core ;

//import vapdator and FormBuilder
import { FormGroup, FormControl, Vapdators, FormBuilder } from  @angular/forms ;

@Component({
   selector:  app-test ,
   templateUrl:  ./test.component.html ,
   styleUrls: [ ./test.component.css ]
})

export class TestComponent implements OnInit {
   //Create FormGroup
   requiredForm: FormGroup;
   constructor(private fb: FormBuilder) {
      this.myForm();
   }

   //Create required field vapdator for name
   myForm() {
      this.requiredForm = this.fb.group({
      name: [  , Vapdators.required ]
      });
   }
   ngOnInit()
   {

   }
}

Here,

We have used form builder to handle all the vapdation. Constructor is used to create a form with the vapdation rules.

Add the below code inside test.component.html file.

<span>
   <h2>
     Required Field vapdation
   </h2>
   <form [formGroup]="requiredForm" novapdate>
         <span class="form-group">
           <label class="center-block">Name:
             <input class="form-control" formControlName="name">
           </label>
         </span>
         <span *ngIf="requiredForm.controls[ name ].invapd && requiredForm.controls[ name ].touched" class="alert alert-danger">
             <span *ngIf="requiredForm.controls[ name ].errors.required">
             Name is required.
           </span>
         </span>
   </form>
 <p>Form value: {{ requiredForm.value | json }}</p>
 <p>Form status: {{ requiredForm.status | json }}</p>
 </span>

Here,

requiredForm is called global form group object. It is a parent element. Form controls are childrens of requiredForm.

Conditional statement is used to check, if a user has touched the input field but not enter the values then, it displays the error message.

Finally, start your apppcation (if not done already) using the below command −

ng serve

Now run your apppcation and put focus on text box. Then, it will use show Name is required as shown below −

If you enter text in the textbox, then it is vapdated and the output is shown below −

PatternVapdator

PatternVapdator is used to vapdate regex pattern. Let’s perform simple email vapdation.

Open command prompt and to reactive-form-app.

cd /go/to/reactive-form-app

Replace below code in test.component.ts file −

import { Component, OnInit } from  @angular/core ;

import { FormGroup, FormControl, Vapdators, FormBuilder } from 
 @angular/forms ;

@Component({
   selector:  app-test ,
   templateUrl:  ./test.component.html ,
   styleUrls: [ ./test.component.css ]
})

export class TestComponent implements OnInit {
   requiredForm: FormGroup;
   constructor(private fb: FormBuilder) {
      this.myForm();
   }

   myForm() {
      this.requiredForm = this.fb.group({
      email: [  , [Vapdators.required, 
         Vapdators.pattern("^[a-z0-9._%+-]+@[a-z0-9.-]+.[a-z]{2,4}$")] ]
      });
   }

   ngOnInit()
   {

   }
}

Here,

Added email pattern vapdator inside the Vapdator.

Update below code in test.component.html file −

<span>
   <h2>
   Pattern vapdation
   </h2>
   <form [formGroup]="requiredForm" novapdate>
   <span class="form-group">
      <label class="center-block">Email:
      <input class="form-control" formControlName="email">
      </label>
   </span>
   <span *ngIf="requiredForm.controls[ email ].invapd && requiredForm.controls[ email ].touched" class="alert alert-danger">
       <span *ngIf="requiredForm.controls[ email ].errors.required">
      Email is required.
      </span>
   </span>
   </form>
   <p>Form value: {{ requiredForm.value | json }}</p>
   <p>Form status: {{ requiredForm.status | json }}</p>
</span>

Here, we have created the email control and called email vapdator.

Run your apppcation and you could see the below result −

Similarly, you can try yourself to perform other types of vapdators.