How to trigger Form Validators in Angular2 ? - GeeksforGeeks

28 Jul, 2020
In Angular 2, the best way to deal with complex forms is by using Reactive forms. Below we are going to elaborate on how to trigger form validators for login page.
In reactive forms, we use FormControl and by using this, we get access to sub-fields of form and their properties. Some of their properties are dirty, touched, untouched, pristine, valid, errors and etc. Using these properties, we can actually trigger validations according to the requirement.
Dirty: This property gets activated if the user changes the value of the sub-field from the default value.
Touched: If the user visits the subfield then the touched property value is set to “true”.
Untouched: If the user doesn’t visit the subfield then untouched property value is set to “true”. It is completely opposite to touched property.
Pristine: If the user visits the sub-field and doesn’t make any change in its value then it is set to “true”.
Valid: If the form fulfills all the form validations then it will be “true”.
Errors: Angular on client-side generates a list of errors that contain all the inbuilt errors like required, maxLength, pattern, minLength, etc.
Using the above-discussed properties, we can trigger the form validations with custom messages. Using the FormControl of every sub-field and checking its properties like touched, dirty and etc, we can validate the form according to the need.
Approach:
First, add all the form controls in the component.ts file according to the .html file.
Then add validations in component.ts file for the required subfields, Example: Required, Max Length, Pattern, etc. 
Make sure you imported everything from Validators from ‘angular@/forms’
Then add validation messages in.html file which is demonstrated in the below code.
Also, import all the dependencies from ‘angular@/material’ in the module file.
For better animations and styling angular provides Angular material which has abundant information regarding the styling. Using angular material, the form is styled. Hence, we are using tags like <mat-form-field>, <mat-error>, <mat-label> and matInput.
We can import from angular material after installing it using npm. The command for importing it is mentioned below:
ng add @angular/material
Code Implementation: Below is the implementation of the above approach.
app.module.ts:
Javascript
import { BrowserModule } from         '@angular/platform-browser';import { NgModule } from '@angular/core';import { AppComponent } from './app.component';import { BrowserAnimationsModule } from         '@angular/platform-browser/animations';import { FormsModule, ReactiveFormsModule }         from '@angular/forms';import { MatInputModule } from         '@angular/material/input';import { MatDialogModule } from         '@angular/material/dialog';import { MatFormFieldModule } from         '@angular/material/form-field';import { MatIconModule } from         '@angular/material/icon';  @NgModule({    declarations: [        AppComponent,    ],    imports: [        BrowserModule,        FormsModule,        ReactiveFormsModule,        BrowserAnimationsModule,        MatInputModule,        MatFormFieldModule,        MatIconModule,        MatDialogModule,    ],    bootstrap: [AppComponent]})export class AppModule { }
app.component.ts:
Javascript
import { Component, OnInit }         from '@angular/core';  // Importsimport { FormGroup, FormControl,     Validators } from '@angular/forms';    @Component({    selector: 'app-root',    templateUrl: './app.component.html',    styleUrls: ['./app.component.scss']})export class AppComponent implements OnInit {      constructor() { }      ngOnInit() {    }      profile = new FormGroup(        {            // Setting Validation Controls            email: new FormControl('',                 [Validators.required,                 Validators.minLength(8),                Validators.pattern(/^\w+@[a-z0-9A-Z_]+?\.[a-zA-Z]{2, 5}$/)]),                password: new FormControl('',                 [Validators.required,                 Validators.minLength(8),                Validators.pattern(/^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[@$!%*?&])[A-Za-z\d@$!%*?&]{8, }$/)])        }    );}
 app.component.html:
HTML
<div class="container-fluid">  <div class="row">    <div class="col-12 col-sm-6               col-md-6 col-lg-12">        <h4>Login to start</h4>        <form [formGroup]="profile">          <mat-form-field appearance="outline">          <mat-label>Email</mat-label>          <input type="email" matInput             placeholder="Enter Email"             formControlName="email">            <mat-error *ngIf="profile.controls['email'].errors?.pattern && profile.controls['email'].touched">            Enter a valid email with             requested pattern          </mat-error>            <mat-error *ngIf="profile.controls['email'].errors?.minLength && profile.controls['email'].touched">            Email should have minimum             8 characters          </mat-error>            <mat-error *ngIf="profile.controls['email'].errors?.required && profile.controls['email'].touched">            Email is required          </mat-error>        </mat-form-field>          <mat appearance="outline">          <mat-label>Password</mat-label>          <input matInput type="password"             placeholder="Enter password"             formControlName="password">            <mat-error *ngIf="profile.controls['password'].errors?.required && profile.controls['password'].touched">            Password is required          </mat-error>            <mat-error *ngIf="profile.controls['password'].errors?.minLength && profile.controls['password'].touched">            Enter a password with             more than 8 letters          </mat-error>            <mat-error *ngIf="profile.controls['password'].errors?.pattern && profile.controls['password'].touched">            Enter a password with             valid pattern          </mat-error>        </mat - form - field>          <button class="btn btn-primary"           [disabled]="!profile.valid">           Submit        </button>      </form>    </div>  </div></div>
Output: Hence, we have successfully triggered form validations.
AngularJS-Misc
Picked
AngularJS
Web Technologies
Web technologies Questions
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Comments
Old Comments
Top 10 Angular Libraries For Web Developers
How to use <mat-chip-list> and <mat-chip> in Angular Material ?
Angular PrimeNG Dropdown Component
Angular 10 (blur) Event
Angular 10 (focus) Event
Express.js express.Router() Function
Installation of Node.js on Linux
Top 10 Projects For Beginners To Practice HTML and CSS Skills
How to fetch data from an API in ReactJS ?
Difference between var, let and const keywords in JavaScript