Angular-এ ফর্ম ভ্যালিডেশন ব্যবহার করে ব্যবহারকারীর ইনপুট সঠিক কিনা তা যাচাই করা হয়। Angular দুটি ধরনের ফর্ম সাপোর্ট করে: Template-driven forms এবং Reactive forms। উভয় ধরনের ফর্মে বিল্ট-ইন (built-in) এবং কাস্টম ভ্যালিডেটর ব্যবহার করা যায়।

এখানে আমরা বিল্ট-ইন ভ্যালিডেটর এবং কাস্টম ভ্যালিডেটর তৈরি করার পদ্ধতি আলোচনা করব।

১. বিল্ট-ইন ভ্যালিডেটর (Built-in Validators)

Angular কিছু প্রি-ডিফাইন্ড (built-in) ভ্যালিডেটর সরবরাহ করে, যা সাধারণত ইনপুট ফিল্ডে প্রাথমিক ভ্যালিডেশন করার জন্য ব্যবহৃত হয়। এই ভ্যালিডেটরগুলোকে আপনি Reactive Forms বা Template-driven Forms-এ ব্যবহার করতে পারেন।

বিল্ট-ইন ভ্যালিডেটরসমূহ

• Validators.required: ফিল্ডটি খালি থাকতে পারবে না।
• Validators.minLength(minLength): ফিল্ডের ইনপুটের কমপক্ষে নির্দিষ্ট দৈর্ঘ্য হতে হবে।
• Validators.maxLength(maxLength): ফিল্ডের ইনপুটের দৈর্ঘ্য নির্দিষ্ট মানের বেশি হতে পারবে না।
• Validators.pattern(pattern): ইনপুটটি একটি নির্দিষ্ট রেগুলার এক্সপ্রেশন (Regex) এর সাথে ম্যাচ করতে হবে।
• Validators.email: ইনপুটটি একটি বৈধ ইমেইল ফরম্যাটে হতে হবে।
• Validators.min(minValue): ইনপুটের মান একটি নির্দিষ্ট সংখ্যার চেয়ে ছোট হতে পারবে না।
• Validators.max(maxValue): ইনপুটের মান একটি নির্দিষ্ট সংখ্যার চেয়ে বড় হতে পারবে না।

বিল্ট-ইন ভ্যালিডেটর ব্যবহার (Reactive Forms)

import { Component } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';

@Component({
  selector: 'app-login',
  templateUrl: './login.component.html'
})
export class LoginComponent {
  loginForm: FormGroup;

  constructor(private fb: FormBuilder) {
    this.loginForm = this.fb.group({
      email: ['', [Validators.required, Validators.email]],
      password: ['', [Validators.required, Validators.minLength(6)]]
    });
  }

  onSubmit() {
    if (this.loginForm.valid) {
      console.log(this.loginForm.value);
    } else {
      console.log('Form is invalid');
    }
  }
}

HTML (login.component.html):

<form [formGroup]="loginForm" (ngSubmit)="onSubmit()">
  <label for="email">Email:</label>
  <input id="email" formControlName="email" />
  <div *ngIf="loginForm.get('email').hasError('required') && loginForm.get('email').touched">
    Email is required.
  </div>
  <div *ngIf="loginForm.get('email').hasError('email') && loginForm.get('email').touched">
    Invalid email format.
  </div>

  <label for="password">Password:</label>
  <input id="password" formControlName="password" type="password" />
  <div *ngIf="loginForm.get('password').hasError('required') && loginForm.get('password').touched">
    Password is required.
  </div>
  <div *ngIf="loginForm.get('password').hasError('minlength') && loginForm.get('password').touched">
    Password must be at least 6 characters.
  </div>

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

২. কাস্টম ভ্যালিডেটর (Custom Validators)

কাস্টম ভ্যালিডেটর আপনি যখন নিজের ফর্মের জন্য বিশেষ ভ্যালিডেশন কন্ডিশন তৈরি করতে চান, তখন ব্যবহার করা হয়। এটি একটি ফাংশন যা FormControl বা FormGroup এর ইনপুট যাচাই করে এবং একটি ত্রুটি অবজেক্ট (error object) রিটার্ন করে যদি কোনো ভুল থাকে।

কাস্টম ভ্যালিডেটর তৈরি করা

ধরা যাক, আপনি চান যে পাসওয়ার্ডে কমপক্ষে একটি বড় হাতের অক্ষর এবং একটি সংখ্যা থাকতে হবে।

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

export function passwordValidator(control: AbstractControl): ValidationErrors | null {
  const password = control.value;
  if (!password) return null;
  const hasUpperCase = /[A-Z]/.test(password);
  const hasNumber = /\d/.test(password);
  if (!hasUpperCase || !hasNumber) {
    return { passwordStrength: 'Password must contain at least one uppercase letter and one number' };
  }
  return null;
}

এখন এই কাস্টম ভ্যালিডেটরটি ফর্ম গ্রুপের পাসওয়ার্ড ফিল্ডে প্রয়োগ করা হবে।

কাস্টম ভ্যালিডেটর ব্যবহার (Reactive Forms)

import { Component } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { passwordValidator } from './custom-validators';

@Component({
  selector: 'app-register',
  templateUrl: './register.component.html'
})
export class RegisterComponent {
  registerForm: FormGroup;

  constructor(private fb: FormBuilder) {
    this.registerForm = this.fb.group({
      username: ['', Validators.required],
      password: ['', [Validators.required, passwordValidator]]
    });
  }

  onSubmit() {
    if (this.registerForm.valid) {
      console.log(this.registerForm.value);
    } else {
      console.log('Form is invalid');
    }
  }
}

HTML (register.component.html):

<form [formGroup]="registerForm" (ngSubmit)="onSubmit()">
  <label for="username">Username:</label>
  <input id="username" formControlName="username" />
  <div *ngIf="registerForm.get('username').hasError('required') && registerForm.get('username').touched">
    Username is required.
  </div>

  <label for="password">Password:</label>
  <input id="password" formControlName="password" type="password" />
  <div *ngIf="registerForm.get('password').hasError('required') && registerForm.get('password').touched">
    Password is required.
  </div>
  <div *ngIf="registerForm.get('password').hasError('passwordStrength') && registerForm.get('password').touched">
    Password must contain at least one uppercase letter and one number.
  </div>

  <button type="submit" [disabled]="registerForm.invalid">Submit</button>
</form>

Template-driven Forms এ ভ্যালিডেশন

Template-driven forms-এ আপনি বিল্ট-ইন ভ্যালিডেটরগুলো সরাসরি HTML টেমপ্লেটে প্রয়োগ করতে পারেন।

<form #form="ngForm" (ngSubmit)="onSubmit(form)">
  <label for="email">Email:</label>
  <input type="email" id="email" name="email" ngModel required email />
  <div *ngIf="form.controls.email?.invalid && form.controls.email?.touched">
    <div *ngIf="form.controls.email?.errors?.required">Email is required.</div>
    <div *ngIf="form.controls.email?.errors?.email">Invalid email format.</div>
  </div>

  <label for="password">Password:</label>
  <input type="password" id="password" name="password" ngModel required minlength="6" />
  <div *ngIf="form.controls.password?.invalid && form.controls.password?.touched">
    <div *ngIf="form.controls.password?.errors?.required">Password is required.</div>
    <div *ngIf="form.controls.password?.errors?.minlength">Password must be at least 6 characters long.</div>
  </div>

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

সারাংশ

Angular ফর্ম ভ্যালিডেশনটি অ্যাপ্লিকেশনের ব্যবহারকারীর ইনপুট যাচাই করার একটি শক্তিশালী উপায়। আপনি বিল্ট-ইন ভ্যালিডেটর ব্যবহার করতে পারেন অথবা কাস্টম ভ্যালিডেটর তৈরি করে নিজস্ব ভ্যালিডেশন কন্ডিশন সেট করতে পারেন। ভ্যালিডেশনটি ফর্মের সঠিকতা এবং ডেটার গুণমান নিশ্চিত করতে গুরুত্বপূর্ণ ভূমিকা পালন করে।