Steps to implement Validators
Step 1: Set up a new Angular application
ng new my-app
cd validators-example
Folder Structure
Dependencies
"dependencies": {
"@angular/animations": "^17.3.0",
"@angular/common": "^17.3.0",
"@angular/compiler": "^17.3.0",
"@angular/core": "^17.3.0",
"@angular/forms": "^17.3.0",
"@angular/platform-browser": "^17.3.0",
"@angular/platform-browser-dynamic": "^17.3.0",
"@angular/platform-server": "^17.3.0",
"@angular/router": "^17.3.0",
"@angular/ssr": "^17.3.3",
"express": "^4.18.2",
"rxjs": "~7.8.0",
"tslib": "^2.3.0",
"zone.js": "~0.14.3"
}
Example
<!-- app.component.html -->
<form [formGroup]="userForm" (ngSubmit)="onSubmit()">
<div>
<label for="name">Name</label>
<input id="name" type="text" formControlName="name" />
<div *ngIf="name?.invalid && (name?.dirty || name?.touched)">
<div *ngIf="name?.errors?.['required']">Name is required.</div>
<div *ngIf="name?.errors?.['minlength']">
Name must be at least 3 characters long.
</div>
<div *ngIf="name?.errors?.['maxlength']">
Name cannot exceed 20 characters.
</div>
</div>
</div>
<div>
<label for="email">Email</label>
<input id="email" type="email" formControlName="email" />
<div *ngIf="email?.invalid && (email?.dirty || email?.touched)">
<div *ngIf="email?.errors?.['required']">Email is required.</div>
<div *ngIf="email?.errors?.['email']">Invalid email format.</div>
</div>
</div>
<div>
<label for="password">Password</label>
<input id="password" type="password" formControlName="password" />
<div *ngIf="password?.invalid && (password?.dirty || password?.touched)">
<div *ngIf="password?.errors?.['required']">Password is required.</div>
<div *ngIf="password?.errors?.['pattern']">
Password must contain at least one uppercase letter, one lowercase
letter, one digit, and one special character.
</div>
</div>
</div>
<div>
<label for="age">Age</label>
<input id="age" type="number" formControlName="age" />
<div *ngIf="age?.invalid && (age?.dirty || age?.touched)">
<div *ngIf="age?.errors?.['required']">Age is required.</div>
<div *ngIf="age?.errors?.['min']">Age must be at least 18.</div>
<div *ngIf="age?.errors?.['max']">Age cannot exceed 65.</div>
</div>
</div>
<button type="submit" [disabled]="userForm.invalid">Submit</button>
</form>
//app.component.ts
import { NgIf } from '@angular/common';
import { Component, inject } from '@angular/core';
import {
AbstractControl,
FormBuilder,
FormControl,
FormGroup,
FormsModule,
ReactiveFormsModule,
ValidationErrors,
ValidatorFn,
Validators,
} from '@angular/forms';
@Component({
selector: 'app-root',
standalone: true,
imports: [NgIf, ReactiveFormsModule, FormsModule],
templateUrl: './app.component.html',
styleUrl: './app.component.css',
})
export class AppComponent {
userForm: FormGroup;
constructor(private fb: FormBuilder) {
this.userForm = this.fb.group({
name: [
'',
[
Validators.required,
Validators.minLength(3),
Validators.maxLength(20),
],
],
email: ['', [Validators.required, Validators.email]],
password: [
'',
[
Validators.required,
Validators.pattern(
'^(?=.*[a-z])(?=.*[A-Z])(?=.*\\d)
(?=.*[$@$!%*?&])[A-Za-z\\d$@$!%*?&]{8,}'
),
],
],
age: ['', [Validators.required, Validators.min(18), Validators.max(65)]],
});
}
get name() {
return this.userForm.get('name');
}
get email() {
return this.userForm.get('email');
}
get password() {
return this.userForm.get('password');
}
get age() {
return this.userForm.get('age');
}
onSubmit() {
if (this.userForm.valid) {
console.log('Form submitted:', this.userForm.value);
}
}
}
Explanation
In this example, we have created a user form with four form controls: name, email, password, and age. Each form control is validated using various validation functions from the Validators class, such as required, minLength, maxLength, email, pattern, min, and max.
The validation errors are displayed in the template using Angular’s built-in *ngIf directive, which shows or hides error messages based on the validity of the form controls.
When the user submits the form, the onSubmit method is called, which checks if the form is valid. If the form is valid, the form data can be processed further, such as sending it to a server.
Output
Purpose of Validators class in Angular
The Validators class in Angular provides a set of built-in validation functions that can be used to validate form controls and user input. It is part of the @angular/forms module and is commonly used in conjunction with Angular’s Reactive Forms or Template-driven Forms.