Angular ফর্মস ব্যবহার করে আপনি আপনার অ্যাপ্লিকেশনে ব্যবহারকারী ইনপুট সংগ্রহ করতে পারেন। Angular ফর্ম দুটি প্রধান ধরনের সরবরাহ করে: Template-driven Forms এবং Reactive Forms। এই দুই ধরনের ফর্মের মধ্যকার প্রধান পার্থক্য হল কিভাবে তারা পরিচালিত হয় এবং কিভাবে ডেটা মডেলিং করা হয়।

1. Template-driven Forms

Template-driven Forms Angular ফর্মের একটি সহজ এবং declarative পদ্ধতি। এই ফর্মের জন্য ফর্ম কন্ট্রোলগুলি HTML টেমপ্লেটের মধ্যেই সংজ্ঞায়িত করা হয়। ব্যবহারকারী ইন্টারফেসে ডেটা বাইন্ডিং এবং ফর্মের ভ্যালিডেশন HTML টেমপ্লেটের মাধ্যমে সরাসরি করা হয়।

Template-driven ফর্মের উদাহরণ:

প্রথমে, Angular অ্যাপ্লিকেশনকে FormsModule ইমপোর্ট করতে হবে:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms'; // FormsModule ইমপোর্ট

import { AppComponent } from './app.component';

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, FormsModule], // FormsModule এখানে যুক্ত হবে
  bootstrap: [AppComponent]
})
export class AppModule { }

এখন, HTML টেমপ্লেটে ngModel ব্যবহার করে ফর্ম তৈরি করা যেতে পারে:

<form #userForm="ngForm">
  <label for="name">Name:</label>
  <input type="text" id="name" name="name" [(ngModel)]="user.name" #name="ngModel" required>
  
  <div *ngIf="name.invalid && name.touched">Name is required.</div>

  <button [disabled]="userForm.invalid" (click)="submitForm()">Submit</button>
</form>

এখানে:

• [(ngModel)] ডেটা বাইন্ডিং ব্যবহার করে ইউজারের ইনপুটকে কম্পোনেন্টের প্রোপার্টি user.name এর সাথে সংযুক্ত করা হয়।
• #userForm="ngForm" ফর্মের রেফারেন্স এবং ভ্যালিডেশন ব্যবহার করার জন্য।
• required হল ফিল্ড ভ্যালিডেশনের একটি সাধারণ নিয়ম।

কম্পোনেন্ট ক্লাসে:

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

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

  submitForm() {
    console.log(this.user);
  }
}

2. Reactive Forms

Reactive Forms Angular ফর্মের আরও উন্নত এবং স্কেলেবল পদ্ধতি। এটি একটি প্রোগ্রাম্যাটিক পদ্ধতি, যেখানে আপনি ফর্মের কন্ট্রোল, ভ্যালিডেশন এবং স্টেট ম্যানেজমেন্টকে কম্পোনেন্ট ক্লাসের মধ্যে কোডের মাধ্যমে নিয়ন্ত্রণ করেন।

Reactive ফর্মের উদাহরণ:

প্রথমে, Angular অ্যাপ্লিকেশনকে ReactiveFormsModule ইমপোর্ট করতে হবে:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { ReactiveFormsModule } from '@angular/forms'; // ReactiveFormsModule ইমপোর্ট

import { AppComponent } from './app.component';

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, ReactiveFormsModule], // ReactiveFormsModule এখানে যুক্ত হবে
  bootstrap: [AppComponent]
})
export class AppModule { }

এখন, Reactive form তৈরি করতে হবে:

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html'
})
export class AppComponent {
  userForm: FormGroup;

  constructor() {
    this.userForm = new FormGroup({
      name: new FormControl('', [Validators.required]),
      email: new FormControl('', [Validators.required, Validators.email])
    });
  }

  submitForm() {
    console.log(this.userForm.value);
  }
}

এখানে:

• FormGroup এবং FormControl ব্যবহার করে ফর্মের কন্ট্রোলগুলি প্রোগ্রাম্যাটিক্যালি তৈরি করা হয়।
• Validators.required এবং Validators.email ব্যবহার করে ভ্যালিডেশন করা হয়।

HTML টেমপ্লেটে Reactive form এর জন্য:

<form [formGroup]="userForm" (ngSubmit)="submitForm()">
  <label for="name">Name:</label>
  <input type="text" id="name" formControlName="name">

  <label for="email">Email:</label>
  <input type="email" id="email" formControlName="email">

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

এখানে:

• [formGroup] ডিরেক্টিভ দ্বারা userForm কে HTML ফর্মের সাথে যুক্ত করা হয়েছে।
• formControlName দ্বারা প্রতিটি ইনপুট ফিল্ডকে নির্দিষ্ট FormControl এর সাথে সংযুক্ত করা হয়েছে।

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

ফর্ম ভ্যালিডেশন Angular ফর্মে দুটি মূল পদ্ধতিতে করা যায়:

1. Template-driven Forms: HTML টেমপ্লেটের মধ্যে ইনলাইন ভ্যালিডেশন।
2. Reactive Forms: কম্পোনেন্টে Validators ব্যবহার করে প্রোগ্রাম্যাটিক ভ্যালিডেশন।

উদাহরণ:

Template-driven ফর্মে:

<input type="text" name="username" [(ngModel)]="user.username" required>

Reactive ফর্মে:

username: new FormControl('', [Validators.required])

সারাংশ

Angular ফর্মস দিয়ে আপনি আপনার অ্যাপ্লিকেশনের ইউজার ইনপুট খুব সহজে গ্রহণ করতে পারেন এবং দুই ধরনের ফর্ম ব্যবহার করতে পারেন: Template-driven Forms এবং Reactive Forms। Template-driven Forms সহজ এবং declarative, যেখানে Reactive Forms শক্তিশালী এবং প্রোগ্রাম্যাটিক্যালি নিয়ন্ত্রিত। Angular-এ ফর্ম ভ্যালিডেশন এবং ডেটা ম্যানেজমেন্ট সহজেই করতে পারেন এই ফর্মের মাধ্যমে।

Angular-এ ফর্ম তৈরি করার দুটি প্রধান পদ্ধতি রয়েছে: টেম্পলেট-ড্রিভেন ফর্মস এবং রিঅ্যাকটিভ ফর্মস। এই টিউটোরিয়ালে আমরা টেম্পলেট-ড্রিভেন ফর্মস সম্পর্কে আলোচনা করব, যা Angular-এ ফর্ম তৈরি এবং পরিচালনার সবচেয়ে সহজ এবং প্রচলিত পদ্ধতি।

টেম্পলেট-ড্রিভেন ফর্মগুলো কম্পোনেন্টের টেমপ্লেটের মধ্যে তৈরি করা হয় এবং খুব কম কোডের মাধ্যমে ফর্মের মান ও তার ভ্যালিডেশন পরিচালনা করা যায়। এটি সাধারণত সহজ ফর্মের জন্য ব্যবহৃত হয় যেখানে কমপ্লেক্স লজিকের প্রয়োজন হয় না।

টেম্পলেট-ড্রিভেন ফর্মস কী?

টেম্পলেট-ড্রিভেন ফর্মস হলো এমন ফর্ম যেখানে ফর্মের উপাদানগুলো মূলত HTML টেমপ্লেটে ডিফাইন করা হয়, এবং Angular ফর্মের মান এবং তার ভ্যালিডেশন পরিচালনা করে টেমপ্লেটের মাধ্যমে। এতে আপনি HTML ট্যাগের মধ্যে ফর্ম কন্ট্রোল এবং ভ্যালিডেশন নির্দিষ্ট করেন, এবং Angular ফর্মের স্টেট ও কার্যকারিতা পরিচালনা করে।

টেম্পলেট-ড্রিভেন ফর্ম তৈরি করা

টেম্পলেট-ড্রিভেন ফর্ম তৈরি করতে প্রথমে FormsModule ইম্পোর্ট করতে হবে। এটি Angular অ্যাপ্লিকেশনের মূল মডিউলে (অথবা যেখানে ফর্ম ব্যবহার করতে চান সেখানে) যুক্ত করা হয়।

১. FormsModule ইম্পোর্ট করা

প্রথমে FormsModule কে আপনার অ্যাপ্লিকেশনের মডিউলে ইম্পোর্ট করতে হবে:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';  // FormsModule ইম্পোর্ট করা

import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    FormsModule  // FormsModule ইম্পোর্ট করা
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

এখানে, FormsModule অ্যাপ্লিকেশনে ফর্ম ব্যবহারের জন্য প্রয়োজনীয় ডিরেক্টিভস এবং সার্ভিস সরবরাহ করে।

২. টেম্পলেট-ড্রিভেন ফর্ম তৈরি করা

এবার, HTML টেমপ্লেট-এ ফর্ম কন্ট্রোল তৈরি করা হবে। আপনি ngModel ডিরেক্টিভটি ব্যবহার করে ইনপুট ফিল্ডের মান ও স্টেট নিয়ন্ত্রণ করবেন।

<!-- app.component.html -->
<form #myForm="ngForm" (ngSubmit)="onSubmit(myForm)">
  <div>
    <label for="name">Name:</label>
    <input type="text" id="name" name="name" [(ngModel)]="model.name" required>
  </div>

  <div>
    <label for="email">Email:</label>
    <input type="email" id="email" name="email" [(ngModel)]="model.email" required>
  </div>

  <button type="submit" [disabled]="!myForm.valid">Submit</button>
</form>

এখানে:

• [(ngModel)]="model.name" এবং [(ngModel)]="model.email" ডেটা বাইন্ডিং এর মাধ্যমে ইনপুট ফিল্ডের মান কম্পোনেন্টের model অবজেক্টে ব্যাকআপ করছে।
• #myForm="ngForm" ফর্মের একটি রেফারেন্স তৈরি করছে, যার মাধ্যমে আপনি ফর্মের ভ্যালিডেশন এবং এর স্টেট অ্যাক্সেস করতে পারবেন।

৩. কম্পোনেন্টে ডেটা হ্যান্ডলিং

এখন, কম্পোনেন্টে ফর্মের জন্য ডেটা মডেল এবং সাবমিট ফাংশন তৈরি করতে হবে:

// app.component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  model = { name: '', email: '' };  // ডেটা মডেল

  onSubmit(form: any): void {
    console.log('Form Submitted:', form);
    console.log('Model Data:', this.model);
  }
}

এখানে, model অবজেক্টের মান ইনপুট ফিল্ডের মাধ্যমে পরিবর্তিত হচ্ছে এবং onSubmit() ফাংশনে ফর্মের ডেটা পাঠানো হচ্ছে।

টেম্পলেট-ড্রিভেন ফর্মস এর ভ্যালিডেশন

টেম্পলেট-ড্রিভেন ফর্মগুলোতে ভ্যালিডেশন সাধারণত HTML ফর্ম কন্ট্রোলের মাধ্যমে করা হয়। আপনি required, minlength, maxlength, pattern ইত্যাদি অ্যাট্রিবিউট ব্যবহার করে ফর্ম ফিল্ডে ভ্যালিডেশন যুক্ত করতে পারেন।

উদাহরণ: ফর্ম ভ্যালিডেশন

<form #myForm="ngForm" (ngSubmit)="onSubmit(myForm)">
  <div>
    <label for="name">Name:</label>
    <input type="text" id="name" name="name" [(ngModel)]="model.name" required #name="ngModel">
    <div *ngIf="name.invalid && name.touched" class="error">
      Name is required.
    </div>
  </div>

  <div>
    <label for="email">Email:</label>
    <input type="email" id="email" name="email" [(ngModel)]="model.email" required email #email="ngModel">
    <div *ngIf="email.invalid && email.touched" class="error">
      A valid email is required.
    </div>
  </div>

  <button type="submit" [disabled]="!myForm.valid">Submit</button>
</form>

এখানে:

• required অ্যাট্রিবিউট ইনপুট ফিল্ডের জন্য ভ্যালিডেশন নির্ধারণ করছে।
• #name="ngModel" এবং #email="ngModel" এই রেফারেন্সগুলো ব্যবহার করে আমরা ফর্ম কন্ট্রোলের ভ্যালিডেশন স্টেট (যেমন invalid এবং touched) চেক করছি এবং ব্যবহারকারীকে ভুল ইনপুট দেওয়ার জন্য একটি এরর মেসেজ দেখাচ্ছি।

সারাংশ

টেম্পলেট-ড্রিভেন ফর্মস হল Angular-এ একটি সহজ এবং প্রাথমিক পদ্ধতি, যার মাধ্যমে আপনি কম্পোনেন্টের টেমপ্লেটের মাধ্যমে ফর্ম তৈরি এবং পরিচালনা করতে পারেন। Angular ফর্মের মান এবং ভ্যালিডেশন খুব সহজভাবে ngModel ডিরেক্টিভ ব্যবহার করে পরিচালিত হয়। এটি ছোট ও সহজ ফর্মগুলির জন্য উপযুক্ত, যেখানে লজিক কম এবং অল্প কোডে ফর্ম তৈরি করা সম্ভব।

Angular-এ রিয়্যাক্টিভ ফর্মস (Reactive Forms) একটি ফর্ম হ্যান্ডলিং পদ্ধতি যা ফর্মের ডেটা এবং ভ্যালিডেশনকে কম্পোনেন্টের ক্লাসে প্রোগ্রামেটিক্যালি ম্যানেজ করতে সহায়ক। রিয়্যাক্টিভ ফর্মস ব্যবহার করলে আপনি ফর্মের অবস্থা এবং লজিককে আরও সহজে ট্র্যাক করতে পারেন এবং এগুলোকে আরও বেশি কন্ট্রোল করতে পারেন।

এটি model-driven অ্যাপ্রোচের একটি অংশ, যেখানে ফর্মের সমস্ত লজিক এবং ডেটা কম্পোনেন্টের ক্লাসে থাকে, এবং ফর্মটি ইউআই (UI) থেকে পৃথক থাকে। রিয়্যাক্টিভ ফর্মস সাধারণত বড়, ডাইনামিক, এবং কমপ্লেক্স ফর্মের জন্য উপযুক্ত।

রিয়্যাক্টিভ ফর্মস এবং টেমপ্লেট-ভিত্তিক ফর্মস এর মধ্যে পার্থক্য

রিয়্যাক্টিভ ফর্ম তৈরি

ReactiveFormsModule ব্যবহার করার জন্য প্রথমে আপনাকে এটি আপনার অ্যাপ মডিউলে ইমপোর্ট করতে হবে।

1. ReactiveFormsModule ইমপোর্ট করা

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { ReactiveFormsModule } from '@angular/forms'; // ReactiveFormsModule ইমপোর্ট করা

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    ReactiveFormsModule // মডিউলে ReactiveFormsModule যুক্ত করা
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

2. ফর্ম কনট্রোল তৈরি করা

রিয়্যাক্টিভ ফর্মের মূল উপাদান হলো FormControl, FormGroup এবং FormArray। এগুলোর মাধ্যমে আপনি ফর্মের কন্ট্রোল এবং ডেটার স্ট্রাকচার তৈরি করেন।

FormControl

FormControl একটি একক ইনপুট ফিল্ডের মান এবং স্ট্যাটাস ট্র্যাক করার জন্য ব্যবহৃত হয়।

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

@Component({
  selector: 'app-root',
  template: `<input [formControl]="nameControl">`
})
export class AppComponent {
  nameControl = new FormControl('');
}

এখানে, FormControl দ্বারা একটি ইনপুট ফিল্ড তৈরি করা হয়েছে, যা nameControl নামক কন্ট্রোল দ্বারা ট্র্যাক হচ্ছে।

FormGroup

FormGroup একাধিক FormControl বা FormArray কে গ্রুপ আকারে একত্রিত করে।

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

@Component({
  selector: 'app-root',
  template: `
    <form [formGroup]="userForm">
      <input formControlName="name">
      <input formControlName="email">
    </form>
  `
})
export class AppComponent {
  userForm = new FormGroup({
    name: new FormControl(''),
    email: new FormControl('')
  });
}

এখানে, FormGroup দিয়ে দুটি FormControl (একটি নামের জন্য এবং একটি ইমেইলের জন্য) গ্রুপ করা হয়েছে। formControlName দিয়ে HTML ফর্মের ইনপুটগুলিকে সংযুক্ত করা হয়।

FormArray

FormArray ব্যবহার করা হয় যখন একাধিক একই ধরনের কন্ট্রোল (যেমন একাধিক ইনপুট ফিল্ড) প্রয়োজন হয়।

import { Component } from '@angular/core';
import { FormArray, FormControl, FormGroup } from '@angular/forms';

@Component({
  selector: 'app-root',
  template: `
    <form [formGroup]="userForm">
      <div formArrayName="addresses">
        <div *ngFor="let address of addresses.controls; let i = index">
          <input [formControlName]="i">
        </div>
      </div>
    </form>
  `
})
export class AppComponent {
  userForm = new FormGroup({
    addresses: new FormArray([
      new FormControl('Address 1'),
      new FormControl('Address 2')
    ])
  });

  get addresses() {
    return (this.userForm.get('addresses') as FormArray);
  }
}

এখানে, FormArray ব্যবহার করে একাধিক ঠিকানা ইনপুট ফিল্ড তৈরি করা হয়েছে। *ngFor ব্যবহার করে ফর্মের প্রতিটি কন্ট্রোল রেন্ডার করা হচ্ছে।

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

ফর্ম কন্ট্রোলের সাথে ভ্যালিডেটর যোগ করা যায়, যেটি ফর্মের ইনপুট ভ্যালিড করতে সহায়ক। Angular দুটি ধরনের ভ্যালিডেটর প্রদান করে: সিঙ্গেল ভ্যালিডেটর এবং কম্বিনেশন ভ্যালিডেটর।

সিঙ্গেল ভ্যালিডেটর

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

@Component({
  selector: 'app-root',
  template: `
    <input [formControl]="nameControl">
    <div *ngIf="nameControl.invalid && nameControl.touched">Name is required</div>
  `
})
export class AppComponent {
  nameControl = new FormControl('', Validators.required);
}

এখানে, Validators.required একটি সিঙ্গেল ভ্যালিডেটর যা ইনপুট ফিল্ডটি খালি থাকা চলবে না।

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

কাস্টম ভ্যালিডেটর ব্যবহার করলে আপনি নিজের ভ্যালিডেশন লজিক তৈরি করতে পারেন।

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

function ageValidator(control: FormControl) {
  if (control.value && control.value < 18) {
    return { 'ageInvalid': true };
  }
  return null;
}

@Component({
  selector: 'app-root',
  template: `
    <input [formControl]="ageControl">
    <div *ngIf="ageControl.hasError('ageInvalid')">Age must be 18 or older</div>
  `
})
export class AppComponent {
  ageControl = new FormControl('', ageValidator);
}

এখানে, ageValidator একটি কাস্টম ভ্যালিডেটর, যা ইউজারের বয়স ১৮ বছরের নিচে হলে ত্রুটি দেখাবে।

ফর্ম সাবমিট এবং ডেটা

ফর্মের ডেটা অ্যাক্সেস করতে form.value ব্যবহার করা হয় এবং ফর্ম সাবমিট করার জন্য form.submit() বা ngSubmit ব্যবহার করা হয়।

<form [formGroup]="userForm" (ngSubmit)="onSubmit()">
  <input formControlName="name">
  <button type="submit">Submit</button>
</form>

onSubmit() {
  console.log(this.userForm.value);
}

এখানে, onSubmit() মেথডে ফর্মের ডেটা আউটপুট করা হচ্ছে।

সারাংশ

রিয়্যাক্টিভ ফর্মস অ্যাঙ্গুলার অ্যাপ্লিকেশনে শক্তিশালী এবং নমনীয় ফর্ম হ্যান্ডলিংয়ের জন্য ব্যবহৃত হয়। এটি আপনাকে ফর্ম ডেটা এবং ভ্যালিডেশন কন্ট্রোল করতে সহজ উপায়ে সাহায্য করে এবং বড় এবং জটিল ফর্মের জন্য আদর্শ।

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

Angular-এ ফর্ম ব্যবস্থাপনা করার জন্য Reactive Forms এবং Template-driven Forms দুটি পদ্ধতি রয়েছে। এদের মধ্যে Reactive Forms পদ্ধতি ফর্মের FormGroup এবং FormControl ব্যবহার করে ডেটার ম্যানেজমেন্ট, ভ্যালিডেশন, এবং সাবমিশন সহজভাবে পরিচালনা করতে সহায়ক। এখানে আমরা FormGroup এবং FormControl সম্পর্কে বিস্তারিত আলোচনা করব।

FormGroup

FormGroup একটি গঠনমূলক ক্লাস যা এক বা একাধিক FormControl বা অন্যান্য FormGroup কে একটি ইউনিট হিসেবে সংগঠিত করে। এটি মূলত একাধিক ফর্ম কন্ট্রোলকে একটি গ্রুপে রাখার জন্য ব্যবহৃত হয়, যাতে ফর্মের ডেটা এবং স্টেট ম্যানেজমেন্ট সহজ হয়।

FormGroup এর উদাহরণ:

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

@Component({
  selector: 'app-user-form',
  templateUrl: './user-form.component.html',
})
export class UserFormComponent {
  userForm: FormGroup;

  constructor() {
    // FormGroup তৈরির সময় FormControl এর সাথে ভ্যালিডেটর যুক্ত করা হচ্ছে।
    this.userForm = new FormGroup({
      name: new FormControl('', Validators.required),
      email: new FormControl('', [Validators.required, Validators.email]),
      age: new FormControl('', [Validators.required, Validators.min(18)]),
    });
  }

  onSubmit() {
    if (this.userForm.valid) {
      console.log(this.userForm.value);
    }
  }
}

এখানে, userForm একটি FormGroup যা ৩টি FormControl (name, email, এবং age) নিয়ে গঠিত। Validators ব্যবহার করে ফিল্ডের জন্য ভ্যালিডেশন চেক করা হয়েছে।

FormControl

FormControl হলো একটি একক ইনপুট কন্ট্রোল যা Angular ফর্মে ব্যবহারকারী দ্বারা প্রদত্ত মান এবং তার স্টেট (যেমন, প্রিসেট মান, ডির্টি, প্রিস্টিন, টাচড, আনটাচড ইত্যাদি) সুরক্ষিত করে। এটি একটি সিঙ্গেল ভ্যালু ধারণ করে এবং সাধারণত FormGroup এর ভিতরে ব্যবহার করা হয়।

FormControl এর উদাহরণ:

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

@Component({
  selector: 'app-email-form',
  templateUrl: './email-form.component.html',
})
export class EmailFormComponent {
  emailControl: FormControl;

  constructor() {
    // FormControl ইনস্ট্যান্স তৈরি
    this.emailControl = new FormControl('', [Validators.required, Validators.email]);
  }

  onSubmit() {
    if (this.emailControl.valid) {
      console.log(this.emailControl.value);
    }
  }
}

এখানে, emailControl একটি FormControl যা email ইনপুটের জন্য ব্যবহৃত হয়। ভ্যালিডেশন প্রয়োগ করা হয়েছে যাতে ইনপুটটি অবশ্যই একটি সঠিক ইমেইল ঠিকানা হয়।

FormGroup এবং FormControl এর মধ্যে পার্থক্য

• FormGroup হল একাধিক FormControl বা অন্য FormGroup এর একটি গ্রুপ। এটি একটি ফর্মের বিভিন্ন ক্ষেত্রকে একত্রিত করে এবং তাদের একটি ইউনিট হিসেবে পরিচালনা করতে সহায়ক হয়।
• FormControl একটি একক ইনপুট ফিল্ডের মান এবং তার স্টেট (যেমন টাচড, ডির্টি ইত্যাদি) পরিচালনা করে।

Form Group এর সাথে ডেটা ম্যানিপুলেশন

আপনি FormGroup এর ডেটা অ্যাক্সেস করতে পারেন এবং সেটিকে পরিবর্তন করতে পারেন:

FormGroup এর ডেটা অ্যাক্সেস:

console.log(this.userForm.value);  // এটি ফর্মের সব ভ্যালু দেখাবে।

FormControl এর ভ্যালু আপডেট:

this.userForm.controls['name'].setValue('John Doe');

এখানে, setValue মেথড ব্যবহার করে FormControl এর মান পরিবর্তন করা হয়েছে।

ভ্যালিডেশন

Angular Reactive Forms এ FormControl এবং FormGroup এর জন্য আপনি বিভিন্ন ধরনের ভ্যালিডেশন প্রয়োগ করতে পারেন:

সিঙ্গেল কন্ট্রোল ভ্যালিডেশন:

new FormControl('', Validators.required);

একাধিক কন্ট্রোল ভ্যালিডেশন:

new FormControl('', [Validators.required, Validators.email]);

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

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

function forbiddenNameValidator(control: AbstractControl): ValidationErrors | null {
  const forbidden = /admin/i.test(control.value);
  return forbidden ? { forbiddenName: { value: control.value } } : null;
}

new FormControl('', [forbiddenNameValidator]);

এখানে, একটি কাস্টম ভ্যালিডেটর তৈরি করা হয়েছে যা "admin" শব্দটি ইনপুটে থাকলে সেটি অবৈধ হিসেবে চিহ্নিত করবে।

ফর্ম সাবমিশন

ফর্ম সাবমিট করার সময়, আপনি ফর্মের ভ্যালিডিটি চেক করে ডেটা প্রসেস করতে পারেন। নিচের কোডটি একটি সাধারণ উদাহরণ:

<form [formGroup]="userForm" (ngSubmit)="onSubmit()">
  <input formControlName="name" placeholder="Name">
  <input formControlName="email" placeholder="Email">
  <input formControlName="age" placeholder="Age">
  <button type="submit" [disabled]="!userForm.valid">Submit</button>
</form>

এখানে, ngSubmit ইভেন্ট ফর্ম সাবমিট হওয়ার পর onSubmit() মেথডটি কল করবে। [disabled]="!userForm.valid" দিয়ে সাবমিট বাটনটি শুধুমাত্র ফর্মের ভ্যালিড হলে অ্যাকটিভ হবে।

সারাংশ

FormGroup এবং FormControl Angular Reactive Forms-এ ফর্ম ডেটা এবং তার ভ্যালিডেশন পরিচালনা করতে ব্যবহৃত হয়। FormGroup একাধিক FormControl বা FormGroup এর একটি গ্রুপ হিসেবে কাজ করে, এবং FormControl একক ইনপুট ফিল্ডের মান এবং স্টেট পরিচালনা করে। এই দুটি ফিচার ফর্ম ম্যানেজমেন্টকে আরও সহজ এবং শক্তিশালী করে তোলে।

Angular-এ ফর্ম সাবমিশন হ্যান্ডলিং একটি গুরুত্বপূর্ণ প্রক্রিয়া, যেখানে ইউজার ইনপুট সংগ্রহ করে, যাচাই করা হয় এবং তারপর সার্ভারে পাঠানো হয়। Angular দুই ধরনের ফর্ম হ্যান্ডলিং সমর্থন করে:

1. Template-driven forms
2. Reactive forms

এখানে আমরা দুইটি পদ্ধতির মধ্যে ফর্ম সাবমিশন হ্যান্ডলিং সম্পর্কে বিস্তারিত আলোচনা করব।

Template-driven Forms

Template-driven forms হলো একটি সরল পদ্ধতি যেখানে ফর্মের লজিক এবং কন্ট্রোলের অধিকাংশ অংশ টেম্পলেটের মধ্যেই থাকে। এতে কম কোড লাগে, এবং এটি ছোট বা সহজ ফর্মের জন্য উপযুক্ত।

Template-driven Form তৈরি

1. FormModule আমদানি করুন:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { AppComponent } from './app.component';

@NgModule({
  imports:      [ BrowserModule, FormsModule ],
  declarations: [ AppComponent ],
  bootstrap:    [ AppComponent ]
})
export class AppModule { }

2. HTML টেম্পলেট:

<form (ngSubmit)="onSubmit()" #userForm="ngForm">
  <label for="name">Name:</label>
  <input type="text" id="name" name="name" ngModel required>

  <label for="email">Email:</label>
  <input type="email" id="email" name="email" ngModel required>

  <button type="submit" [disabled]="!userForm.form.valid">Submit</button>
</form>

এখানে:

• ngSubmit ডিরেক্টিভ ব্যবহার করা হয়েছে ফর্ম সাবমিশনের জন্য।
• ngModel ব্যবহার করে ফর্ম ইনপুটের মধ্যে ডেটা বাইন্ডিং করা হচ্ছে।
• required ভ্যালিডেশন দেওয়া হয়েছে ইনপুট ফিল্ডে।

3. কম্পোনেন্ট কোড:

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html'
})
export class AppComponent {
  onSubmit() {
    alert('Form submitted!');
  }
}

এখানে, onSubmit() মেথডটি ফর্মের ডেটা প্রসেস করতে বা সাবমিট করতে ব্যবহৃত হয়।

Reactive Forms

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

Reactive Form তৈরি

1. ReactiveFormsModule আমদানি করুন:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { ReactiveFormsModule } from '@angular/forms';
import { AppComponent } from './app.component';

@NgModule({
  imports:      [ BrowserModule, ReactiveFormsModule ],
  declarations: [ AppComponent ],
  bootstrap:    [ AppComponent ]
})
export class AppModule { }

2. কম্পোনেন্ট কোড (Reactive Form):

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html'
})
export class AppComponent {
  userForm: FormGroup;

  constructor(private fb: FormBuilder) {
    this.userForm = this.fb.group({
      name: ['', Validators.required],
      email: ['', [Validators.required, Validators.email]]
    });
  }

  onSubmit() {
    if (this.userForm.valid) {
      console.log(this.userForm.value);
      alert('Form submitted successfully!');
    } else {
      alert('Please fill out all fields correctly.');
    }
  }
}

3. HTML টেম্পলেট:

<form [formGroup]="userForm" (ngSubmit)="onSubmit()">
  <label for="name">Name:</label>
  <input type="text" id="name" formControlName="name">

  <label for="email">Email:</label>
  <input type="email" id="email" formControlName="email">

  <button type="submit" [disabled]="!userForm.valid">Submit</button>
</form>

এখানে:

• FormGroup এবং FormControl ব্যবহার করে ফর্ম কন্ট্রোল তৈরি করা হয়েছে।
• formControlName ডিরেক্টিভ ব্যবহার করে ফর্ম ইনপুটের সাথে কন্ট্রোল যুক্ত করা হয়েছে।
• ফর্মের সাবমিশন কেবল তখনই সম্ভব হবে যখন ফর্মটি ভ্যালিড হবে (userForm.valid)।

ফর্ম সাবমিশন হ্যান্ডলিং প্রক্রিয়া

1. ফর্মের ভ্যালিডেশন:
   • Angular ফর্মে ভ্যালিডেশন যোগ করা যায় সহজেই। আপনি চাইলে required, email, minlength, maxlength ইত্যাদি ভ্যালিডেশন ব্যবহার করতে পারেন। Reactive ফর্মে ভ্যালিডেশন প্রোগ্রামেটিকভাবে এবং Template-driven ফর্মে HTML অ্যাট্রিবিউট হিসাবে ব্যবহৃত হয়।
2. সাবমিশন সাবধানতা:
   • ফর্মের সাবমিশন ঘটানোর আগে, Angular ফর্মের valid বা invalid অবস্থা চেক করা উচিত। শুধু ভ্যালিড ফর্ম সাবমিট করা উচিত, অন্যথায় ব্যবহারকারীকে ইনপুটের ভুল জানানোর জন্য প্রয়োজনীয় বার্তা দেখানো যেতে পারে।
3. ডেটা প্রসেসিং:
   • সাবমিশনের পরে, আপনি ফর্মের ডেটা নিয়ে সার্ভারে পাঠাতে পারেন, বা অন্য কোন প্রসেসিং করতে পারেন।

সারাংশ

Angular-এ ফর্ম সাবমিশন হ্যান্ডলিং দুটি প্রধান পদ্ধতিতে করা যায়: Template-driven forms এবং Reactive forms। Template-driven forms সহজ ও ছোট ফর্মের জন্য উপযুক্ত, যেখানে Reactive forms বড় ও জটিল ফর্মের জন্য বেশি কার্যকর। উভয় পদ্ধতিতে ফর্মের ডেটা ভ্যালিডেশন এবং সাবমিশন হ্যান্ডলিং খুবই সহজ এবং কার্যকর।