Form Validation এবং Error Handling গাইড ও নোট

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

Form Validation (ফর্ম ভ্যালিডেশন)

Form Validation হল এমন একটি প্রক্রিয়া যেখানে ব্যবহারকারী ফর্ম পূরণ করার সময় ইনপুট ডেটা যাচাই করা হয়। এটি ক্লায়েন্ট সাইড (AngularJS) এবং সার্ভার সাইড (Express.js) উভয়েই করা যায়।

1. AngularJS ক্লায়েন্ট সাইড ফর্ম ভ্যালিডেশন

AngularJS এর মধ্যে ng-model এবং ng-required এর মতো ডিরেকটিভ ব্যবহার করে ফর্ম ভ্যালিডেশন করা যায়। এখানে একটি উদাহরণ দেওয়া হলো যেখানে ইউজার নাম, ইমেইল এবং পাসওয়ার্ড ভ্যালিডেশন করা হচ্ছে।

<!-- public/views/signup.html -->
<form name="signupForm" ng-submit="submitForm()">
  <label for="username">Username</label>
  <input type="text" id="username" ng-model="user.username" name="username" required>
  <span ng-show="signupForm.username.$touched && signupForm.username.$invalid">
    Username is required.
  </span>

  <label for="email">Email</label>
  <input type="email" id="email" ng-model="user.email" name="email" required>
  <span ng-show="signupForm.email.$touched && signupForm.email.$invalid">
    Valid email is required.
  </span>

  <label for="password">Password</label>
  <input type="password" id="password" ng-model="user.password" name="password" required>
  <span ng-show="signupForm.password.$touched && signupForm.password.$invalid">
    Password is required.
  </span>

  <button type="submit" ng-disabled="signupForm.$invalid">Submit</button>
</form>

এখানে, ng-required ডিরেকটিভের মাধ্যমে ফর্ম ফিল্ডগুলোকে আবশ্যক করা হয়েছে, এবং ng-show ব্যবহার করে ত্রুটি বার্তা প্রদর্শন করা হয়েছে।

2. Express.js সার্ভার সাইড ফর্ম ভ্যালিডেশন

যখন ফর্ম ডেটা সার্ভারে পাঠানো হয়, তখন সার্ভার সাইডেও ভ্যালিডেশন করা প্রয়োজন। Express.js এ mongoose স্কিমা ব্যবহার করে সহজেই ভ্যালিডেশন করা যায়। উদাহরণস্বরূপ, ইউজার ইনপুটের জন্য পাসওয়ার্ডের সঠিকতা যাচাই করা:

// server/models/user.model.js

var mongoose = require('mongoose');
var Schema = mongoose.Schema;

var userSchema = new Schema({
  username: {
    type: String,
    required: 'Username is required'
  },
  email: {
    type: String,
    required: 'Email is required',
    unique: true,
    match: [/\S+@\S+\.\S+/, 'Please enter a valid email address']
  },
  password: {
    type: String,
    required: 'Password is required',
    minlength: [6, 'Password must be at least 6 characters long']
  }
});

var User = mongoose.model('User', userSchema);

module.exports = User;

এখানে, mongoose এর ভ্যালিডেশন অপশন ব্যবহার করে ইউজার নাম, ইমেইল এবং পাসওয়ার্ডের ভ্যালিডেশন করা হয়েছে। পাসওয়ার্ডের জন্য মিনিমাম লেন্থ এবং ইমেইলের জন্য একটি রেগুলার এক্সপ্রেশন ব্যবহার করা হয়েছে।

Error Handling (এরর হ্যান্ডলিং)

Error Handling হল এমন একটি প্রক্রিয়া, যার মাধ্যমে অ্যাপ্লিকেশনের ত্রুটিগুলি সঠিকভাবে ধরতে এবং ব্যবহারকারীর কাছে স্পষ্টভাবে বার্তা প্রদর্শন করতে সহায়তা করা হয়। MeanJS তে ত্রুটি হ্যান্ডলিং সাধারণত HTTP Status Codes এবং Error Messages এর মাধ্যমে করা হয়।

1. AngularJS ক্লায়েন্ট সাইড Error Handling

AngularJS এ $http সার্ভিস ব্যবহার করে API থেকে ডেটা গ্রহণ করার সময় ত্রুটি হ্যান্ডলিং করা যায়। যদি API রিকোয়েস্টে ত্রুটি ঘটে, তবে catch() মেথড ব্যবহার করে ত্রুটি দেখা যায়।

// public/js/controllers/user.controller.js

angular.module('meanApp')
  .controller('UserController', function($scope, $http) {
    var userId = '12345';  // ইউজারের ID

    // API রিকোয়েস্ট পাঠানো
    $http.get('/api/users/' + userId)
      .then(function(response) {
        // ডেটা পাওয়া গেলে সেট করা
        $scope.user = response.data;
      })
      .catch(function(error) {
        // ত্রুটি হলে এরর বার্তা দেখানো
        $scope.error = 'Error retrieving user: ' + error.message;
      });
  });

এখানে, $http.get() রিকোয়েস্টের মাধ্যমে ইউজার তথ্য আনা হচ্ছে এবং catch() মেথডের মাধ্যমে ত্রুটির বার্তা $scope.error এ সেট করা হচ্ছে।

2. Express.js ব্যাকএন্ড Error Handling

Express.js তে next() মেথড ব্যবহার করে ত্রুটির মোকাবিলা করা হয় এবং তা error-handling middleware এ পাঠানো হয়। ত্রুটি সঠিকভাবে হ্যান্ডল করতে HTTP status codes ব্যবহার করা হয়।

// server/routes/user.routes.js

var User = require('../models/user.model');

router.get('/users/:id', function(req, res, next) {
  User.findById(req.params.id, function(err, user) {
    if (err) {
      return next(err);  // ত্রুটি হলে error-handling middleware এ পাঠানো
    }
    if (!user) {
      return res.status(404).send({ message: 'User not found' });
    }
    res.json(user);
  });
});

// Error-handling middleware
router.use(function(err, req, res, next) {
  console.error(err.stack);
  res.status(500).send({ message: 'Something went wrong!' });
});

module.exports = router;

এখানে, ত্রুটি হ্যান্ডলিংয়ের জন্য একটি error-handling middleware ব্যবহার করা হয়েছে, যা সব ধরনের ত্রুটি ধরবে এবং 500 Internal Server Error রেসপন্স পাঠাবে।

সারাংশ

MeanJS স্ট্যাকের মাধ্যমে Form Validation এবং Error Handling সঠিকভাবে পরিচালনা করা গুরুত্বপূর্ণ, যাতে অ্যাপ্লিকেশন ব্যবহারকারী বান্ধব ও নিরাপদ হয়। AngularJS এর মাধ্যমে ক্লায়েন্ট সাইডে ইনপুট যাচাই করা যায় এবং Express.js এর মাধ্যমে সার্ভার সাইডে ইনপুটের ভ্যালিডেশন নিশ্চিত করা হয়। ত্রুটি হ্যান্ডলিংও সঠিকভাবে করা উচিত, যাতে ব্যবহারকারীকে স্পষ্ট ত্রুটি বার্তা প্রদান করা যায় এবং অ্যাপ্লিকেশনটি আরও নির্ভরযোগ্য হয়।

MeanJS স্ট্যাকের মধ্যে AngularJS ব্যবহার করে ফর্ম তৈরি এবং ভ্যালিডেশন করা খুবই গুরুত্বপূর্ণ একটি কাজ। AngularJS একটি শক্তিশালী ফ্রেমওয়ার্ক যা ডাইনামিক ওয়েব অ্যাপ্লিকেশন তৈরি করতে সাহায্য করে এবং এতে ফর্ম ভ্যালিডেশন খুব সহজে করা যায়। এখানে আমরা দেখবো কিভাবে AngularJS ব্যবহার করে ফর্ম তৈরি এবং ভ্যালিডেশন করা যায়।

AngularJS এ ফর্ম তৈরি এবং ভ্যালিডেশন

১. Angular Form Control

AngularJS-এ দুটি ধরনের ফর্ম তৈরি করা যায়:

1. Template-driven forms: যেখানে আপনি HTML টেমপ্লেটের মাধ্যমে ফর্ম এবং ভ্যালিডেশন তৈরি করেন।
2. Reactive forms: যেখানে আপনি JavaScript কোডের মাধ্যমে ফর্ম এবং ভ্যালিডেশন কন্ট্রোল করেন।

আমরা এখানে Template-driven form নিয়ে আলোচনা করবো, কারণ এটি খুবই সাধারণ এবং সহজ।

ফর্ম তৈরি করা

AngularJS-এ ফর্ম তৈরি করার জন্য প্রথমে HTML টেমপ্লেটে একটি ফর্ম তৈরি করতে হবে এবং তারপর সেই ফর্মের ইনপুট ফিল্ড গুলোর জন্য ngModel ব্যবহার করতে হবে। এছাড়া ngSubmit ব্যবহার করে ফর্ম সাবমিট করতে হবে।

উদাহরণ: ইউজার নিবন্ধন ফর্ম

<!-- app.component.html -->

<div class="container">
  <h2>Register</h2>
  <form #registrationForm="ngForm" (ngSubmit)="onSubmit(registrationForm)" novalidate>
    
    <!-- Name Input -->
    <div class="form-group">
      <label for="name">Name</label>
      <input 
        type="text" 
        id="name" 
        class="form-control" 
        name="name" 
        [(ngModel)]="user.name" 
        required 
        #name="ngModel">
      <div *ngIf="name.invalid && (name.dirty || name.touched)" class="alert alert-danger">
        Name is required.
      </div>
    </div>

    <!-- Email Input -->
    <div class="form-group">
      <label for="email">Email</label>
      <input 
        type="email" 
        id="email" 
        class="form-control" 
        name="email" 
        [(ngModel)]="user.email" 
        required 
        email 
        #email="ngModel">
      <div *ngIf="email.invalid && (email.dirty || email.touched)" class="alert alert-danger">
        Valid email is required.
      </div>
    </div>

    <!-- Password Input -->
    <div class="form-group">
      <label for="password">Password</label>
      <input 
        type="password" 
        id="password" 
        class="form-control" 
        name="password" 
        [(ngModel)]="user.password" 
        required 
        minlength="6" 
        #password="ngModel">
      <div *ngIf="password.invalid && (password.dirty || password.touched)" class="alert alert-danger">
        Password must be at least 6 characters long.
      </div>
    </div>

    <!-- Submit Button -->
    <button type="submit" class="btn btn-primary" [disabled]="registrationForm.invalid">Submit</button>
  </form>
</div>

ব্যাখ্যা:

1. ngForm: এটি ফর্মের একটি টেমপ্লেট ভেরিয়েবল তৈরি করে, যা ফর্মের অবস্থা ও ভ্যালিডেশন ট্র্যাক করে।
2. ngModel: এই ডিরেকটিভ ইনপুট ফিল্ডের জন্য ডেটা বাইন্ডিং তৈরি করে। ব্যবহারকারী যে ডেটা ইনপুট করবে তা user অবজেক্টের সাথে বাইন্ড হবে।
3. #name="ngModel": এখানে ngModel এর মাধ্যমে ইনপুট ফিল্ডের ভ্যালিডেশন ট্র্যাক করা হয়।
4. (ngSubmit): ফর্ম সাবমিট করার জন্য ব্যবহার করা হয়। এখানে onSubmit() ফাংশন কল করা হচ্ছে।
5. [disabled]: সাবমিট বাটনটি ফর্মটি যদি ইনভ্যালিড হয়, তবে অক্ষম করবে।

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

AngularJS তে ফর্ম ভ্যালিডেশন খুবই সহজ। আপনি HTML ইনপুট ফিল্ডে required, email, minlength ইত্যাদি ভ্যালিডেশন কন্ডিশন দিয়ে ফর্ম ভ্যালিডেশন করতে পারেন।

উদাহরণ:

1. required: ইনপুট ফিল্ডটি খালি না রেখে পূর্ণ করতে হবে।
2. email: ইনপুট ফিল্ডে একটি বৈধ ইমেল ঠিকানা থাকতে হবে।
3. minlength: পাসওয়ার্ডের জন্য মিনিমাম দৈর্ঘ্য নির্ধারণ করা হয়েছে।

ভ্যালিডেশন মেসেজ

প্রতিটি ইনপুট ফিল্ডের নিচে একটি ভ্যালিডেশন মেসেজ শো করা হয়েছে। উদাহরণস্বরূপ, যদি ইউজার নাম ফিল্ডে কিছু না দেন তবে Name is required. মেসেজ শো করবে।

<div *ngIf="name.invalid && (name.dirty || name.touched)" class="alert alert-danger">
  Name is required.
</div>

এখানে, dirty এবং touched এর মানে হলো, যদি ইনপুট ফিল্ডে কোনও পরিবর্তন করা হয় বা ইনপুট ফিল্ডটি ফোকাস করা হয়, তখনই এটি মেসেজ দেখাবে।

ফর্ম সাবমিট করা

এখন, যখন ফর্মটি সফলভাবে ভ্যালিড হয় এবং ব্যবহারকারী Submit বাটনে ক্লিক করবে, তখন onSubmit() ফাংশন কল হবে।

// app.component.ts

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  user = {
    name: '',
    email: '',
    password: ''
  };

  onSubmit(form: any) {
    console.log('Form Submitted!', form);
    console.log(this.user);
    // ফর্ম সাবমিট করার পর আপনি API কল করতে পারেন বা অন্য কোন কার্যকলাপ করতে পারেন।
  }
}

এখানে, onSubmit() ফাংশনে ফর্মের ডেটা লগ করা হয়েছে এবং আপনি যে কোনো ডেটাবেস বা API কল করতে পারেন। this.user অবজেক্টে ফর্মের ইনপুট ডেটা থাকবে।

কাস্টম ভ্যালিডেশন

আপনি যদি আরো কাস্টম ভ্যালিডেশন যুক্ত করতে চান, তবে AngularJS এর Validators ব্যবহার করতে পারেন। উদাহরণস্বরূপ, একটি কাস্টম পাসওয়ার্ড ভ্যালিডেশন যেখানে পাসওয়ার্ডে একটি বিশেষ ক্যারেক্টার থাকতে হবে।

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

export function passwordValidator(): ValidatorFn {
  return (control: AbstractControl): ValidationErrors | null => {
    const hasSpecialChar = /[!@#$%^&*(),.?":{}|<>]/.test(control.value);
    return hasSpecialChar ? null : { 'passwordStrength': 'Password must contain a special character' };
  };
}

এখানে, passwordValidator একটি কাস্টম ভ্যালিডেটর তৈরি করেছে যা পাসওয়ার্ডে বিশেষ ক্যারেক্টার থাকতে হবে।

সারাংশ

AngularJS এর মাধ্যমে ফর্ম তৈরি এবং ভ্যালিডেশন খুবই সহজ এবং কার্যকরী। ngModel ডিরেকটিভ ব্যবহার করে ডেটা বাইন্ডিং করা যায় এবং required, email, minlength এর মতো সহজ HTML ভ্যালিডেশন কন্ডিশন ব্যবহার করে ইনপুট ফিল্ডগুলোর ভ্যালিডেশন করা যায়। এছাড়া, আপনি কাস্টম ভ্যালিডেশন ফাংশনও তৈরি করতে পারেন, যা আরো জটিল ভ্যালিডেশন প্রয়োজনীয়তার জন্য ব্যবহার করা যায়।

AngularJS (এখন Angular 2+ এর পর থেকে Angular হিসেবে পরিচিত) ফ্রন্টএন্ড ডেভেলপমেন্টের জন্য একটি শক্তিশালী ফ্রেমওয়ার্ক। এতে রয়েছে দুটি ধরনের ফর্মের ব্যবস্থাপনা পদ্ধতি: Reactive Forms এবং Template-driven Forms। এই দুটি পদ্ধতিই ব্যবহারকারীর ইনপুট গ্রহণ করার জন্য ব্যবহৃত হয়, তবে তাদের গঠন এবং ব্যবহারের মধ্যে কিছু মৌলিক পার্থক্য রয়েছে।

MeanJS স্ট্যাকের মধ্যে, Angular ব্যবহার করে আপনি উভয় ধরনের ফর্ম তৈরি করতে পারেন, তবে তাদের কনফিগারেশন এবং ম্যানেজমেন্টের ধরন আলাদা। চলুন, Reactive Forms এবং Template-driven Forms এর মধ্যে পার্থক্য এবং তাদের ব্যবহারের উপায় নিয়ে বিস্তারিত আলোচনা করি।

১. Reactive Forms

Reactive Forms (বা Model-driven Forms) একটি অ্যাপ্লিকেশন-ভিত্তিক পদ্ধতি যেখানে ফর্মের স্টেট (যেমন ইনপুটের মান, ভ্যালিডেশন ইত্যাদি) পুরোপুরি কম্পোনেন্ট ক্লাসে ম্যানেজ করা হয়। এখানে, ফর্মের ইনপুট ক্ষেত্রগুলি FormControl এবং FormGroup এর মাধ্যমে নির্ধারিত হয়।

Reactive Forms এর সুবিধা:

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

Reactive Forms ব্যবহার করতে যে পদক্ষেপগুলো অনুসরণ করতে হবে:

1. Angular Module-এ ReactiveFormsModule যোগ করা:

// app.module.ts
import { ReactiveFormsModule } from '@angular/forms';

@NgModule({
  declarations: [AppComponent],
  imports: [ReactiveFormsModule],
  bootstrap: [AppComponent]
})
export class AppModule {}

2. FormControl এবং FormGroup তৈরি করা:

// user-form.component.ts
import { Component } from '@angular/core';
import { FormGroup, FormControl, Validators } from '@angular/forms';

@Component({
  selector: 'app-user-form',
  templateUrl: './user-form.component.html'
})
export class UserFormComponent {
  userForm: FormGroup;

  constructor() {
    this.userForm = new FormGroup({
      username: new FormControl('', Validators.required),
      email: new FormControl('', [Validators.required, Validators.email]),
    });
  }

  onSubmit() {
    console.log(this.userForm.value);
  }
}

3. Template এ ফর্ম তৈরি করা:

<!-- user-form.component.html -->
<form [formGroup]="userForm" (ngSubmit)="onSubmit()">
  <label for="username">Username</label>
  <input id="username" formControlName="username" type="text">
  <div *ngIf="userForm.get('username').invalid && userForm.get('username').touched">
    Username is required.
  </div>

  <label for="email">Email</label>
  <input id="email" formControlName="email" type="email">
  <div *ngIf="userForm.get('email').invalid && userForm.get('email').touched">
    Valid email is required.
  </div>

  <button type="submit" [disabled]="userForm.invalid">Submit</button>
</form>

ব্যাখ্যা:

• FormGroup একটি গ্রুপ তৈরি করে যা একাধিক FormControl ধারণ করে।
• formControlName ব্যবহার করে ফর্মের ইনপুট ফিল্ডগুলো কনট্রোল করা হয়।
• Validators ব্যবহার করে ফর্মের ইনপুটে ভ্যালিডেশন যুক্ত করা হয়।

২. Template-driven Forms

Template-driven Forms Angular এর ঐতিহ্যবাহী পদ্ধতি, যেখানে ফর্মের স্টেট এবং ভ্যালিডেশন মূলত HTML টেমপ্লেটের মধ্যেই পরিচালিত হয়। এখানে, ফর্মের সাথে সম্পর্কিত তথ্য শুধুমাত্র HTML টেমপ্লেটে থাকা ngModel ডিরেকটিভের মাধ্যমে ম্যানেজ করা হয়।

Template-driven Forms এর সুবিধা:

• এটি ছোট এবং সোজা ফর্মের জন্য উপযুক্ত, যেখানে কমপ্লেক্স কনফিগারেশন প্রয়োজন হয় না।
• কোড সহজ এবং টেমপ্লেটের মধ্যে একসঙ্গে কাজ করে, যেটি কিছু ডেভেলপারদের কাছে সহজ মনে হয়।
• সহজ পদ্ধতিতে মডেল-বাইন্ডিং এবং ভ্যালিডেশন সঞ্চালিত হয়।

Template-driven Forms ব্যবহার করতে যে পদক্ষেপগুলো অনুসরণ করতে হবে:

1. Angular Module-এ FormsModule যোগ করা:

// app.module.ts
import { FormsModule } from '@angular/forms';

@NgModule({
  declarations: [AppComponent],
  imports: [FormsModule],
  bootstrap: [AppComponent]
})
export class AppModule {}

2. Template-driven ফর্ম তৈরি করা:

<!-- user-form.component.html -->
<form #userForm="ngForm" (ngSubmit)="onSubmit(userForm)">
  <label for="username">Username</label>
  <input id="username" name="username" ngModel required>
  <div *ngIf="userForm.controls.username?.invalid && userForm.controls.username?.touched">
    Username is required.
  </div>

  <label for="email">Email</label>
  <input id="email" name="email" ngModel required email>
  <div *ngIf="userForm.controls.email?.invalid && userForm.controls.email?.touched">
    Valid email is required.
  </div>

  <button type="submit" [disabled]="userForm.invalid">Submit</button>
</form>

ব্যাখ্যা:

• ngModel ডিরেকটিভ ব্যবহার করে ফর্ম কন্ট্রোল তৈরি করা হয় এবং এটি ফর্মের মান (value) এবং স্টেট (valid/invalid) সিঙ্ক্রোনাইজ করে।
• ngForm একটি ফর্ম ডিরেকটিভ যা পুরো ফর্মের ভ্যালিডেশন এবং কন্ট্রোল সঞ্চালন করে।

Reactive Forms এবং Template-driven Forms এর মধ্যে পার্থক্য

সারাংশ

Reactive Forms এবং Template-driven Forms উভয়ই Angular এর মধ্যে ফর্ম ম্যানেজমেন্টের জন্য ব্যবহৃত হয়, তবে তাদের কনফিগারেশন এবং ব্যবহারের মধ্যে পার্থক্য রয়েছে। Reactive Forms আরো শক্তিশালী এবং স্কেলেবল, যেখানে ডেভেলপাররা ফর্মের স্টেট, ভ্যালিডেশন এবং ডেটা এক্সচেঞ্জ সম্পূর্ণভাবে কম্পোনেন্ট ক্লাসের মাধ্যমে নিয়ন্ত্রণ করতে পারেন। অন্যদিকে, Template-driven Forms ছোট ফর্মের জন্য উপযুক্ত এবং এটি সোজা পদ্ধতিতে টেমপ্লেটের মধ্যে ইনপুট পরিচালনা করে। MeanJS অ্যাপ্লিকেশনের মধ্যে Angular ব্যবহার করে আপনার প্রয়োজন অনুযায়ী যেকোনো পদ্ধতি বেছে নিয়ে ফর্ম ম্যানেজমেন্ট করতে পারেন।

MeanJS অ্যাপ্লিকেশনে AngularJS ব্যবহার করে ফর্ম ভ্যালিডেশন একটি গুরুত্বপূর্ণ অংশ। ফর্মের জন্য custom validators তৈরি করা মানে আপনার নিজস্ব কাস্টম লজিক ব্যবহার করে ব্যবহারকারীর ইনপুট যাচাই করা। এর মাধ্যমে আপনি ফর্মে থাকা ইনপুটের সঠিকতা নিশ্চিত করতে পারেন, যেমন ইউজার নামের দৈর্ঘ্য, ইমেইল ঠিকমতো ইনপুট করা হয়েছে কিনা, পাসওয়ার্ডের শক্তি ইত্যাদি।

এখানে আমরা AngularJS এ Custom Validators তৈরি করার প্রক্রিয়া দেখবো।

১. Custom Validator তৈরি করা

AngularJS এর মাধ্যমে একটি custom validator তৈরি করতে আমরা Validators ক্লাস ব্যবহার করতে পারি। AngularJS-এ একটি form control এর জন্য কাস্টম ভ্যালিডেটর তৈরি করতে, সাধারণত একটি ফাংশন ব্যবহার হয় যা নির্দিষ্ট নিয়ম অনুযায়ী ইনপুট যাচাই করে।

Custom Validator Function

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

// custom-validators.ts

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

// পাসওয়ার্ড ভ্যালিডেটর
export function passwordValidator(control: AbstractControl): ValidationErrors | null {
  const value = control.value;

  if (!value) {
    return null; // যদি কিছু ইনপুট না থাকে, তখন কোন ত্রুটি হবে না
  }

  // পাসওয়ার্ড শক্তির নিয়ম
  const passwordPattern = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[@$!%*?&])[A-Za-z\d@$!%*?&]{8,}$/;

  if (!passwordPattern.test(value)) {
    return { weakPassword: true };  // যদি পাসওয়ার্ডের শক্তি সঠিক না হয়
  }

  return null;  // সঠিক হলে কোন ত্রুটি নেই
}

এখানে, passwordValidator ফাংশনটি পাসওয়ার্ডের জন্য একটি কাস্টম ভ্যালিডেটর হিসেবে কাজ করছে যা পাসওয়ার্ডের শক্তি যাচাই করে। যদি পাসওয়ার্ড সঠিক না হয়, তাহলে এটি একটি ত্রুটি রিটার্ন করবে (weakPassword: true), অন্যথায় null রিটার্ন করবে।

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

এখন, আমাদের AngularJS ফর্মে এই কাস্টম ভ্যালিডেটর ব্যবহার করতে হবে। প্রথমে, ReactiveFormsModule অথবা FormsModule ব্যবহার করে একটি ফর্ম তৈরি করতে হবে এবং সেখানে কাস্টম ভ্যালিডেটর যোগ করতে হবে।

ফর্মের জন্য Reactive Forms তৈরি করা

প্রথমে, ReactiveFormsModule ইমপোর্ট করুন এবং app.module.ts ফাইলে সেট করুন।

// app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { ReactiveFormsModule } from '@angular/forms'; // ReactiveFormsModule ইনপোর্ট করা
import { AppComponent } from './app.component';

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    ReactiveFormsModule  // ReactiveFormsModule যোগ করা
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule {}

এখন, app.component.ts ফাইলে ফর্ম তৈরি করুন এবং সেখানে কাস্টম ভ্যালিডেটর যোগ করুন।

// app.component.ts

import { Component } from '@angular/core';
import { FormGroup, FormBuilder, Validators } from '@angular/forms';
import { passwordValidator } from './custom-validators';  // কাস্টম ভ্যালিডেটর ইমপোর্ট করা

@Component({
  selector: 'app-root',
  template: `
    <form [formGroup]="userForm" (ngSubmit)="onSubmit()">
      <label for="password">Password</label>
      <input id="password" formControlName="password" type="password" />
      <div *ngIf="userForm.get('password')?.hasError('weakPassword') && userForm.get('password')?.touched">
        Password must be at least 8 characters long, contain an uppercase letter, a number, and a special character.
      </div>
      
      <button type="submit" [disabled]="userForm.invalid">Submit</button>
    </form>
  `,
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  userForm: FormGroup;

  constructor(private fb: FormBuilder) {
    // ফর্ম তৈরি করা এবং কাস্টম ভ্যালিডেটর যোগ করা
    this.userForm = this.fb.group({
      password: ['', [Validators.required, passwordValidator]]  // পাসওয়ার্ডে কাস্টম ভ্যালিডেটর যোগ করা
    });
  }

  // ফর্ম সাবমিট করা
  onSubmit() {
    if (this.userForm.valid) {
      console.log('Form Submitted!', this.userForm.value);
    } else {
      console.log('Form is invalid');
    }
  }
}

এখানে:

• passwordValidator ফাংশনটি userForm এর password ফিল্ডের জন্য কাস্টম ভ্যালিডেটর হিসেবে যোগ করা হয়েছে।
• ngIf ডিরেকটিভের মাধ্যমে পাসওয়ার্ডের ক্ষেত্রে যে ত্রুটি ঘটবে তা প্রদর্শন করা হবে, যেমন weakPassword ত্রুটি হলে একটি বার্তা দেখাবে।
• ngSubmit ইভেন্টের মাধ্যমে ফর্ম সাবমিট করা হবে।

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

এছাড়াও, আপনি একাধিক কাস্টম বা বিল্ট-ইন ভ্যালিডেটর একসাথে ব্যবহার করতে পারেন। যেমন, required, minLength, pattern, এবং custom validators একসাথে ব্যবহার করা যেতে পারে।

this.userForm = this.fb.group({
  password: ['', [
    Validators.required,
    Validators.minLength(8),
    passwordValidator  // কাস্টম পাসওয়ার্ড ভ্যালিডেটর
  ]]
});

এখানে, password ফিল্ডের জন্য:

• required ভ্যালিডেটর ব্যবহার করা হয়েছে যাতে পাসওয়ার্ড ফিল্ড খালি না থাকে।
• minLength(8) ভ্যালিডেটর ব্যবহার করা হয়েছে যাতে পাসওয়ার্ড কমপক্ষে ৮ অক্ষরের হয়।
• passwordValidator ব্যবহার করা হয়েছে পাসওয়ার্ডের শক্তি যাচাই করার জন্য।

৪. Error Messages প্রদর্শন করা

যেকোনো ফর্ম ইনপুটের জন্য ত্রুটি প্রদর্শন করতে, আপনি Angular এর ngIf ডিরেকটিভ ব্যবহার করতে পারেন এবং ভ্যালিডেটরের ত্রুটিগুলোর জন্য কাস্টম মেসেজ তৈরি করতে পারেন।

<div *ngIf="userForm.get('password')?.hasError('required') && userForm.get('password')?.touched">
  Password is required.
</div>
<div *ngIf="userForm.get('password')?.hasError('minlength') && userForm.get('password')?.touched">
  Password must be at least 8 characters long.
</div>
<div *ngIf="userForm.get('password')?.hasError('weakPassword') && userForm.get('password')?.touched">
  Password must contain an uppercase letter, a number, and a special character.
</div>

এখানে:

• required ত্রুটি হলে, "Password is required" বার্তা দেখাবে।
• minlength ত্রুটি হলে, "Password must be at least 8 characters long" বার্তা দেখাবে।
• weakPassword ত্রুটি হলে, পাসওয়ার্ড শক্তির জন্য নির্দিষ্ট নিয়ম অনুযায়ী একটি বার্তা দেখাবে।

সারাংশ

MeanJS অ্যাপ্লিকেশনে AngularJS এর মাধ্যমে Custom Validators তৈরি করার মাধ্যমে ফর্ম ইনপুট যাচাই করা যায়। আপনি কাস্টম লজিক ব্যবহার করে ভ্যালিডেশন করতে পারেন যেমন পাসওয়ার্ড শক্তি যাচাই করা, ইমেইল ঠিকমতো ইনপুট করা ইত্যাদি। কাস্টম ভ্যালিডেটর ফাংশন তৈরি করে এবং Reactive Forms ব্যবহার করে ইনপুটের সঠিকতা নিশ্চিত করা হয়। ngIf ডিরেকটিভের মাধ্যমে ত্রুটির বার্তা প্রদর্শন করা সম্ভব।

MeanJS স্ট্যাক, যা MongoDB, Express.js, AngularJS, এবং Node.js এর সমন্বয়ে তৈরি, এটি ওয়েব অ্যাপ্লিকেশন ডেভেলপমেন্টে ব্যবহৃত হয়। যখন আমরা অ্যাপ্লিকেশন তৈরি করি, তখন server-side validation এবং error handling অত্যন্ত গুরুত্বপূর্ণ বিষয়। Server-side validation নিশ্চিত করে যে কেবল বৈধ ডেটাই ডেটাবেসে জমা হবে, এবং error handling সার্ভারে যে কোনো ত্রুটি সঠিকভাবে পরিচালনা করতে সাহায্য করে, ব্যবহারকারীদের জন্য পরিষ্কার এবং বোধগম্য মেসেজ প্রদান করে।

১. Server-side Validation

Server-side validation হল এমন একটি প্রক্রিয়া, যেখানে সার্ভার ব্যবহারকারীর ইনপুট ডেটা যাচাই করে, এটি নিশ্চিত করে যে এটি সঠিক ফরম্যাটে রয়েছে এবং এটি ডেটাবেসে সেভ করা যেতে পারে।

Server-side Validation এর জন্য Mongoose এর ব্যবহার

Mongoose হল MongoDB এর জন্য একটি ODM (Object Document Mapping) লাইব্রেরি যা MongoDB ডেটাবেসের সাথে যোগাযোগ সহজ করে। Mongoose এর validation ফিচার ব্যবহার করে আমরা ইনপুট ডেটার বৈধতা পরীক্ষা করতে পারি।

Mongoose Validation উদাহরণ:

// models/user.model.js

const mongoose = require('mongoose');
const Schema = mongoose.Schema;

// ইউজার স্কিমা তৈরি করা
const userSchema = new Schema({
  name: {
    type: String,
    required: [true, 'Name is required'],  // নামের জন্য বাধ্যতামূলক
    minlength: [3, 'Name must be at least 3 characters long']  // নামের দৈর্ঘ্য চেক করা
  },
  email: {
    type: String,
    required: [true, 'Email is required'],
    unique: true,  // ইমেইল ইউনিক হতে হবে
    match: [/^\S+@\S+\.\S+$/, 'Please enter a valid email address']  // ইমেইল ফরম্যাট যাচাই
  },
  password: {
    type: String,
    required: [true, 'Password is required'],
    minlength: [6, 'Password must be at least 6 characters long']  // পাসওয়ার্ডের দৈর্ঘ্য চেক করা
  }
});

// ইউজার মডেল তৈরি করা
const User = mongoose.model('User', userSchema);
module.exports = User;

এখানে:

• name, email, এবং password ফিল্ডের জন্য বৈধতা যাচাই করা হয়েছে।
• required প্রপার্টি নিশ্চিত করে যে ফিল্ডটি খালি থাকলে একটি ত্রুটি বার্তা পাঠানো হবে।
• minlength এবং match প্রপার্টি পাসওয়ার্ড এবং ইমেইলের ফরম্যাট চেক করবে।

ব্যবহারকারী তৈরি (Create User) ফাংশনে Validation:

// controllers/user.controller.js

const User = require('../models/user.model');

exports.createUser = async (req, res) => {
  try {
    const user = new User(req.body);  // ইউজার ইনপুট ডেটা গ্রহণ করা
    await user.save();  // মডেল থেকে ডেটা সেভ করা
    res.status(201).json(user);  // সফল হলে ইউজারের তথ্য রিটার্ন করা
  } catch (err) {
    if (err.name === 'ValidationError') {
      return res.status(400).json({
        message: 'Validation failed',
        errors: err.errors  // বৈধতা ত্রুটি বার্তা পাঠানো
      });
    }
    res.status(500).json({ message: 'Server error' });  // অন্যান্য ত্রুটির জন্য
  }
};

এখানে, try-catch ব্লক ব্যবহার করা হয়েছে, যাতে validation error বা অন্য কোনো ত্রুটি হলে তা যথাযথভাবে হ্যান্ডেল করা যায় এবং সঠিক HTTP স্ট্যাটাস কোড সহ ত্রুটি বার্তা ফেরত পাঠানো হয়।

২. Error Handling

Error handling হল এমন একটি প্রক্রিয়া যেখানে আমরা অ্যাপ্লিকেশন বা সার্ভারের যেকোনো ত্রুটিকে সঠিকভাবে শনাক্ত করি এবং তার সঠিক প্রতিক্রিয়া (response) ব্যবহারকারীকে প্রদান করি। MeanJS অ্যাপ্লিকেশনে, আমরা সাধারণত Express.js এবং Node.js ব্যবহার করে ত্রুটিগুলোর মোকাবিলা করি।

২.১. Error Handling Middleware

Express.js তে একটি সাধারণ error-handling middleware তৈরি করা যায়, যা সার্ভারে ঘটে যাওয়া সব ধরনের ত্রুটির জন্য কাজ করবে। এটি এমন একটি সাধারণ পদ্ধতি যা ব্যবহার করে ত্রুটির সঠিক বার্তা এবং HTTP কোড ফেরত পাঠানো হয়।

Error Handling Middleware উদাহরণ:

// server/middleware/error.middleware.js

module.exports = function (err, req, res, next) {
  console.error(err.stack);  // ত্রুটি লগ করা

  // যদি এটি validation error হয়
  if (err.name === 'ValidationError') {
    return res.status(400).json({
      message: 'Validation failed',
      errors: err.errors
    });
  }

  // যদি এটি সাধারণ কোনো সার্ভার সাইড ত্রুটি হয়
  res.status(500).json({
    message: 'Something went wrong, please try again later',
    error: err.message
  });
};

এখানে, error.middleware.js একটি সাধারণ error-handling middleware তৈরি করেছে যা ত্রুটি লগ করবে এবং যথাযথ HTTP স্ট্যাটাস কোড সহ ত্রুটি বার্তা প্রদান করবে।

২.২. ব্যবহারকারী থেকে আসা রিকুয়েস্টে ত্রুটি হ্যান্ডলিং

// controllers/user.controller.js

exports.getUser = async (req, res, next) => {
  try {
    const user = await User.findById(req.params.id);
    if (!user) {
      return res.status(404).json({ message: 'User not found' });  // যদি ইউজার না পাওয়া যায়
    }
    res.json(user);
  } catch (err) {
    next(err);  // অন্য সব ত্রুটি middleware এ পাঠানো
  }
};

এখানে next(err) ব্যবহার করে ত্রুটিটি error-handling middleware এ পাঠানো হয়েছে। এটি ব্যবহৃত হয় যখন try-catch ব্লকের মধ্যে কোনো ত্রুটি ঘটলে তা পরবর্তী পর্যায়ে সরাসরি হ্যান্ডল করা হয়।

৩. Validation এবং Error Handling এর সারাংশ

1. Server-side validation নিশ্চিত করে যে ব্যবহারকারী যে ডেটা পাঠাচ্ছে তা বৈধ এবং সঠিক ফরম্যাটে রয়েছে। এর মাধ্যমে আমরা ভুল ডেটা ডেটাবেসে সংরক্ষণ থেকে বিরত রাখতে পারি।
2. Error handling নিশ্চিত করে যে সার্ভারে ঘটে যাওয়া সব ধরনের ত্রুটির সঠিক বার্তা ব্যবহারকারীকে দেওয়া হয়। এতে ব্যবহারকারী পরিষ্কার ত্রুটি বার্তা পায় এবং উন্নত UX প্রদান করা হয়।

MeanJS তে Mongoose ব্যবহার করে ডেটা validation এবং Express.js তে error-handling middleware ব্যবহার করে সহজেই এ দুই প্রক্রিয়া কার্যকরভাবে পরিচালনা করা যায়।