Angular - Form Validation

Form validation is a process used to check whether the user input is in the correct format or not before submission. The validation process can be used to verify the format of email addresses and phone numbers as they have specific formats. Also, you can verify if the given input meets specific constraints like a minimum or maximum length. The form validation can prevent errors by catching invalid input before it is processed or sent to the server.

As we know, Angular has two kinds of forms. The first one is template-driven forms, and the other is reactive forms. The validation is implemented in two different ways. In template-driven forms, directives are used within the template to validate the form. In reactive forms, a model-driven approach is used where validation logic is defined in the component class.

Built-in Angular Validators

The Validator class in Angular provides a set of built-in validator functions that validate the form controls. A list of validator functions is −

Validation in Angular Template-Driven Forms

In Angular, Template-Driven Forms are forms where the validation is applied directly in the HTML template using Angular's built-in directives, like required, minlength, maxlength, and more. This type of form uses ngModel directive for two-way data binding and needs less code than Reactive Forms.

Example

In the below example, we will see how to use the validation in Template-Driven Form.

Step 1: Add the below code inside Template file −

<form #userForm="ngForm" (ngSubmit)="onSubmit(userForm)">
  <div>
    <label for="email">Email</label>
    <input class="input-box" type="email" id="email" name="email" [(ngModel)]="user.email" required email #email="ngModel">
    <div *ngIf="email.invalid && email.touched" class="error">
      Email is required and must be a valid email address.
    </div>
  </div>

  <div>
    <label for="password">Password</label>
    <input class="input-box" type="password" id="password" name="password" [(ngModel)]="user.password" required minlength="6" #password="ngModel">
    <div *ngIf="password.invalid && password.touched" class="error">
      Password is required and must be at least 6 characters long.
    </div>
  </div>

  <button class="btn" type="submit" [disabled]="userForm.invalid">Submit</button>
</form>
<router-outlet />

Step 2: Add the below code inside component class −

import { Component } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { RouterOutlet } from '@angular/router';
import { CommonModule } from '@angular/common';

@Component({
   selector: 'app-root',
   standalone: true,
   imports: [RouterOutlet, FormsModule, CommonModule],
   templateUrl: './app.component.html',
   styleUrl: './app.component.css'
})
export class AppComponent {
   user = {
      email: '',
      password: ''
   };
   onSubmit(form: any) {
      if (form.valid) {
         console.log('Form Submitted!', this.user);
      }
   }
}

Step 3: Add some CSS −

.input-box {
   margin: 10px;
   padding: 5px 15px;
   border-color: rgb(103, 220, 181);
}
.btn {
   padding: 5px 15px;
   color: white;
   font-weight: bold;
   background-color: rgb(103, 220, 181);
} 

p { 
   font-weight: bold;
   margin-top: 10px;
}

.error {
   color: red;
   font-size: 12px;
}
  
input.ng-touched.ng-invalid {
   border-color: red;
}
  
input.ng-touched.ng-valid {
   border-color: green;
}
  
button {
   margin-top: 10px;
}

On running the application, you will get the following output −

Validation in Angular Reactive Forms

In Angular Reactive Forms, form validation is handled within component class using the FormControl, FormGroup, and FormArray classes, along with built-in or custom validators.

Example

In the below example, we will see how to apply validation in Reactive Form.

Step 1: Add the below code inside Template file −

<form [formGroup]="loginForm" (ngSubmit)="onSubmit()">
  <div>
    <label for="email">Email</label>
    <input class="input-box" type="email" id="email" formControlName="email">
    <div *ngIf="loginForm.controls['email'].invalid && loginForm.controls['email'].touched" class="error">
      Email is required and must be a valid email address.
    </div>
  </div>

  <div>
    <label for="password">Password</label>
    <input class="input-box" type="password" id="password" formControlName="password">
    <div *ngIf="loginForm.controls['password'].invalid && loginForm.controls['password'].touched" class="error">
      Password is required and must be at least 6 characters long.
    </div>
  </div>

  <button class="btn" type="submit" [disabled]="loginForm.invalid">Submit</button>
</form>

<router-outlet />

Step 2: Add the below code inside component class −

import { Component } from '@angular/core';
import { FormGroup, FormControl, ReactiveFormsModule, Validators } from '@angular/forms';
import { RouterOutlet } from '@angular/router';
import { CommonModule } from '@angular/common';

@Component({
   selector: 'app-root',
   standalone: true,
   imports: [RouterOutlet, ReactiveFormsModule, CommonModule],
   templateUrl: './app.component.html',
   styleUrl: './app.component.css'
})
export class AppComponent {
   loginForm: FormGroup;
   
   constructor() {
      this.loginForm = new FormGroup({
        email: new FormControl('', [Validators.required, Validators.email]),
        password: new FormControl('', [Validators.required, Validators.minLength(6)]),
      });
   }

   onSubmit() {
      if (this.loginForm.valid) {
         console.log('Form Submitted!', this.loginForm.value);
      } else {
         console.log('Form is not valid');
      }
   }
}

When you run the application, following response will be displayed −