Angular এর মাধ্যমে ফর্ম তৈরি এবং ভ্যালিডেশন

MeanJS স্ট্যাকের মধ্যে AngularJS ব্যবহার করে ফর্ম তৈরি এবং ভ্যালিডেশন করা খুবই গুরুত্বপূর্ণ একটি কাজ। AngularJS একটি শক্তিশালী ফ্রেমওয়ার্ক যা ডাইনামিক ওয়েব অ্যাপ্লিকেশন তৈরি করতে সাহায্য করে এবং এতে ফর্ম ভ্যালিডেশন খুব সহজে করা যায়। এখানে আমরা দেখবো কিভাবে AngularJS ব্যবহার করে ফর্ম তৈরি এবং ভ্যালিডেশন করা যায়।

AngularJS এ ফর্ম তৈরি এবং ভ্যালিডেশন

১. Angular Form Control

AngularJS-এ দুটি ধরনের ফর্ম তৈরি করা যায়:

1. Template-driven forms: যেখানে আপনি HTML টেমপ্লেটের মাধ্যমে ফর্ম এবং ভ্যালিডেশন তৈরি করেন।
2. Reactive forms: যেখানে আপনি JavaScript কোডের মাধ্যমে ফর্ম এবং ভ্যালিডেশন কন্ট্রোল করেন।

আমরা এখানে Template-driven form নিয়ে আলোচনা করবো, কারণ এটি খুবই সাধারণ এবং সহজ।

ফর্ম তৈরি করা

AngularJS-এ ফর্ম তৈরি করার জন্য প্রথমে HTML টেমপ্লেটে একটি ফর্ম তৈরি করতে হবে এবং তারপর সেই ফর্মের ইনপুট ফিল্ড গুলোর জন্য ngModel ব্যবহার করতে হবে। এছাড়া ngSubmit ব্যবহার করে ফর্ম সাবমিট করতে হবে।

উদাহরণ: ইউজার নিবন্ধন ফর্ম

<!-- app.component.html -->

<div class="container">
  <h2>Register</h2>
  <form #registrationForm="ngForm" (ngSubmit)="onSubmit(registrationForm)" novalidate>
    
    <!-- Name Input -->
    <div class="form-group">
      <label for="name">Name</label>
      <input 
        type="text" 
        id="name" 
        class="form-control" 
        name="name" 
        [(ngModel)]="user.name" 
        required 
        #name="ngModel">
      <div *ngIf="name.invalid && (name.dirty || name.touched)" class="alert alert-danger">
        Name is required.
      </div>
    </div>

    <!-- Email Input -->
    <div class="form-group">
      <label for="email">Email</label>
      <input 
        type="email" 
        id="email" 
        class="form-control" 
        name="email" 
        [(ngModel)]="user.email" 
        required 
        email 
        #email="ngModel">
      <div *ngIf="email.invalid && (email.dirty || email.touched)" class="alert alert-danger">
        Valid email is required.
      </div>
    </div>

    <!-- Password Input -->
    <div class="form-group">
      <label for="password">Password</label>
      <input 
        type="password" 
        id="password" 
        class="form-control" 
        name="password" 
        [(ngModel)]="user.password" 
        required 
        minlength="6" 
        #password="ngModel">
      <div *ngIf="password.invalid && (password.dirty || password.touched)" class="alert alert-danger">
        Password must be at least 6 characters long.
      </div>
    </div>

    <!-- Submit Button -->
    <button type="submit" class="btn btn-primary" [disabled]="registrationForm.invalid">Submit</button>
  </form>
</div>

ব্যাখ্যা:

1. ngForm: এটি ফর্মের একটি টেমপ্লেট ভেরিয়েবল তৈরি করে, যা ফর্মের অবস্থা ও ভ্যালিডেশন ট্র্যাক করে।
2. ngModel: এই ডিরেকটিভ ইনপুট ফিল্ডের জন্য ডেটা বাইন্ডিং তৈরি করে। ব্যবহারকারী যে ডেটা ইনপুট করবে তা user অবজেক্টের সাথে বাইন্ড হবে।
3. #name="ngModel": এখানে ngModel এর মাধ্যমে ইনপুট ফিল্ডের ভ্যালিডেশন ট্র্যাক করা হয়।
4. (ngSubmit): ফর্ম সাবমিট করার জন্য ব্যবহার করা হয়। এখানে onSubmit() ফাংশন কল করা হচ্ছে।
5. [disabled]: সাবমিট বাটনটি ফর্মটি যদি ইনভ্যালিড হয়, তবে অক্ষম করবে।

ফর্ম ভ্যালিডেশন

AngularJS তে ফর্ম ভ্যালিডেশন খুবই সহজ। আপনি HTML ইনপুট ফিল্ডে required, email, minlength ইত্যাদি ভ্যালিডেশন কন্ডিশন দিয়ে ফর্ম ভ্যালিডেশন করতে পারেন।

উদাহরণ:

1. required: ইনপুট ফিল্ডটি খালি না রেখে পূর্ণ করতে হবে।
2. email: ইনপুট ফিল্ডে একটি বৈধ ইমেল ঠিকানা থাকতে হবে।
3. minlength: পাসওয়ার্ডের জন্য মিনিমাম দৈর্ঘ্য নির্ধারণ করা হয়েছে।

ভ্যালিডেশন মেসেজ

প্রতিটি ইনপুট ফিল্ডের নিচে একটি ভ্যালিডেশন মেসেজ শো করা হয়েছে। উদাহরণস্বরূপ, যদি ইউজার নাম ফিল্ডে কিছু না দেন তবে Name is required. মেসেজ শো করবে।

<div *ngIf="name.invalid && (name.dirty || name.touched)" class="alert alert-danger">
  Name is required.
</div>

এখানে, dirty এবং touched এর মানে হলো, যদি ইনপুট ফিল্ডে কোনও পরিবর্তন করা হয় বা ইনপুট ফিল্ডটি ফোকাস করা হয়, তখনই এটি মেসেজ দেখাবে।

ফর্ম সাবমিট করা

এখন, যখন ফর্মটি সফলভাবে ভ্যালিড হয় এবং ব্যবহারকারী Submit বাটনে ক্লিক করবে, তখন onSubmit() ফাংশন কল হবে।

// app.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  user = {
    name: '',
    email: '',
    password: ''
  };

  onSubmit(form: any) {
    console.log('Form Submitted!', form);
    console.log(this.user);
    // ফর্ম সাবমিট করার পর আপনি API কল করতে পারেন বা অন্য কোন কার্যকলাপ করতে পারেন।
  }
}

এখানে, onSubmit() ফাংশনে ফর্মের ডেটা লগ করা হয়েছে এবং আপনি যে কোনো ডেটাবেস বা API কল করতে পারেন। this.user অবজেক্টে ফর্মের ইনপুট ডেটা থাকবে।

কাস্টম ভ্যালিডেশন

আপনি যদি আরো কাস্টম ভ্যালিডেশন যুক্ত করতে চান, তবে AngularJS এর Validators ব্যবহার করতে পারেন। উদাহরণস্বরূপ, একটি কাস্টম পাসওয়ার্ড ভ্যালিডেশন যেখানে পাসওয়ার্ডে একটি বিশেষ ক্যারেক্টার থাকতে হবে।

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

export function passwordValidator(): ValidatorFn {
  return (control: AbstractControl): ValidationErrors | null => {
    const hasSpecialChar = /[!@#$%^&*(),.?":{}|<>]/.test(control.value);
    return hasSpecialChar ? null : { 'passwordStrength': 'Password must contain a special character' };
  };
}

এখানে, passwordValidator একটি কাস্টম ভ্যালিডেটর তৈরি করেছে যা পাসওয়ার্ডে বিশেষ ক্যারেক্টার থাকতে হবে।

সারাংশ

AngularJS এর মাধ্যমে ফর্ম তৈরি এবং ভ্যালিডেশন খুবই সহজ এবং কার্যকরী। ngModel ডিরেকটিভ ব্যবহার করে ডেটা বাইন্ডিং করা যায় এবং required, email, minlength এর মতো সহজ HTML ভ্যালিডেশন কন্ডিশন ব্যবহার করে ইনপুট ফিল্ডগুলোর ভ্যালিডেশন করা যায়। এছাড়া, আপনি কাস্টম ভ্যালিডেশন ফাংশনও তৈরি করতে পারেন, যা আরো জটিল ভ্যালিডেশন প্রয়োজনীয়তার জন্য ব্যবহার করা যায়।