AIMDek Technologies AIMDek Technologies AIMDek Technologies AIMDek Technologies
  • SERVICES
    • Enterprise Applications
      • Enterprise Portals
      • Web Application
      • E-Commerce Portal Development
    • Liferay
    • Integration Services
    • UX UI Design
    • Mobile App Development Service
    • Consulting Services
    • Migrations and Upgrades
    • QA & Testing
    • Cloud Infrastructure
  • SOLUTIONS
    • Healthcare IT
      • EHR Software
      • HMS Software
      • Patient Portal
      • Healthcare Mobility
    • Mobility Solutions
    • PLM Solutions
      • ARAS PLM
      • Oracle PLM
    • Robotic Process Automation
    • Portal Solutions
      • Intranet Solution
      • Partner Portal
      • Collaboration Portal
    • ECM Solution
    • ERP Solutions
  • PARTNERSHIP
    • Microsoft
    • Salesforce
  • RESOURCES
    • Blogs
    • Webinars
    • Case Studies
  • COMPANY
    • About Us
    • Industries
    • Our Infrastructure
    • Our culture
    • Careers
  • CONTACT US
AIMDek Technologies AIMDek Technologies
  • SERVICES
    • Enterprise Applications
      • Enterprise Portals
      • Web Application
      • E-Commerce Portal Development
    • Liferay
    • Integration Services
    • UX UI Design
    • Mobile App Development Service
    • Consulting Services
    • Migrations and Upgrades
    • QA & Testing
    • Cloud Infrastructure
  • SOLUTIONS
    • Healthcare IT
      • EHR Software
      • HMS Software
      • Patient Portal
      • Healthcare Mobility
    • Mobility Solutions
    • PLM Solutions
      • ARAS PLM
      • Oracle PLM
    • Robotic Process Automation
    • Portal Solutions
      • Intranet Solution
      • Partner Portal
      • Collaboration Portal
    • ECM Solution
    • ERP Solutions
  • PARTNERSHIP
    • Microsoft
    • Salesforce
  • RESOURCES
    • Blogs
    • Webinars
    • Case Studies
  • COMPANY
    • About Us
    • Industries
    • Our Infrastructure
    • Our culture
    • Careers
  • CONTACT US
Jun 12
Creating Custom Validators In Reactive Forms Using Angular 6

Creating Custom Validators In Reactive Forms Using Angular 6

  • 12/06/2018
  • Juhil Kamothi

Table of Contents

  • Step 1: Create a project and add material library
  • Step 2: Create component called reactiveform.component.ts
  • Step 3: Create a simple form with a model using Angular material and @angular/form
  • Step 4: Generate custom validator for password
Post Views: 1,353

Share On : [feather_share show="twitter, facebook,linkedin" hide="reddit, pinterest, google_plus, tumblr, mail"]

Validating user input for accuracy and completeness helps in improving overall data quality. Angular and its form package turns up with a Validators class that has some beneficial validators like minLength, maxLength, required and pattern. However, occasionally if we wish to validate different fields under more complex/custom rules we can make optimum use of custom validator.

Defining custom validators while using Reactive Forms in Angular comes very easy as they are more of regular functions. One can conveniently generate function for custom validators within the component file in case the validator is not supposed to be used elsewhere. But, herein we will be assuming the re-use and create respective validators in separate files.

 

Consider the following example:

Step 1: Create a project and add material library

Ng new ng6material

Cd ng6mateial

Ng add @angular/material

Ng serve

Step 2: Create component called reactiveform.component.ts

Ng generate component reactiveform

Configure route of reactiveform.component.ts so that we can navigate it at http://localhost:4200/reactive-form

Step 3: Create a simple form with a model using Angular material and @angular/form

Reactiveform.component.ts

import { Component, OnInit } from '@angular/core';
import{FormBuilder,FormGroup} from '@angular/forms';

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

export class ReactiveformComponent implements OnInit {
 complexForm : FormGroup;
 constructor(fb:FormBuilder) {
   this.complexForm = fb.group({
     userName:””,
     email:””,
     passWord:””,
   })
 }
 ngOnInit() {}
 submitForm(value: any){
   console.log(value);
 }
}

Reactiveform.component.html

<div class="login-wrapper">
<mat-card>
 <div style="text-align:center;">
   <img src="http://www.aimdek.com/wp-content/uploads/2016/12/height_70px.png">
 </div>
 <form class="example-form" [formGroup]="complexForm" (ngSubmit)="submitForm(complexForm.value)">
   <mat-form-field>
     <input matInput placeholder="Username" [formControl]="complexForm.controls['userName']" />
   </mat-form-field>
   <br>
   <mat-form-field>
       <input matInput placeholder="email" [formControl]="complexForm.controls['email']" />
   </mat-form-field>
     <br>
   <mat-form-field >
     <input matInput placeholder="Password"  [formControl]="complexForm.controls['passWord']" />
   </mat-form-field>
   <br>
   <button type="submit" mat-raised-button color="primary" align="right">Login</button>
 </form>
</mat-card>
</div>

This will generate the simple model driven reactive form without in build and custom validation.

reactive-1

Now we will add in build validation first and then will go through the custom validation.

 

For validation we need to import Validators from the @angular/forms and have to add that particular Validators in each field of model.

 

We are going to use Validators.required and Valodators.email in this demo.

 

Following snippet shows the usage of build in Validators.

Reactiveform.component.ts

import { Component, OnInit } from '@angular/core';
import{FormBuilder,FormGroup,Validators,AbstractControl} from '@angular/forms';

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

export class ReactiveformComponent implements OnInit {
 complexForm : FormGroup;
 constructor(fb:FormBuilder) {
   this.complexForm = fb.group({
     userName:[null,Validators.required],
     email:[null,[Validators.required,Validators.email]],
     passWord:[null,[Validators.required]],
   })
 }
 ngOnInit() {}
 submitForm(value: any){
   console.log(value);
 }
}

Reactiveform.component.html

<div class="login-wrapper">
<mat-card>
 <div style="text-align:center;">
   <img src="http://www.aimdek.com/wp-content/uploads/2016/12/height_70px.png">
 </div>
 <form class="example-form" [formGroup]="complexForm" (ngSubmit)="submitForm(complexForm.value)">
   <mat-form-field [ngClass]="{'has-error':!complexForm.controls['userName'].valid}">
     <input matInput placeholder="Username" [formControl]="complexForm.controls['userName']" />
   </mat-form-field>
   <br>
   <mat-form-field [ngClass]="{'has-error':!complexForm.controls['email'].valid}">
       <input matInput placeholder="email" [formControl]="complexForm.controls['email']" />
   </mat-form-field>
     <br>
   <mat-form-field [ngClass]="{'has-error':!complexForm.controls['passWord'].valid}">
     <input matInput placeholder="Password"  [formControl]="complexForm.controls['passWord']" />
   </mat-form-field>
   <br>
   <button type="submit" mat-raised-button color="primary" align="right" [disabled]="!complexForm.valid">Login</button>
 </form>
</mat-card>
</div>

In this we are getting observable of Validator in html template and from that we can get boolean value whether the field is valid or not

 

In above case are getting boolead of valid state from the complexForm object of formGroup which we have created in reactiveform.component.ts and check valid state as following:-

 

complexForm.valid
complexForm.controls['email'].valid
reactive-2

Step 4: Generate custom validator for password

For this we have to create password.validator.ts manually because angular CLI is not providing this in it’s package.

 

In this file we have to import abstractValidator which is also part of @angular/form package.

 

Following is the snnipet code of password.validator.ts

 

import { AbstractControl,Validator } from '@angular/forms';
export function ValidatePassword(control: AbstractControl) {
 if (!/^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]{4,20}/.test(control.value)) {
   return { validPassword: true };
 }
 return null;
 }

This code will return boolean if password is valid and return NULL if it is not

 

Now import this validator in reactiveform.component.ts as following.

 

import { ValidatePassword } from '../validators/password.validator';

 

Use the ValidatePassword function along with Validator.required in password field of form model as following:

 

passWord:[null,[Validators.required,ValidatePassword]],

 

Now we have to use this in reactiveform.component.html inorder to display custom error message for password as following:-

<div class="error"
       *ngIf="complexForm.get('passWord').errors &&
             complexForm.get('passWord').dirty &&
             complexForm.get('passWord').errors.validPassword">
         Password must contain letter and digit.
</div>
reactive-3

And there you have it: how to create a custom validator for Angular Reactive Forms. We at AIMDek cater future-proof front-end development services. Get in touch with us at hello@aimdek.com for any queries.

Related

Spread the love
    

Leave a reply

Your email address will not be published. Required fields are marked *

Subscribe for more interesting blogs


    AIMDek Logo
    canda flag icon

    CANADA
    ONTARIO

      +1 437-999-0755

    usa flag icon

    USA
    TEXAS

      +1 956-506-1010

    india flag logo

    INDIA
    AHMEDABAD

      +91 9879856334

    QUICK LINKS:
    About Us
    Service
    Solutions
    Case Study
    Our Team
    Contact Us

    CONNECT WITH US:
    marketing@aimdek.com

      (437)-999-0755

    linkedin icon
    facebook icon
    tweeter icon
    skype icon
    youtube icon
    instagram icon

    REVIEWED ON




    REVIEWED ON




    PARTNERS

    ISO

    CERTIFIED
    COMPANY

    @ 2021 AIMDek Technologies Private Limited. All rights reserved