Angular 10 Custom Validation Tutorial with Example
In this tutorial, we will explain to you how to create custom validation in angular 10(Angular 10 Custom Validation Tutorial with Example). here we will use the Reactive Forms module for custom validation.
Create new angular app
We will create a new angular app using the following command.
1 2 | ng new myapp cd myapp |
Import module in angular
In this step, we need to add a module into the src/app/app.module.ts file.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { FormsModule, ReactiveFormsModule } from '@angular/forms'; import { AppComponent } from './app.component'; @NgModule({ declarations: [ AppComponent ], imports: [ BrowserModule, FormsModule, ReactiveFormsModule ], providers: [], bootstrap: [AppComponent] }) export class AppModule { } |
Update view file in angular
In this step, we have created a simple form with some fields. when we click on the submit button at that time check the validation. if validation is false then will be shown an error message.
src/app/app.component.html
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | <div class="container"> <h2>Angular 10 Custom Validation Tutorial with Example</h2> <form [formGroup]="form" (ngSubmit)="submit()"> <div class="form-group"> <label for="email">Email</label> <input formControlName="email" id="email" type="email" class="form-control"> <div *ngIf="validCheck.email.touched && validCheck.email.invalid" class="alert alert-danger"> <div *ngIf="validCheck.email.errors.required">Email is required.</div> <div *ngIf="validCheck.email.errors.email">Please enter a valid email.</div> </div> </div> <div class="form-group"> <label for="password">Password</label> <input formControlName="password" id="password" type="password" class="form-control"> <div *ngIf="validCheck.password.touched && validCheck.password.invalid" class="alert alert-danger"> <div *ngIf="validCheck.password.errors.required">Password is required.</div> <div *ngIf="validCheck.password.errors.minlength">Password must be at least 6 characters</div> </div> </div> <button class="btn btn-primary" type="submit">Submit</button> </form> </div> |
Update component in angular
src/app/app.component.ts
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 | import { Component } from '@angular/core'; import { FormGroup, FormControl, Validators} from '@angular/forms'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent { form = new FormGroup({ email: new FormControl('', [Validators.required, Validators.email]), password: new FormControl('',[ Validators.required, , Validators.minLength(6)]) }); get validCheck(){ return this.form.controls; } submit(){ console.log(this.form.value); } } |
Run Our Angular Application
Now we will run our Angular application using the below command.
1 | ng serve |
Read Also
How To Install Font Awesome In Angular 10
How To Create Component In Angular 10
How To Add Class Dynamically In Angular 10