Form এবং Input Field Styling

Ionic অ্যাপে Form এবং Input Field Styling অনেক সহজ এবং কাস্টমাইজেবল। Ionic বিভিন্ন UI Components প্রদান করে যা আপনাকে ফর্ম এবং ইনপুট ফিল্ড ডিজাইন করতে সাহায্য করে। আপনি CSS বা SCSS ব্যবহার করে এই ফর্ম এবং ইনপুট ফিল্ডগুলির স্টাইলিং করতে পারেন। এখানে আমরা Ionic Forms এবং Input Fields স্টাইলিংয়ের জন্য বিভিন্ন পদ্ধতি আলোচনা করব।

১. Basic Form Styling in Ionic

Ionic অ্যাপে একটি বেসিক ফর্ম তৈরি করার জন্য সাধারণত <ion-input>, <ion-select>, <ion-textarea>, <ion-button> ইত্যাদি কম্পোনেন্ট ব্যবহার করা হয়। এই কম্পোনেন্টগুলো সহজে কাস্টমাইজ করা যায় CSS বা SCSS দিয়ে।

১.১ Basic Form Example

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

<ion-content>
  <form [formGroup]="userForm">
    <ion-item>
      <ion-label position="floating">Name</ion-label>
      <ion-input formControlName="name" type="text"></ion-input>
    </ion-item>
    
    <ion-item>
      <ion-label position="floating">Email</ion-label>
      <ion-input formControlName="email" type="email"></ion-input>
    </ion-item>

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

    <ion-button expand="full" [disabled]="userForm.invalid">Submit</ion-button>
  </form>
</ion-content>

এখানে:

• <ion-input> কম্পোনেন্ট ইনপুট ফিল্ড তৈরি করে।
• <ion-label> ইনপুটের জন্য লেবেল তৈরি করে।
• <ion-button> সাবমিট বাটন তৈরি করে।

১.২ Basic Form CSS Styling

home.page.scss ফাইলে ফর্ম এবং ইনপুট ফিল্ডগুলোর স্টাইলিং করতে:

ion-item {
  margin-bottom: 20px;
}

ion-label {
  font-size: 16px;
  color: #333;
}

ion-input {
  border-radius: 10px;
}

ion-button {
  margin-top: 20px;
  background-color: #3880ff;
  color: white;
}

এখানে:

• ion-item এর মধ্যে margin-bottom দেওয়া হয়েছে যাতে ইনপুট ফিল্ডগুলোর মাঝে স্পেস থাকে।
• ion-label এর ফন্ট সাইজ এবং কালার কাস্টমাইজ করা হয়েছে।
• ion-input এর বর্ডার রেডিয়াস পরিবর্তন করা হয়েছে।
• ion-button এর ব্যাকগ্রাউন্ড কালার এবং টেক্সট কালার কাস্টমাইজ করা হয়েছে।

২. Advanced Input Field Styling

Ionic এর ইনপুট ফিল্ডগুলোর আরও কাস্টমাইজড স্টাইলিং করতে পারেন, যেমন বর্ডার, আউটলাইন, ফোকাস স্টাইল, এবং অন্যান্য।

২.১ Custom Styled Input Fields

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

<ion-item>
  <ion-label position="floating">Phone Number</ion-label>
  <ion-input formControlName="phone" type="tel" placeholder="Enter phone number"></ion-input>
</ion-item>

২.২ Custom Styled Input Field CSS

home.page.scss ফাইলে:

ion-item {
  --background: #f1f1f1;
  --border-radius: 10px;
  --padding-start: 10px;
}

ion-label {
  color: #555;
  font-size: 16px;
}

ion-input {
  --padding-start: 10px;
  --border-radius: 8px;
  --box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

ion-input::part(input) {
  font-size: 16px;
  color: #333;
}

এখানে:

• --background এবং --border-radius ব্যবহার করে ion-item এর ব্যাকগ্রাউন্ড এবং কোণ গোলাকার করা হয়েছে।
• ion-input এর জন্য box-shadow যুক্ত করা হয়েছে, যাতে ইনপুট ফিল্ডটি স্টাইলিশ দেখায়।
• ion-input::part(input) ব্যবহার করে ইনপুট ফিল্ডের ফন্ট সাইজ এবং টেক্সট কালার কাস্টমাইজ করা হয়েছে।

৩. Form Validation and Error Messages

Ionic অ্যাপে ফর্ম ভ্যালিডেশন এবং এরর মেসেজ প্রদর্শন করতে Angular Reactive Forms অথবা Template-driven Forms ব্যবহার করা হয়। এখানে আমরা Reactive Form এর উদাহরণ দেখব।

৩.১ Reactive Form Example

home.page.ts ফাইলে ফর্ম ভ্যালিডেশন:

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

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

  constructor(private fb: FormBuilder) {
    this.userForm = this.fb.group({
      username: ['', [Validators.required, Validators.minLength(5)]],
      email: ['', [Validators.required, Validators.email]],
      password: ['', [Validators.required, Validators.minLength(8)]],
    });
  }

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

৩.২ Form Validation in HTML

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

<ion-content>
  <form [formGroup]="userForm" (ngSubmit)="onSubmit()">
    <ion-item>
      <ion-label position="floating">Username</ion-label>
      <ion-input formControlName="username" type="text"></ion-input>
    </ion-item>
    <div *ngIf="userForm.get('username').invalid && userForm.get('username').touched">
      <ion-text color="danger">
        <p *ngIf="userForm.get('username').hasError('required')">Username is required.</p>
        <p *ngIf="userForm.get('username').hasError('minlength')">Username must be at least 5 characters.</p>
      </ion-text>
    </div>

    <ion-item>
      <ion-label position="floating">Email</ion-label>
      <ion-input formControlName="email" type="email"></ion-input>
    </ion-item>
    <div *ngIf="userForm.get('email').invalid && userForm.get('email').touched">
      <ion-text color="danger">
        <p *ngIf="userForm.get('email').hasError('required')">Email is required.</p>
        <p *ngIf="userForm.get('email').hasError('email')">Please enter a valid email address.</p>
      </ion-text>
    </div>

    <ion-item>
      <ion-label position="floating">Password</ion-label>
      <ion-input formControlName="password" type="password"></ion-input>
    </ion-item>
    <div *ngIf="userForm.get('password').invalid && userForm.get('password').touched">
      <ion-text color="danger">
        <p *ngIf="userForm.get('password').hasError('required')">Password is required.</p>
        <p *ngIf="userForm.get('password').hasError('minlength')">Password must be at least 8 characters.</p>
      </ion-text>
    </div>

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

৩.৩ Error Message Styling

ion-text {
  margin-top: 5px;
  font-size: 14px;
}

ion-text[color="danger"] p {
  color: #ff4d4d;
}

এখানে:

• ফর্ম ভ্যালিডেশন তৈরি করা হয়েছে যেখানে ইনপুট ফিল্ডগুলি রিকোয়ার্ড এবং মিনিমাম লেংথ চেক করে।
• *ngIf দিয়ে ইনপুটের ত্রুটি মেসেজগুলো দেখানো হয়েছে যখন ব্যবহারকারী সেই ফিল্ডে প্রবেশ করবেন এবং ত্রুটি ঘটবে।

৪. Advanced Input Styling (Focus, Placeholder, and Border)

৪.১ Focus Style

আপনি ইনপুট ফিল্ডে focus স্টাইলও কাস্টমাইজ করতে পারেন।

ion-input:focus {
 

--box-shadow: 0 0 10px rgba(0, 0, 255, 0.5); --border-color: #007bff; }

এখানে **`--box-shadow`** এবং **`--border-color`** ব্যবহার করে ইনপুট ফোকাসের সময় একটি হালকা ব্লু আউটলাইন দেওয়া হয়েছে।

#### ৪.২ **Placeholder Styling**

```scss
ion-input::part(native) ::placeholder {
  color: #ccc;
  font-size: 14px;
}

এখানে ::placeholder দিয়ে placeholder টেক্সটের রঙ এবং সাইজ কাস্টমাইজ করা হয়েছে।

সারাংশ

• Ionic ফর্ম এবং ইনপুট ফিল্ডগুলোর স্টাইলিং CSS বা SCSS দিয়ে সহজে কাস্টমাইজ করা যায়।
• ফর্ম ভ্যালিডেশন এবং এরর মেসেজ প্রদর্শন Angular Reactive Forms বা Template-driven Forms দিয়ে করা যায়।
• Focus, Placeholder, এবং Border স্টাইলিং কাস্টমাইজ করে ইনপুট ফিল্ডের ডিজাইন আরও প্রফেশনাল করা যায়।

এটি ছিল Ionic Forms এবং Input Fields Styling এর বিস্তারিত গাইড।