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 ডিরেকটিভের মাধ্যমে ত্রুটির বার্তা প্রদর্শন করা সম্ভব।
Read more
