Reactive Forms এবং Template Driven Forms

Ionic (এবং Angular) অ্যাপে ফর্ম তৈরি করার জন্য দুইটি প্রধান পদ্ধতি রয়েছে: Reactive Forms এবং Template Driven Forms। এই দুটি পদ্ধতির মধ্যে কিছু মূল পার্থক্য রয়েছে এবং প্রতি পদ্ধতির নিজস্ব সুবিধা এবং ব্যবহারের ক্ষেত্রে উপযোগিতা আছে। আসুন, বিস্তারিতভাবে এই দুটি পদ্ধতির তুলনা করি।

1. Template Driven Forms

Template Driven Forms হল Angular এর একটি সহজ এবং declarative পদ্ধতি, যেখানে ফর্মের স্ট্রাকচার এবং লজিক মূলত HTML টেমপ্লেটে থাকে এবং Angular ফর্মের মডেলটি স্বয়ংক্রিয়ভাবে ম্যানেজ করে।

১.১ কীভাবে কাজ করে:

• HTML টেমপ্লেটের মধ্যে ফর্ম কন্ট্রোল সংজ্ঞায়িত করা হয়।
• Angular ডিরেকটিভ (যেমন: ngModel, #form) ব্যবহার করে ফর্মের ভ্যালিডেশন এবং অন্যান্য লজিক হ্যান্ডল করা হয়।
• NgModel ডিরেকটিভের মাধ্যমে ফর্ম কন্ট্রোলের মানকে মডেলের সাথে ব্যান্ড করা হয়।

১.২ ফর্ম তৈরি করা

<form #myForm="ngForm" (ngSubmit)="onSubmit(myForm)">
  <ion-item>
    <ion-label>First Name</ion-label>
    <ion-input type="text" name="firstName" ngModel required></ion-input>
  </ion-item>
  
  <ion-item>
    <ion-label>Last Name</ion-label>
    <ion-input type="text" name="lastName" ngModel required></ion-input>
  </ion-item>

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

১.৩ ফর্মের মডেল এবং সাবমিট

onSubmit(form: NgForm) {
  console.log(form.value);  // The form value
  console.log(form.valid);  // Whether the form is valid
}

১.৪ ফায়দা:

• সহজ এবং কমপ্লেক্সিটি কম।
• দ্রুত এবং declarative স্টাইলের কারণে ছোট প্রোজেক্টের জন্য আদর্শ।
• কম কোড লেখার প্রয়োজন।
• Angular এর built-in ফর্ম টুলস এবং ভ্যালিডেশন ব্যবহার করা সহজ।

১.৫ সীমাবদ্ধতা:

• বড় এবং জটিল ফর্ম ম্যানেজ করা একটু কঠিন হতে পারে।
• ডাটা এবং ভ্যালিডেশন ম্যানেজমেন্ট কম ফ্লেক্সিবল।
• কমপ্লেক্স ভ্যালিডেশন এবং ডাইনামিক ফর্ম কন্ট্রোলের জন্য আরো কোড প্রয়োজন।

2. Reactive Forms

Reactive Forms হল Angular এর একটি বেশি স্কেলেবল এবং প্রোগ্রাম্যাটিক পদ্ধতি, যেখানে ফর্মের মডেলটি TypeScript কোডে থাকে এবং ফর্ম কন্ট্রোল এবং ভ্যালিডেশন সম্পূর্ণভাবে কোডের মাধ্যমে ম্যানেজ করা হয়। এই পদ্ধতিতে, Angular এর FormControl, FormGroup, এবং FormArray ব্যবহার করা হয়।

২.১ কীভাবে কাজ করে:

• ফর্ম কন্ট্রোলগুলি TypeScript কোডে তৈরি এবং ম্যানেজ করা হয়।
• ভ্যালিডেশন, কন্ট্রোল অ্যাড এবং ডায়নামিক ফর্ম কন্ট্রোলের জন্য Angular API ব্যবহার করা হয়।
• ফর্ম ডাটা এবং স্টেট খুব সহজে ম্যানিপুলেট করা যায়।

২.২ ফর্ম তৈরি করা

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

@Component({
  selector: 'app-reactive-form',
  templateUrl: 'reactive-form.page.html',
  styleUrls: ['reactive-form.page.scss']
})
export class ReactiveFormPage {
  myForm: FormGroup;

  constructor() {
    this.myForm = new FormGroup({
      firstName: new FormControl('', Validators.required),
      lastName: new FormControl('', Validators.required)
    });
  }

  onSubmit() {
    console.log(this.myForm.value);  // The form value
    console.log(this.myForm.valid);  // Whether the form is valid
  }
}

২.৩ HTML টেমপ্লেট

<form [formGroup]="myForm" (ngSubmit)="onSubmit()">
  <ion-item>
    <ion-label>First Name</ion-label>
    <ion-input type="text" formControlName="firstName"></ion-input>
  </ion-item>
  
  <ion-item>
    <ion-label>Last Name</ion-label>
    <ion-input type="text" formControlName="lastName"></ion-input>
  </ion-item>

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

২.৪ ফায়দা:

• ডাইনামিক ফর্ম কন্ট্রোল এবং ভ্যালিডেশন সহজে পরিচালনা করা যায়।
• বড় অ্যাপ্লিকেশন এবং জটিল ফর্মের জন্য উপযুক্ত।
• পুরো ফর্মটি TypeScript কোডে থাকে, তাই মডেল এবং ফর্ম কন্ট্রোলের সম্পূর্ণ নিয়ন্ত্রণ থাকে।
• জটিল বা ডাইনামিক ফর্ম, কন্ডিশনাল লজিক এবং ভ্যালিডেশন সহজে বাস্তবায়ন করা যায়।

২.৫ সীমাবদ্ধতা:

• কোড বেশি এবং ডিক্লেরেটিভ স্টাইলের তুলনায় কিছুটা জটিল।
• ছোট প্রোজেক্টের জন্য খুব বেশি কাজ হতে পারে, যেখানে template driven forms যথেষ্ট।

3. তুলনা:

সারাংশ

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

প্রোজেক্টের আকার এবং প্রয়োজন অনুসারে আপনি এই দুটি পদ্ধতির মধ্যে যেকোনো একটি পদ্ধতি ব্যবহার করতে পারেন।