ফর্ম ইনপুট এবং ইভেন্ট হ্যান্ডলিং

Aurelia ফ্রেমওয়ার্কে ফর্ম ইনপুট এবং ইভেন্ট হ্যান্ডলিং অত্যন্ত সহজ এবং কার্যকর। আপনি খুব সহজেই ডেটা বাইন্ডিং এবং ইভেন্ট হ্যান্ডলার ব্যবহার করে ইউজারের ইনপুট গ্রহণ এবং সেই ইনপুটের উপর ভিত্তি করে কাজ করতে পারেন। এই প্রক্রিয়ায় two-way data binding এবং event delegation সহ বেশ কিছু শক্তিশালী কৌশল ব্যবহৃত হয়।

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

১. Aurelia-তে ফর্ম ইনপুট এবং ডেটা বাইন্ডিং

Aurelia ফ্রেমওয়ার্ক two-way data binding সাপোর্ট করে, যা ফর্ম ইনপুট ফিল্ড এবং ভিউমডেলের মধ্যে ডেটা সিঙ্ক্রোনাইজ করতে সহায়তা করে।

ফর্ম ইনপুটের জন্য ডেটা বাইন্ডিং

Aurelia-তে ইনপুট ফিল্ডে ডেটা বাইন্ডিং করার জন্য, আপনি HTML ইনপুট এলিমেন্টে value.bind অথবা value.twoWay ব্যবহার করতে পারেন। এর মাধ্যমে ইনপুট ফিল্ডের মান স্বয়ংক্রিয়ভাবে ভিউমডেলের সঙ্গে সিঙ্ক্রোনাইজ হবে।

Example: ফর্ম ইনপুটের মাধ্যমে ডেটা বাইন্ডিং

app.html:

<template>
  <h2>Welcome to the Aurelia Form Example</h2>
  
  <form submit.delegate="submitForm()">
    <label for="username">Username:</label>
    <input type="text" id="username" value.bind="username" />

    <label for="email">Email:</label>
    <input type="email" id="email" value.bind="email" />

    <button type="submit">Submit</button>
  </form>

  <div>
    <h3>Form Data:</h3>
    <p>Username: ${username}</p>
    <p>Email: ${email}</p>
  </div>
</template>

app.js (ভিউমডেল):

export class App {
  username = '';  // ইনপুটের জন্য ভিউমডেল
  email = '';

  submitForm() {
    alert(`Username: ${this.username}, Email: ${this.email}`);
  }
}

এখানে, value.bind="username" এবং value.bind="email" এর মাধ্যমে ইনপুট ফিল্ডের মান ভিউমডেলের username এবং email ভেরিয়েবলের সাথে সিঙ্ক্রোনাইজ হচ্ছে। যখন ইউজার ইনপুট ফিল্ডে কিছু লিখবেন, তা সরাসরি ভিউমডেলে চলে যাবে। ফর্ম সাবমিট করলে, submitForm() মেথড কল হবে।

২. ইভেন্ট হ্যান্ডলিং

Aurelia ফ্রেমওয়ার্কে ইভেন্ট হ্যান্ডলিং খুবই সহজ। আপনি click.delegate, submit.delegate বা অন্য কোনো DOM ইভেন্ট ব্যবহার করে ইভেন্ট হ্যান্ডলিং করতে পারেন। ইভেন্ট হ্যান্ডলার ফাংশন ভিউমডেলে যুক্ত করা হয় এবং প্রয়োজন অনুযায়ী ইভেন্ট প্যারামিটার গ্রহণ করে।

Example: একটি বাটনে ক্লিক করার ইভেন্ট হ্যান্ডলিং

app.html:

<template>
  <h2>Click the Button</h2>
  <button click.delegate="onClick()">Click Me</button>
  <p>${message}</p>
</template>

app.js (ভিউমডেল):

export class App {
  message = '';

  onClick() {
    this.message = 'Button clicked!';
  }
}

এখানে, click.delegate="onClick()" দিয়ে বাটনে ক্লিক করলে onClick() ফাংশন কল হবে, এবং সেই ফাংশনে message প্রোপার্টি পরিবর্তন হবে। এটি UI তে আপডেট হবে এবং "Button clicked!" প্রদর্শিত হবে।

৩. ফর্ম ইনপুটের মাধ্যমে ডেটা ভ্যালিডেশন

Aurelia ফ্রেমওয়ার্কে আপনি ফর্ম ইনপুটের জন্য ডেটা ভ্যালিডেশন খুব সহজে করতে পারেন। উদাহরণস্বরূপ, আপনি required এবং minlength বা email টাইপ ভ্যালিডেশন অ্যাট্রিবিউট ব্যবহার করতে পারেন।

Example: ফর্ম ভ্যালিডেশন

app.html:

<template>
  <h2>Sign Up Form</h2>
  
  <form submit.delegate="submitForm()" novalidate>
    <label for="username">Username (Required):</label>
    <input type="text" id="username" value.bind="username" required />

    <label for="email">Email (Valid Email Required):</label>
    <input type="email" id="email" value.bind="email" required />

    <button type="submit">Submit</button>
  </form>

  <div if.bind="!isValid">
    <p>Please fill in all fields correctly.</p>
  </div>
</template>

app.js (ভিউমডেল):

export class App {
  username = '';
  email = '';
  isValid = true;

  submitForm() {
    if (this.username && this.email && this.email.includes('@')) {
      alert('Form submitted!');
    } else {
      this.isValid = false;  // ফর্ম ভ্যালিডেশন চেক করা
    }
  }
}

এখানে, required অ্যাট্রিবিউট ইনপুট ফিল্ডে যুক্ত করা হয়েছে, যা ইউজারকে সঠিকভাবে ইনপুট দিতে বাধ্য করবে। যখন ফর্ম সাবমিট হবে, তখন submitForm() ফাংশনটি চেক করবে ফর্মের ইনপুট ফিল্ডগুলি পূর্ণ এবং বৈধ কিনা। যদি না হয়, একটি বার্তা দেখানো হবে।

৪. ফর্ম ইনপুটে কাস্টম ইভেন্ট হ্যান্ডলিং

Aurelia-তে আপনি কাস্টম ইভেন্টও তৈরি করতে পারেন, যা ইউজারের কিছু নির্দিষ্ট ইনপুট বা ফর্ম জমা দেওয়ার প্রক্রিয়া পরিচালনা করে।

Example: কাস্টম ইনপুট ফিল্ডে ইভেন্ট হ্যান্ডলিং

app.html:

<template>
  <h2>Custom Input Event</h2>

  <label for="customInput">Enter Text:</label>
  <input type="text" id="customInput" value.bind="inputText" input.delegate="onInputChange()" />

  <p>Input Value: ${inputText}</p>
</template>

app.js (ভিউমডেল):

export class App {
  inputText = '';

  onInputChange() {
    console.log('Input value changed:', this.inputText);
  }
}

এখানে, input.delegate="onInputChange()" ইভেন্ট হ্যান্ডলার ব্যবহার করা হয়েছে যা ইনপুট ফিল্ডে টাইপ করার সময় কল হবে। এইভাবে আপনি কাস্টম ইভেন্ট তৈরি এবং ইনপুট মান ট্র্যাক করতে পারেন।

৫. শুধুমাত্র সাবমিট ইভেন্ট হ্যান্ডলিং

আপনি শুধুমাত্র submit ইভেন্ট হ্যান্ডলিংও করতে পারেন। নিচে একটি সাধারণ উদাহরণ দেয়া হলো যেখানে ফর্ম সাপোর্ট করা হয়।

Example: ফর্ম সাবমিট ইভেন্ট

app.html:

<template>
  <h2>Login Form</h2>

  <form submit.delegate="loginUser()">
    <label for="username">Username:</label>
    <input type="text" id="username" value.bind="username" />

    <label for="password">Password:</label>
    <input type="password" id="password" value.bind="password" />

    <button type="submit">Login</button>
  </form>
</template>

app.js (ভিউমডেল):

export class App {
  username = '';
  password = '';

  loginUser() {
    if (this.username && this.password) {
      alert(`Login Successful for ${this.username}`);
    } else {
      alert('Please fill in both fields');
    }
  }
}

এখানে, ফর্মটি সাবমিট হওয়ার সময় loginUser() ফাংশন কল হবে এবং এটি ইউজারের username এবং password যাচাই করবে।

উপসংহার

Aurelia ফ্রেমওয়ার্কে ফর্ম ইনপুট এবং ইভেন্ট হ্যান্ডলিং অত্যন্ত সহজ এবং শক্তিশালী। Two-way data binding এবং event delegation ব্যবহার করে আপনি দ্রুত এবং কার্যকরীভাবে ইউজারের ইনপুট গ্রহণ করতে এবং সেই অনুযায়ী প্রতিক্রিয়া জানাতে পারেন। ভ্যালিডেশন, কাস্টম ইভেন্ট, এবং ফর্ম সাবমিট ইভেন্ট গুলি ব্যবহারের মাধ্যমে, আপনার অ্যাপ্লিকেশন আরও ইন্টারঅ্যাকটিভ এবং ইউজ

ার-ফ্রেন্ডলি হয়ে ওঠে।