Reactive Forms Validation - Required, Email, Min, Max Length

What is Validation?

Validation is used to show an error message when the user enters a wrong value in an input field.

Examples:

  1. Empty input field
  2. Invalid email
  3. Less or more characters than required


Validations Used

  1. Required
  2. Email
  3. Minimum length
  4. Maximum length


Required Imports

import { ReactiveFormsModule, FormGroup, FormControl, Validators } from '@angular/forms';

FormGroup with Validations (TypeScript)

import { CommonModule } from '@angular/common';
import { Component} from '@angular/core';
import { FormControl, FormGroup, ReactiveFormsModule, Validators } from '@angular/forms';
@Component({
selector: 'app-root',
imports: [CommonModule, ReactiveFormsModule],
templateUrl: './app.html',
styleUrl: './app.css'
})
export class App {
loginForm=new FormGroup({
name:new FormControl('',[Validators.required,Validators.maxLength(20)]),
email:new FormControl('',[Validators.required,Validators.email]),
password:new FormControl('',[Validators.required,Validators.minLength(5)]),
})

get name(){
return this.loginForm.get("name")
}

get email(){
return this.loginForm.get("email")
}
get password(){
return this.loginForm.get("password")
}

handleProfile(){
console.log(this.loginForm.value);
}
reset(){
this.loginForm.setValue({
name:'',
password:'',
email:''
})
}

}


Getter Methods (Short and Clean Syntax)

get name() {
return this.loginForm.get('name');
}

get email() {
return this.loginForm.get('email');
}

get password() {
return this.loginForm.get('password');
}


HTML – Input Fields with Validation Messages

<h1>Reactive Form</h1>
<br><br>
<form [formGroup]="loginForm" (ngSubmit)="handleProfile()" method="post">
<input type="text" formControlName="name" placeholder="enter Name">
@if(name?.hasError('required') && name?.touched){
<span class="error">This name field is required</span>
}
@if(name?.errors?.['maxlength'] && name?.touched){
<span class="error">Name is not valid</span>
}

<br><br>
<input type="text" formControlName="email" placeholder="enter email">
@if(email?.hasError('required') && email?.touched){
<span class="error">This email field is required</span>
}

@if(email?.errors?.['email'] && email?.touched){
<span class="error">This email is not valid</span>
}

<br><br>
<input type="password" formControlName="password" placeholder="enter password">
@if(password?.hasError('required') && password?.touched){
<span class="error"> password field is required</span>
}

@if(password?.errors?.['minlength'] && password?.touched){
<span class="error">This password is not valid</span>
}

<br><br>
<button [disabled]="loginForm.invalid" >Submit</button>
<button (click)="reset()" >Reset</button>


</form>

Error Message Styling (CSS)

.error {
color: red;
padding-left: 10px;
}


Disable Submit Button Logic

  1. Button stays disabled when form is invalid
  2. Button becomes enabled when all fields are valid
<button [disabled]="loginForm.invalid">Submit</button>