Angular Material একটি জনপ্রিয় UI লাইব্রেরি যা Material Design প্রিন্সিপল অনুসরণ করে তৈরি, এবং এটি ডেভেলপারদের জন্য আধুনিক, ব্যবহারকারী-বান্ধব ইনপুট ফিল্ডসহ অনেক প্রি-বিল্ট কম্পোনেন্ট সরবরাহ করে। Material Input Field Angular Material এর অন্যতম একটি গুরুত্বপূর্ণ কম্পোনেন্ট যা সহজে কাস্টমাইজ করা যায় এবং বিভিন্ন ফর্মে ব্যবহার করা যায়।

Material Input Field এর সুবিধা

• টাইপোগ্রাফি সাপোর্ট: Material Input ফিল্ডে টাইপোগ্রাফি সাপোর্ট পাওয়া যায়, যা স্বয়ংক্রিয়ভাবে লেবেল এবং পিএলেসহোল্ডার ম্যানেজ করে।
• ফিল্ড ভ্যালিডেশন: এটি ভ্যালিডেশন ফিচার সাপোর্ট করে, যেমন Required, Minlength, Maxlength, Pattern ইত্যাদি।
• অ্যাক্সেসিবিলিটি: ইনপুট ফিল্ড গুলো অ্যাক্সেসিবিলিটির জন্যও উপযুক্ত, যেমন স্ক্রীন রিডার এবং কীবোর্ড নেভিগেশন।

Material Input Field ব্যবহার করা

Material Input ফিল্ড ব্যবহার করতে, আপনাকে Angular Material এর MatInputModule ইমপোর্ট করতে হবে এবং তারপর HTML ফাইলে matInput ডিরেকটিভ ব্যবহার করতে হবে।

১. ইন্সটলেশন এবং মডিউল ইমপোর্ট

প্রথমে Angular Material ইন্সটল করতে হবে:

ng add @angular/material

এটি ইনস্টল করার পরে, আপনার অ্যাপ্লিকেশনের app.module.ts ফাইলে MatInputModule ইমপোর্ট করুন:

import { MatInputModule } from '@angular/material/input';
import { MatFormFieldModule } from '@angular/material/form-field';

@NgModule({
  imports: [
    MatInputModule,
    MatFormFieldModule
  ]
})
export class AppModule { }

MatFormFieldModule ব্যবহার করা হয় যাতে ইনপুট ফিল্ডগুলোকে Material Design স্টাইল অনুসারে প্রদর্শন করা যায়।

২. Material Input Field তৈরি করা

এখন, HTML ফাইলে Material Input ফিল্ড ব্যবহার করতে পারেন। নিচে এর উদাহরণ দেওয়া হলো:

<mat-form-field appearance="fill">
  <mat-label>First Name</mat-label>
  <input matInput placeholder="Enter your first name" [(ngModel)]="firstName">
</mat-form-field>

এখানে:

• mat-form-field: Material Design এর ফর্ম ফিল্ড ব্যবহার করার জন্য।
• mat-label: ইনপুট ফিল্ডের লেবেল।
• matInput: ইনপুট ফিল্ডে Material Input ডিরেকটিভ ব্যবহার করা।
• placeholder: ইনপুট ফিল্ডে প্লেসহোল্ডার টেক্সট।

এছাড়া, appearance="fill" ব্যবহার করে ইনপুট ফিল্ডের স্টাইল কাস্টমাইজ করা হয়।

৩. ভ্যালিডেশন এবং এ্যাট্রিবিউট

Material Input Field সহজেই ভ্যালিডেশন সাপোর্ট করে। আপনি required, minlength, maxlength, এবং pattern এট্রিবিউট ব্যবহার করতে পারেন।

<mat-form-field appearance="fill">
  <mat-label>Email</mat-label>
  <input matInput placeholder="Enter your email" [(ngModel)]="email" required email>
  <mat-error *ngIf="email.invalid && email.touched">
    You must enter a valid email.
  </mat-error>
</mat-form-field>

এখানে:

• required: ইনপুট ফিল্ডটি পূর্ণ হওয়া প্রয়োজন।
• email: ইনপুট ফিল্ডটি ইমেল ফরম্যাটে হওয়া প্রয়োজন।
• mat-error: এটি একটি এরর মেসেজ প্রদর্শন করবে যখন ইনপুট ভ্যালিডেশন ব্যর্থ হয়।

৪. ইনপুট ফিল্ডের স্টাইলিং

Angular Material ইনপুট ফিল্ডের জন্য বিভিন্ন স্টাইলিং পছন্দ সরবরাহ করে, যেমন appearance, floatLabel, এবং color।

• appearance: ইনপুট ফিল্ডের স্টাইল পরিবর্তন করার জন্য।
  • 'legacy': পুরনো ডিজাইন।
  • 'standard': ডিফল্ট ডিজাইন।
  • 'fill': ইনপুট ফিল্ডে ব্যাকগ্রাউন্ড পূর্ণ করতে।
  • 'outline': ইনপুট ফিল্ডের চারপাশে আউটলাইন তৈরি করতে।
• floatLabel: লেবেলটি ইনপুট ফিল্ডে থাকতে অথবা ফ্লোট করতে পারে।
• color: ইনপুট ফিল্ডের রঙ পরিবর্তন করা যায়, যেমন primary, accent, অথবা warn।

<mat-form-field appearance="outline">
  <mat-label>Username</mat-label>
  <input matInput placeholder="Enter username" [(ngModel)]="username">
</mat-form-field>

এখানে, appearance="outline" দ্বারা ইনপুট ফিল্ডের চারপাশে আউটলাইন তৈরি করা হয়েছে।

Material Input Field এর কিছু গুরুত্বপূর্ণ বৈশিষ্ট্য

• নিরাপত্তা: এটি password টাইপের ইনপুটও সমর্থন করে, যেখানে লেখা গোপন থাকে।

<mat-form-field appearance="fill">
  <mat-label>Password</mat-label>
  <input matInput placeholder="Enter your password" type="password" [(ngModel)]="password">
</mat-form-field>

• অটো কমপ্লিট: এটি autocomplete ফিচার সমর্থন করে, যা ইউজারের জন্য দ্রুত ইনপুট করার সুবিধা দেয়।

<mat-form-field appearance="fill">
  <mat-label>Search</mat-label>
  <input matInput placeholder="Search" autocomplete="on">
</mat-form-field>

Angular Material এর Material Input Field ব্যবহার করার মাধ্যমে আপনি একটি আধুনিক, ব্যবহারকারীবান্ধব এবং অ্যাক্সেসিবল ইনপুট ফিল্ড তৈরি করতে পারেন। এটি বিভিন্ন ভ্যালিডেশন, টাইপোগ্রাফি এবং স্টাইলিং সাপোর্ট করে, যা ডেভেলপারদের জন্য কাজটি সহজ করে তোলে। Angular Material এর ইনপুট ফিল্ড গুলো একটি একক, সমন্বিত ডিজাইন সিস্টেমে কাজ করে এবং Material Design গাইডলাইন অনুযায়ী সঠিকভাবে উপস্থাপিত হয়।