Angular-এ Reactive Forms এর মধ্যে FormArray একটি বিশেষ ফিচার, যা ডায়নামিক এবং ভ্যারিয়েবল আকারের ফর্ম কন্ট্রোল তৈরি করতে সহায়তা করে। FormArray মূলত এমন একটি ফর্ম কন্টেইনার, যেখানে আপনি একাধিক ফর্ম কন্ট্রোল যুক্ত করতে পারেন এবং এটি ফর্মের প্রতিটি কন্ট্রোলের জন্য একটি অ্যারে ধারণ করে।

Reactive Forms এর মধ্যে FormArray ব্যবহৃত হয় যখন আপনাকে একই ধরনের একাধিক ইনপুট ফিল্ডের মান সংগ্রহ করতে হয়, যেমন একাধিক ইমেইল বা ফোন নাম্বার ইনপুট করা।

FormArray এর মৌলিক ধারণা

FormArray একটি অ্যারে ধারণ করে, যেখানে একাধিক FormControl, FormGroup অথবা আরও অন্য FormArray থাকতে পারে। এটি আপনাকে ফর্মের কন্ট্রোলগুলো একটি ডাইনামিক পদ্ধতিতে পরিচালনা করতে দেয়, এবং আপনি runtime এ কন্ট্রোল যোগ বা মুছে ফেলতে পারেন।

FormArray তৈরি করা

Reactive Forms ব্যবহারে FormArray তৈরি করতে প্রথমে FormBuilder এবং FormArray ব্যবহার করতে হবে।

Step 1: ReactiveFormsModule ইম্পোর্ট করা

প্রথমে, AppModule-এ ReactiveFormsModule ইম্পোর্ট করতে হবে:

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

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

Step 2: FormArray তৈরি করা

Angular Reactive Forms ব্যবহার করে FormArray তৈরি করা হয় এবং ফর্মের কন্ট্রোলগুলো যোগ করা হয়। এখানে একটি উদাহরণ দেওয়া হলো যেখানে FormArray ব্যবহার করে একাধিক email ইনপুট ফিল্ড তৈরি করা হচ্ছে:

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

@Component({
  selector: 'app-root',
  template: `
    <form [formGroup]="myForm" (ngSubmit)="onSubmit()">
      <div formArrayName="emails">
        <div *ngFor="let email of emailControls(); let i = index">
          <input [formControlName]="i" placeholder="Enter Email" />
          <button (click)="removeEmail(i)">Remove</button>
        </div>
      </div>
      <button type="button" (click)="addEmail()">Add Email</button>
      <button type="submit" [disabled]="!myForm.valid">Submit</button>
    </form>
  `
})
export class AppComponent implements OnInit {
  myForm: FormGroup;

  constructor(private fb: FormBuilder) {}

  ngOnInit() {
    this.myForm = this.fb.group({
      emails: this.fb.array([this.createEmail()])  // Create initial FormArray with one email
    });
  }

  get emails(): FormArray {
    return this.myForm.get('emails') as FormArray;
  }

  emailControls() {
    return (this.myForm.get('emails') as FormArray).controls;
  }

  createEmail(): FormGroup {
    return this.fb.group({
      email: ['', [Validators.required, Validators.email]]
    });
  }

  addEmail() {
    this.emails.push(this.createEmail());
  }

  removeEmail(i: number) {
    this.emails.removeAt(i);
  }

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

FormArray এর বিভিন্ন মেথড

Angular এর FormArray ক্লাসে কিছু গুরুত্বপূর্ণ মেথড রয়েছে যেগুলি ব্যবহার করে আপনি ফর্ম কন্ট্রোলগুলোকে ম্যানিপুলেট করতে পারবেন:

১. push()

নতুন ফর্ম কন্ট্রোল যোগ করার জন্য push() মেথড ব্যবহার করা হয়:

this.emails.push(this.createEmail());  // Adds a new email FormGroup

২. removeAt()

একটি নির্দিষ্ট ইনডেক্সে থাকা ফর্ম কন্ট্রোল মুছে ফেলতে removeAt() মেথড ব্যবহার করা হয়:

this.emails.removeAt(index);  // Removes the email FormGroup at the specified index

৩. clear()

ফর্ম অ্যারেটি সম্পূর্ণভাবে ফাঁকা করতে clear() মেথড ব্যবহার করা হয়:

this.emails.clear();  // Removes all email FormGroups

৪. controls

FormArray এর মধ্যে থাকা সমস্ত কন্ট্রোল অ্যাক্সেস করতে controls প্রোপার্টি ব্যবহার করা হয়:

let controls = this.emails.controls;  // Accesses all form controls inside FormArray

FormArray এর সাথে Validations

FormArray এর মধ্যে যে কন্ট্রোলগুলো রয়েছে, সেগুলির উপর validation অ্যাপ্লাই করা যেতে পারে। এক্ষেত্রে, প্রতিটি কন্ট্রোলের জন্য আলাদা আলাদা Validators ব্যবহার করা হয়।

উদাহরণ: Required এবং Email Validation

createEmail(): FormGroup {
  return this.fb.group({
    email: ['', [Validators.required, Validators.email]]  // Validation added
  });
}

সারাংশ

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

FormArray আপনাকে Angular অ্যাপ্লিকেশনের ফর্মস তৈরি ও ম্যানেজমেন্টে আরও নমনীয়তা এবং শক্তি প্রদান করে।