Form Validation

Built-in & Custom Validators

💡 Validators ek quality-control inspector hain — har field ko check karte hain "kya ye acceptable hai?" (required, minlength, email format) — agar nahi, "reject" karके specific error batate hain, jaise ek factory ka quality check.

Angular Validators class built-in validators deta hai (required, minLength, maxLength, email, pattern). Multiple validators array mein combine ho sakte hain. Custom validators apne khud ke rules ke liye — ek FUNCTION jo control leta hai, error object (ya null agar valid) return karta hai.

import { AbstractControl, ValidationErrors, Validators } from '@angular/forms';

// Custom validator — password strength check:
function strongPasswordValidator(control: AbstractControl): ValidationErrors | null {
  const value = control.value;
  const hasNumber = /[0-9]/.test(value);
  const hasUpper = /[A-Z]/.test(value);
  return (hasNumber && hasUpper) ? null : { weakPassword: true };
}

// Use karna:
password: new FormControl('', [Validators.required, strongPasswordValidator])

// Template mein error dikhaна:
// <div *ngIf="signupForm.get('email')?.hasError('required')">
//   Email zaroori hai
// </div>
// <div *ngIf="signupForm.get('password')?.hasError('weakPassword')">
//   Password strong nahi hai
// </div>

✅

Validators ek quality-control inspector hain — har field ko check karte hain "kya ye acceptable hai?" (required, minlength, email format) — agar nahi, "reject" karके specific error batate hain, jaise ek factory ka quality check.

1 / 2

⚡ झट से Recap

Validators.required/minLength/email/pattern = built-in
Custom validators = function jo error object ya null return kare
.touched/.dirty check karo — errors sirf interaction ke baad dikhाओ

इस page में (2 subtopics)

Kabhi-kabhi validation DO fields ko COMPARE karna hoti hai (jaise "password" aur "confirmPassword" match karne chahiye) — ye validator poore FormGroup par lagता hai, individual field par nahi.

function passwordMatchValidator(group: AbstractControl): ValidationErrors | null {
  const password = group.get('password')?.value;
  const confirmPassword = group.get('confirmPassword')?.value;
  return password === confirmPassword ? null : { passwordMismatch: true };
}

// FormGroup level par apply:
this.signupForm = this.fb.group({
  password: ['', Validators.required],
  confirmPassword: ['', Validators.required]
}, { validators: passwordMatchValidator });   // GROUP-level validator

💡Tip: Group-level validators (second argument mein) alag syntax use karte hain individual field validators se — ye common confusion hai beginners ke liye, GROUP validator ka access group.get() se hota hai, control.value se nahi.

Async validators SERVER se check karте hain (jaise "kya ye username already liya gaya hai?") — Observable/Promise return karte hain, aur Angular automatically PENDING state show karta hai jab tak result na aaye.

function uniqueUsernameValidator(userService: UserService): AsyncValidatorFn {
  return (control: AbstractControl) => {
    return userService.checkUsernameExists(control.value).pipe(
      map(exists => exists ? { usernameTaken: true } : null)
    );
  };
}

// Use: new FormControl('', [Validators.required], [uniqueUsernameValidator(this.userService)])
// Teesra array = async validators (dusra = sync validators)

💡Tip: Async validators debounce karna ZAROORI hai (updateOn: 'blur' ya RxJS debounceTime) — warna HAR keystroke par ek server request bhejenge, jo unnecessary load aur poor UX deता hai.

← पिछला⚛️ Reactive Forms अगला →🔧 Dynamic Forms

Code10x

Form Validation

Cross-Field Validation — Comparing Two Fields

Async Validators — Server-Side Validation