Mobile App Development Ionic এর মধ্যে Form Handling এবং Validation গাইড ও নোট

Form Handling এবং Validation হল Ionic অ্যাপ্লিকেশন তৈরির একটি গুরুত্বপূর্ণ অংশ, যা ব্যবহারকারীর ইনপুট গ্রহণ এবং যাচাইয়ের জন্য ব্যবহৃত হয়। Ionic অ্যাপে ফর্ম পরিচালনা করতে Reactive Forms এবং Template-driven Forms দুটি প্রধান পদ্ধতি রয়েছে। এই পদ্ধতিগুলোর মাধ্যমে আপনি ফর্মের ডেটা সংগ্রহ এবং বৈধতা যাচাই (validation) করতে পারবেন।

১. Ionic Form Handling

১.১ Template-driven Forms

Template-driven forms হল এমন একটি পদ্ধতি যেখানে ফর্মের নিয়ন্ত্রণ মূলত HTML টেমপ্লেটের মাধ্যমে করা হয়। এটি ছোট এবং সহজ ফর্মের জন্য উপযুক্ত।

Template-driven Form Example:

1. HTML ফর্ম:

<ion-header>
  <ion-toolbar>
    <ion-title>Login</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>
  <form #loginForm="ngForm" (ngSubmit)="onSubmit(loginForm)">
    <ion-item>
      <ion-label position="floating">Username</ion-label>
      <ion-input type="text" name="username" ngModel required></ion-input>
    </ion-item>

    <ion-item>
      <ion-label position="floating">Password</ion-label>
      <ion-input type="password" name="password" ngModel required></ion-input>
    </ion-item>

    <ion-button expand="full" type="submit" [disabled]="!loginForm.valid">
      Login
    </ion-button>
  </form>
</ion-content>

2. TypeScript:

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

@Component({
  selector: 'app-login',
  templateUrl: 'login.page.html',
  styleUrls: ['login.page.scss'],
})
export class LoginPage {

  onSubmit(form: NgForm) {
    if (form.valid) {
      console.log('Form Submitted!', form.value);
    } else {
      console.log('Form is invalid');
    }
  }
}

এখানে:

• ngModel: এটি দুই-way ডেটা বাইন্ডিং নিশ্চিত করে।
• required: এটি ফর্ম ফিল্ডকে আবশ্যক (required) করে তোলে।
• ngSubmit: ফর্ম সাবমিট হলে এটি ট্রিগার হয়।

১.২ Reactive Forms

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

Reactive Form Example:

1. AppModule: প্রথমে ReactiveFormsModule যোগ করতে হবে।

import { NgModule } from '@angular/core';
import { ReactiveFormsModule } from '@angular/forms';

@NgModule({
  imports: [ReactiveFormsModule],
  ...
})
export class AppModule {}

2. HTML ফর্ম:

<ion-header>
  <ion-toolbar>
    <ion-title>Reactive Login</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>
  <form [formGroup]="loginForm" (ngSubmit)="onSubmit()">
    <ion-item>
      <ion-label position="floating">Username</ion-label>
      <ion-input type="text" formControlName="username"></ion-input>
    </ion-item>

    <ion-item>
      <ion-label position="floating">Password</ion-label>
      <ion-input type="password" formControlName="password"></ion-input>
    </ion-item>

    <ion-button expand="full" type="submit" [disabled]="!loginForm.valid">
      Login
    </ion-button>
  </form>
</ion-content>

3. TypeScript:

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

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

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

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

এখানে:

• formControlName: এটি ফর্মের কন্ট্রোলের সাথে যুক্ত হয়।
• FormGroup: এটি ফর্মের পুরো গ্রুপের জন্য একটি কন্টেইনার, যা ফর্ম কন্ট্রোলের একটি সেট ধারণ করে।
• Validators.required: এটি ফিল্ডকে আবশ্যক করে তোলে।

২. Form Validation

২.১ Built-in Validators

Ionic ফর্মে বিল্ট-ইন ভ্যালিডেটর ব্যবহার করা যায়, যেমন:

• Validators.required: এটি ইনপুট ফিল্ডের জন্য আবশ্যকতা চেক করে।
• Validators.email: এটি ইনপুট ফিল্ডের জন্য ইমেল ফরম্যাট চেক করে।
• Validators.minLength(minLength): এটি ইনপুট ফিল্ডে নির্দিষ্ট সংখ্যক অক্ষর থাকতে হবে বলে চেক করে।
• Validators.pattern(pattern): এটি নির্দিষ্ট প্যাটার্ন অনুযায়ী ইনপুট চেক করে।

Example (Reactive Form):

this.loginForm = this.fb.group({
  username: ['', [Validators.required, Validators.minLength(4)]],
  password: ['', [Validators.required, Validators.minLength(6)]]
});

২.২ Custom Validators

আপনি কাস্টম ভ্যালিডেটরও তৈরি করতে পারেন, যদি আপনার বিশেষ কোনো চেক প্রয়োজন হয়।

Custom Validator Example:

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

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

// FormControl এর ক্ষেত্রে এই কাস্টম ভ্যালিডেটর ব্যবহার করা যেতে পারে:
this.loginForm = this.fb.group({
  username: ['', [Validators.required, forbiddenNameValidator]],
  password: ['', Validators.required]
});

৩. Displaying Validation Errors

ফর্ম ভ্যালিডেশন চেক করা হলে, আপনি ব্যবহারকারীকে ভুল তথ্য সম্পর্কে জানাতে পারেন। এর জন্য আপনি ngIf ব্যবহার করতে পারেন।

Example:

<ion-item>
  <ion-label position="floating">Username</ion-label>
  <ion-input type="text" formControlName="username"></ion-input>
</ion-item>

<div *ngIf="loginForm.get('username').invalid && loginForm.get('username').touched">
  <span *ngIf="loginForm.get('username').hasError('required')">Username is required.</span>
  <span *ngIf="loginForm.get('username').hasError('minlength')">Username must be at least 4 characters.</span>
</div>

এখানে:

• hasError: নির্দিষ্ট ভ্যালিডেশন এরর চেক করে।
• touched: ফিল্ডটি ইউজার দ্বারা টাচ করা হয়েছে কিনা চেক করে।

সারাংশ

Ionic Form Handling এবং Validation হল ফর্ম ডেটা সংগ্রহ এবং বৈধতা যাচাইয়ের জন্য গুরুত্বপূর্ণ বিষয়। Template-driven forms সহজ ফর্মের জন্য এবং Reactive forms জটিল এবং ডাইনামিক ফর্মের জন্য ব্যবহৃত হয়। Ionic অ্যাপে আপনি বিল্ট-ইন এবং কাস্টম ভ্যালিডেটর ব্যবহার করতে পারেন ফর্ম ভ্যালিডেশন নিশ্চিত করার জন্য, এবং ব্যবহারকারীকে সঠিক ইনপুট দেওয়ার জন্য প্রয়োজনীয় নির্দেশনা দিতে পারেন।

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: এটি বড় এবং জটিল ফর্মের জন্য আদর্শ, যেখানে প্রোগ্রাম্যাটিক ভ্যালিডেশন, ডাইনামিক ফর্ম কন্ট্রোল এবং টেস্টিংয়ের প্রয়োজন হয়।

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

Form Validation এবং Error Handling ওয়েব ডেভেলপমেন্টের দুটি গুরুত্বপূর্ণ অংশ। ব্যবহারকারীর ইনপুট সঠিকভাবে যাচাই করা এবং ত্রুটিগুলির সঠিকভাবে হ্যান্ডেল করা অ্যাপ্লিকেশনের ইউজার এক্সপেরিয়েন্স (UX) উন্নত করতে সহায়ক। এখানে Form Validation এবং Error Handling সম্পর্কে বিস্তারিত আলোচনা করা হলো।

১. Form Validation

Form Validation হলো ব্যবহারকারীর দ্বারা পূর্ণ করা ফর্মের ইনপুট যাচাই করা। এটি নিশ্চিত করে যে ইনপুটগুলি নির্দিষ্ট ফর্ম্যাট এবং শর্ত পূর্ণ করছে কিনা।

Form Validation এর প্রয়োজনীয়তা:

• সঠিক ডেটা সংগ্রহ: সঠিক ইনপুট পাওয়া যায় যাতে সার্ভারে সঠিক ডেটা পাঠানো যায়।
• ব্যবহারকারী অভিজ্ঞতা: ব্যবহারকারীর ভুল ইনপুটের জন্য একটি পরিষ্কার বার্তা প্রদান করা, যা তাদের দ্রুত এবং সঠিক ইনপুট দিতে সহায়তা করে।
• অ্যাকশন ও কমপ্লায়েন্স: কিছু ক্ষেত্রে, ফর্মে ইনপুটের নির্দিষ্ট নিয়ম থাকতে পারে (যেমন: ইমেইল ফরম্যাট, বয়স, টেলিফোন নম্বর)।

Form Validation এর প্রকার:

1. Client-Side Validation: এটি ব্রাউজারের সাইডে চলে এবং ইনপুট যাচাই করে ফর্ম সাবমিট করার আগে। এটি দ্রুত এবং ইন্টারঅ্যাকটিভ, তবে নিরাপত্তা জন্য একে সার্ভার সাইড ভ্যালিডেশনের সঙ্গে একত্রে ব্যবহার করা উচিত।
2. Server-Side Validation: এটি সার্ভারে চলে এবং ব্যবহারকারীর ইনপুট যাচাই করে। এটি নিরাপদ, কারণ ব্যবহারকারী সরাসরি ইনপুট পরিবর্তন করতে পারে না।

Form Validation এর উদাহরণ (Ionic)

<ion-item>
  <ion-label position="floating">Email</ion-label>
  <ion-input type="email" [(ngModel)]="email" required></ion-input>
</ion-item>

<ion-button (click)="submitForm()">Submit</ion-button>

TypeScript (Angular Example):

export class MyFormComponent {
  email: string;

  submitForm() {
    if (!this.email || !this.email.includes('@')) {
      alert("Please enter a valid email.");
      return;
    }
    // proceed with form submission
  }
}

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

Common Validation Types:

• Required: ইনপুট ফিল্ডে কিছু না থাকলে সাবমিট করা যাবে না।
• Pattern Matching: ইনপুট একটি নির্দিষ্ট প্যাটার্ন অনুসরণ করতে হবে, যেমন ইমেইল, ফোন নম্বর ইত্যাদি।
• Min/Max Length: ইনপুটের দৈর্ঘ্য একটি নির্দিষ্ট সীমার মধ্যে হতে হবে।
• Custom Validation: নিজের কাস্টম লজিক অনুসারে ইনপুট যাচাই করা।

২. Error Handling

Error Handling হলো অ্যাপ্লিকেশন চলাকালীন সময়ে সম্ভাব্য ত্রুটিগুলির সঠিকভাবে মোকাবিলা করা। এটি ব্যবহারকারীকে সঠিকভাবে নির্দেশ দেয় যাতে তারা বুঝতে পারে কোনো সমস্যা ঘটেছে এবং কিভাবে এটি সমাধান করতে হবে।

Error Handling এর প্রকার:

1. Client-Side Error Handling: ব্যবহারকারীর ব্রাউজারে ঘটে এমন ত্রুটিগুলি হ্যান্ডেল করা। উদাহরণস্বরূপ, ফর্ম ইনপুট ভুল হলে বা অ্যাপ্লিকেশন ক্র্যাশ হলে ব্যবহারকারীর কাছে বার্তা প্রদর্শন করা।
2. Server-Side Error Handling: সার্ভারে ঘটে এমন ত্রুটিগুলির সঠিকভাবে মোকাবিলা করা। উদাহরণস্বরূপ, ডেটাবেস কানেকশন সমস্যার জন্য একটি ত্রুটি বার্তা তৈরি করা।

Error Handling এর কৌশল:

1. Try-Catch Block: JavaScript তে সাধারণত try-catch ব্লক ব্যবহার করে ত্রুটি হ্যান্ডেল করা হয়। এই ব্লকটি কোন কোড ব্লক চালানোর সময় ত্রুটি ঘটে থাকলে সেটি ক্যাচ করে।

   উদাহরণ (JavaScript):

   try {
     // Some code that may throw an error
     let result = someFunction();
   } catch (error) {
     console.error("Error occurred: ", error.message);
     alert("An error occurred while processing your request.");
   }
   

2. Promises and Async-Await: অ্যাসিঙ্ক্রোনাস কোড পরিচালনা করার জন্য Promises এবং async-await ব্যবহার করা হয়।

   উদাহরণ (Async-Await):

   async function submitForm() {
     try {
       const response = await apiService.submitData(formData);
       console.log('Form submitted successfully:', response);
     } catch (error) {
       console.error('Submission failed:', error.message);
       alert('An error occurred during form submission.');
     }
   }
   

3. Global Error Handlers: সব ত্রুটির জন্য একটি সাধারণ হ্যান্ডলার তৈরি করা যেতে পারে যা অ্যাপ্লিকেশনের সব জায়গায় কাজ করবে।

   উদাহরণ (Angular Error Handler):

   import { ErrorHandler } from '@angular/core';
   
   export class GlobalErrorHandler implements ErrorHandler {
     handleError(error: any) {
       console.error('An unexpected error occurred:', error);
       alert('Something went wrong. Please try again later.');
     }
   }
   

4. Displaying Error Messages: ব্যবহারকারীকে সঠিকভাবে ত্রুটি বার্তা দেখানো গুরুত্বপূর্ণ, যাতে তারা বুঝতে পারে কোথায় সমস্যা হয়েছে এবং কীভাবে তা সমাধান করবেন।

   উদাহরণ (Error Message Display):

   <div *ngIf="formError" class="error-message">
     <p>{{ formError }}</p>
   </div>
   

   TypeScript:

   formError: string = '';
   
   submitForm() {
     if (!this.email || !this.email.includes('@')) {
       this.formError = "Please enter a valid email address.";
       return;
     }
     this.formError = '';  // Clear error message if valid
   }
   

৩. Best Practices for Form Validation and Error Handling

1. User-Friendly Error Messages: ত্রুটি বার্তা এমনভাবে তৈরি করুন যাতে ব্যবহারকারী সহজেই বুঝতে পারে কী সমস্যা হয়েছে এবং কীভাবে তা সমাধান করা যেতে পারে।
2. Immediate Feedback: ইনপুট ফিল্ডে পরিবর্তন করার সঙ্গে সঙ্গে ব্যবহারকারীকে তাত্ক্ষণিক প্রতিক্রিয়া দিন (যেমন: ইমেইল সঠিক নয়, বা পাসওয়ার্ড ফিল্ডে ৬টি অক্ষর থাকতে হবে)।
3. Server-Side Validation: ক্লায়েন্ট সাইডের পাশাপাশি, অবশ্যই সার্ভার সাইড ভ্যালিডেশন ব্যবহার করুন।
4. Handle Unexpected Errors Gracefully: অ্যাপ্লিকেশন যদি কোনো অপ্রত্যাশিত ত্রুটিতে পড়ে, তবে ব্যবহারকারীদের জানাতে একটি সাধারণ এবং পরিষ্কার বার্তা প্রদর্শন করুন।

উপসংহার

Form Validation এবং Error Handling অ্যাপ্লিকেশন ডেভেলপমেন্টের গুরুত্বপূর্ণ অংশ। সঠিকভাবে ইনপুট যাচাই এবং ত্রুটি সঠিকভাবে মোকাবিলা করে, আপনি ব্যবহারকারীদের একটি ভাল অভিজ্ঞতা দিতে পারবেন। এই প্রক্রিয়াগুলির মাধ্যমে আপনি অ্যাপ্লিকেশনকে আরো নিরাপদ, স্থিতিশীল এবং ব্যবহারকারী বান্ধব করে তুলতে পারেন।

Angular ফর্ম ব্যবহারের সময় আপনি Custom Validators তৈরি করে নির্দিষ্ট শর্তের উপর ভিত্তি করে ইনপুট ভ্যালিডেশন করতে পারেন। Ionic অ্যাপ্লিকেশনে ফর্ম ভ্যালিডেশন অনেক সময় Reactive Forms অথবা Template-Driven Forms ব্যবহৃত হয়। এখানে আমরা কাস্টম ভ্যালিডেটর তৈরি করার প্রক্রিয়া দেখব, যা আপনি আপনার ফর্মে ব্যবহার করতে পারবেন।

১. Custom Validators: বেসিক ধারণা

একটি কাস্টম ভ্যালিডেটর হলো একটি ফাংশন যা Angular এর AbstractControl অবজেক্ট গ্রহণ করে এবং একটি ভ্যালিডেশন অবজেক্ট রিটার্ন করে। এটি একটি null বা {} অবজেক্ট রিটার্ন করতে পারে, যা নির্দেশ করে যে ফিল্ডটি ভ্যালিড, অথবা একটি ত্রুটির অবজেক্ট রিটার্ন করে, যদি কিছু ভুল থাকে।

২. Custom Validator তৈরি করা

২.১ Custom Validator ফাংশন তৈরি করা

ধরা যাক, আমরা একটি কাস্টম ভ্যালিডেটর তৈরি করতে চাই যা নিশ্চিত করবে যে ইউজার যে পাসওয়ার্ডটি ইনপুট করছে, তা কমপক্ষে ৮টি অক্ষরের হতে হবে এবং অন্তত একটি সংখ্যা থাকতে হবে।

প্রথমে একটি কাস্টম ভ্যালিডেটর ফাংশন তৈরি করি:

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

export function passwordValidator(): ValidatorFn {
  return (control: AbstractControl): ValidationErrors | null => {
    if (control.value) {
      const isValid = /^(?=.*[0-9])(?=.*[A-Za-z]).{8,}$/.test(control.value); // Min 8 characters with at least one number
      return isValid ? null : { 'passwordInvalid': true };
    }
    return null;
  };
}

এই ভ্যালিডেটরটি AbstractControl গ্রহণ করে এবং যদি পাসওয়ার্ড শর্তে পূর্ণ না হয় (৮টি অক্ষর এবং কমপক্ষে একটি সংখ্যা), তবে এটি একটি ত্রুটি অবজেক্ট { 'passwordInvalid': true } রিটার্ন করবে, অন্যথায় null রিটার্ন করবে।

২.২ Custom Validator ব্যবহার করা

এখন, আমরা এই কাস্টম ভ্যালিডেটরটি একটি ফর্ম কন্ট্রোলে ব্যবহার করব। উদাহরণস্বরূপ, একটি Reactive Form-এ পাসওয়ার্ড ফিল্ডের জন্য কাস্টম ভ্যালিডেটর ব্যবহার করা:

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

@Component({
  selector: 'app-login',
  templateUrl: './login.page.html',
  styleUrls: ['./login.page.scss'],
})
export class LoginPage {
  loginForm: FormGroup;

  constructor(private fb: FormBuilder) {
    this.loginForm = this.fb.group({
      password: ['', [Validators.required, passwordValidator()]], // Applying custom validator here
    });
  }

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

এখানে:

• passwordValidator() কাস্টম ভ্যালিডেটর ফাংশনটি ফর্ম কন্ট্রোলে ব্যবহৃত হয়েছে।
• Validators.required যুক্ত করা হয়েছে যাতে পাসওয়ার্ড ফিল্ডটি খালি না থাকে।

২.৩ Custom Validator এর ত্রুটি দেখানো

এখন, আপনি যদি ফর্মে কোনো ত্রুটি দেখতে চান, যেমন পাসওয়ার্ডটি অবৈধ হলে, আপনি এই ত্রুটিটি HTML টেমপ্লেটে দেখাতে পারেন:

<form [formGroup]="loginForm" (ngSubmit)="onSubmit()">
  <ion-item>
    <ion-label position="floating">Password</ion-label>
    <ion-input type="password" formControlName="password"></ion-input>
  </ion-item>
  <ion-text *ngIf="loginForm.get('password').hasError('passwordInvalid') && loginForm.get('password').touched">
    <p>Password must be at least 8 characters long and contain at least one number.</p>
  </ion-text>
  <ion-button expand="full" type="submit" [disabled]="!loginForm.valid">Submit</ion-button>
</form>

এখানে:

• hasError('passwordInvalid') চেক করা হচ্ছে পাসওয়ার্ডে যদি ত্রুটি থাকে।
• touched চেক করা হচ্ছে যে ফিল্ডটি ব্যবহারকারী দ্বারা স্পর্শ করা হয়েছে কিনা। এটি ত্রুটি শুধুমাত্র তখন দেখাবে যখন ফিল্ডটি স্পর্শ করা হবে এবং ত্রুটি দেখা যাবে।

৩. Multiple Custom Validators ব্যবহার করা

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

this.loginForm = this.fb.group({
  password: ['', [Validators.required, passwordValidator(), Validators.minLength(8)]],
});

এখানে, আমরা Validators.minLength(8) এর সাথে কাস্টম passwordValidator() যুক্ত করেছি।

৪. Template-driven Forms এ Custom Validator ব্যবহার

এছাড়া আপনি Template-driven Forms এও কাস্টম ভ্যালিডেটর ব্যবহার করতে পারেন। উদাহরণ:

৪.১ Template-driven Forms ফর্ম সেটআপ

<form #loginForm="ngForm" (ngSubmit)="onSubmit(loginForm)">
  <ion-item>
    <ion-label position="floating">Password</ion-label>
    <ion-input type="password" name="password" ngModel [passwordValidator]></ion-input>
  </ion-item>
  <ion-text *ngIf="loginForm.controls['password'].hasError('passwordInvalid') && loginForm.controls['password'].touched">
    <p>Password must be at least 8 characters long and contain at least one number.</p>
  </ion-text>
  <ion-button expand="full" type="submit" [disabled]="!loginForm.valid">Submit</ion-button>
</form>

৪.২ Directive তৈরি করা (Template-driven Forms)

Template-driven ফর্মে কাস্টম ভ্যালিডেটর ব্যবহার করতে একটি Directive তৈরি করতে হবে:

import { Directive } from '@angular/core';
import { NG_VALIDATORS, AbstractControl } from '@angular/forms';
import { passwordValidator } from './password.validator';

@Directive({
  selector: '[passwordValidator]',
  providers: [{ provide: NG_VALIDATORS, useExisting: PasswordValidatorDirective, multi: true }]
})
export class PasswordValidatorDirective {
  validate(control: AbstractControl) {
    return passwordValidator()(control);
  }
}

এখন এই ডিরেকটিভটি আপনি টেমপ্লেটে ব্যবহার করতে পারবেন।

সারাংশ

• Custom Validators ব্যবহার করে আপনি ফর্মের ইনপুট ভ্যালিডেশন করতে পারেন।
• কাস্টম ভ্যালিডেটরগুলো AbstractControl অবজেক্ট গ্রহণ করে, এবং একটি ত্রুটি অবজেক্ট অথবা null রিটার্ন করে।
• Reactive Forms এবং Template-driven Forms এ কাস্টম ভ্যালিডেটর ব্যবহৃত হতে পারে।
• কাস্টম ভ্যালিডেটর দিয়ে পাসওয়ার্ড, ইমেইল, নাম্বার ইত্যাদি ভ্যালিডেশন চেক করা সম্ভব।

এই প্রক্রিয়া অনুসরণ করে আপনি আপনার Ionic অ্যাপে কাস্টম ভ্যালিডেটর তৈরি ও প্রয়োগ করতে পারবেন।

Ionic ফ্রেমওয়ার্কে Input Fields এবং Form Submissions তৈরি করা সহজ এবং সরল। এখানে আমরা দেখব কিভাবে Ionic এ বিভিন্ন ধরনের ইনপুট ফিল্ড এবং ফর্ম তৈরি করতে হয়, এবং কিভাবে ফর্ম সাবমিট করার জন্য ডেটা সংগ্রহ করতে হয়।

১. Input Fields তৈরি করা

Ionic ফ্রেমওয়ার্কে বিভিন্ন ধরনের ইনপুট ফিল্ড যেমন text, password, email, number, checkbox, radio, select ইত্যাদি তৈরি করা যায়। এগুলি ব্যবহার করে আপনি একটি পূর্ণাঙ্গ ফর্ম তৈরি করতে পারেন।

১.১ Basic Input Field

নিম্নলিখিত উদাহরণে একটি সাধারণ text input ফিল্ড তৈরি করা হয়েছে:

<ion-item>
  <ion-label position="floating">Full Name</ion-label>
  <ion-input type="text" [(ngModel)]="fullName"></ion-input>
</ion-item>

• ion-label: ইনপুট ফিল্ডের জন্য লেবেল তৈরি করে।
• ion-input: ইনপুট ফিল্ডের জন্য ব্যবহৃত উপাদান।
• [(ngModel)]: ডেটা বাইন্ডিং যা ফর্মের ডেটাকে Angular মডেলের সাথে সংযুক্ত করে। এই ক্ষেত্রে, fullName একটি পরিবর্তনশীল যা ব্যবহারকারীর ইনপুট গ্রহণ করবে।

১.২ Password Input Field

<ion-item>
  <ion-label position="floating">Password</ion-label>
  <ion-input type="password" [(ngModel)]="password"></ion-input>
</ion-item>

এখানে type="password" দিয়ে পাসওয়ার্ড ইনপুট ফিল্ড তৈরি করা হয়েছে, যা ইনপুটের মানগুলো মাস্ক করবে।

১.৩ Email Input Field

<ion-item>
  <ion-label position="floating">Email</ion-label>
  <ion-input type="email" [(ngModel)]="email"></ion-input>
</ion-item>

এখানে type="email" দিয়ে ইমেল ইনপুট ফিল্ড তৈরি করা হয়েছে, যা স্বয়ংক্রিয়ভাবে ইমেল ঠিকানার যাচাই করবে।

১.৪ Number Input Field

<ion-item>
  <ion-label position="floating">Age</ion-label>
  <ion-input type="number" [(ngModel)]="age"></ion-input>
</ion-item>

এখানে type="number" দিয়ে সংখ্যা ইনপুট ফিল্ড তৈরি করা হয়েছে, যা শুধুমাত্র সংখ্যাই গ্রহণ করবে।

১.৫ Checkbox Input Field

<ion-item>
  <ion-label>Accept Terms and Conditions</ion-label>
  <ion-checkbox [(ngModel)]="isAccepted"></ion-checkbox>
</ion-item>

এখানে একটি চেকবক্স তৈরি করা হয়েছে যা isAccepted ভ্যালুর সাথে যুক্ত। ব্যবহারকারী চেকবক্সটি চেক করলে এটি true এবং না করলে false হয়ে যাবে।

১.৬ Radio Input Field

<ion-item>
  <ion-label>Gender</ion-label>
  <ion-radio-group [(ngModel)]="gender">
    <ion-item>
      <ion-label>Male</ion-label>
      <ion-radio value="male"></ion-radio>
    </ion-item>
    <ion-item>
      <ion-label>Female</ion-label>
      <ion-radio value="female"></ion-radio>
    </ion-item>
  </ion-radio-group>
</ion-item>

এখানে একটি radio group তৈরি করা হয়েছে যেখানে ব্যবহারকারী শুধুমাত্র একটিই অপশন নির্বাচন করতে পারবেন: Male অথবা Female।

১.৭ Select Input Field

<ion-item>
  <ion-label>Country</ion-label>
  <ion-select [(ngModel)]="selectedCountry">
    <ion-select-option value="US">United States</ion-select-option>
    <ion-select-option value="IN">India</ion-select-option>
    <ion-select-option value="UK">United Kingdom</ion-select-option>
  </ion-select>
</ion-item>

এখানে একটি select dropdown তৈরি করা হয়েছে যেখানে ব্যবহারকারী একটি দেশ নির্বাচন করতে পারবেন।

২. Form Submission

Ionic এ ফর্ম সাবমিট করতে হলে, ngSubmit ইভেন্ট ব্যবহার করা হয়। আপনি যেকোনো ইনপুট ফিল্ডে ডেটা সংগ্রহ করার পরে, ngSubmit দিয়ে ফর্মটি সাবমিট করতে পারবেন।

২.১ Simple Form Submission

<ion-header>
  <ion-toolbar>
    <ion-title>Registration Form</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>
  <form (ngSubmit)="submitForm()">
    <ion-item>
      <ion-label position="floating">Full Name</ion-label>
      <ion-input type="text" [(ngModel)]="fullName" name="fullName"></ion-input>
    </ion-item>

    <ion-item>
      <ion-label position="floating">Email</ion-label>
      <ion-input type="email" [(ngModel)]="email" name="email"></ion-input>
    </ion-item>

    <ion-item>
      <ion-label position="floating">Password</ion-label>
      <ion-input type="password" [(ngModel)]="password" name="password"></ion-input>
    </ion-item>

    <ion-button expand="full" type="submit">Submit</ion-button>
  </form>
</ion-content>

• ngSubmit: ফর্ম সাবমিট করার জন্য Angular এর বিল্ট-ইন ইভেন্ট।
• [(ngModel)]: ইনপুট ফিল্ডের ডেটা মডেলের সাথে বাইন্ড করা হচ্ছে, যাতে ফর্মে পরিবর্তিত ডেটা রাখা যায়।

২.২ Form Submission Function in TypeScript

এখন, ফর্ম সাবমিট করার জন্য submitForm() ফাংশনটি TypeScript ফাইলে তৈরি করতে হবে।

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

@Component({
  selector: 'app-registration',
  templateUrl: 'registration.page.html',
  styleUrls: ['registration.page.scss'],
})
export class RegistrationPage {
  fullName: string = '';
  email: string = '';
  password: string = '';

  constructor() {}

  submitForm() {
    console.log('Full Name:', this.fullName);
    console.log('Email:', this.email);
    console.log('Password:', this.password);
  }
}

এখানে submitForm() ফাংশনটি ফর্ম ডেটা কনসোলে লোগ করবে। আপনি এই ডেটা সার্ভারে পাঠাতে বা অন্য কোনো কাজ করতে ব্যবহার করতে পারেন।

৩. Form Validation

Ionic ফ্রেমওয়ার্কে ফর্ম ভ্যালিডেশনও সহজে করা যায়। Angular Reactive Forms বা Template-driven Forms ব্যবহার করে আপনি ইনপুট ফিল্ডের জন্য ভ্যালিডেশন যুক্ত করতে পারেন।

৩.১ Basic Validation Example

<form (ngSubmit)="submitForm()" #myForm="ngForm">
  <ion-item>
    <ion-label position="floating">Full Name</ion-label>
    <ion-input type="text" [(ngModel)]="fullName" name="fullName" required></ion-input>
  </ion-item>

  <ion-item>
    <ion-label position="floating">Email</ion-label>
    <ion-input type="email" [(ngModel)]="email" name="email" required email></ion-input>
  </ion-item>

  <ion-button expand="full" type="submit" [disabled]="myForm.invalid">Submit</ion-button>
</form>

এখানে required এবং email ফিল্ড ভ্যালিডেশন যুক্ত করা হয়েছে। ফর্মটি সাবমিট করার আগে ইনপুটগুলি সঠিকভাবে পূর্ণ ও ভ্যালিড হতে হবে।

সারাংশ

• Input Fields: Ionic এ বিভিন্ন ধরনের ইনপুট ফিল্ড যেমন text, email, password, checkbox, radio, select ইত্যাদি ব্যবহার করা যায়।
• Form Submission: ngSubmit ইভেন্ট দিয়ে ফর্ম ডেটা সাবমিট করা হয়।
• Validation: ইনপুট ফিল্ডে ভ্যালিডেশন যুক্ত করা যায় Angular এর required, email প্রপার্টির মাধ্যমে।

Ionic ফ্রেমওয়ার্কে ফর্ম এবং ইনপুট ফিল্ড ব্যবহার করা খুবই সহজ এবং এর মাধ্যমে আপনি অ্যাপের ইউজার ইন্টারফেস তৈরি করতে পারবেন।