AngularJS ফর্ম বৈধতা
AngularJS ইনপুট ডেটা যাচাই করতে পারে।
ফর্ম বৈধতা
AngularJS ক্লায়েন্ট-সাইড ফর্ম বৈধতা প্রদান করে।
AngularJS ফর্ম এবং ইনপুট ক্ষেত্রগুলির অবস্থা (ইনপুট, টেক্সটেরিয়া, নির্বাচন) ট্র্যাক করে এবং আপনাকে বর্তমান অবস্থা সম্পর্কে ব্যবহারকারীকে অবহিত করার অনুমতি দেয়।
AngularJS এগুলি স্পর্শ করা হয়েছে, পরিবর্তিত হয়েছে কিনা সে সম্পর্কেও তথ্য রাখে।
আপনি ইনপুট যাচাই করতে মানক HTML5 বৈশিষ্ট্য ব্যবহার করতে পারেন, বা আপনার নিজস্ব বৈধতা ফাংশন তৈরি করতে পারেন।
গুরুত্বপূর্ণ নোট:
ক্লায়েন্ট-সাইড বৈধকরণ একা ব্যবহারকারীর ইনপুট সুরক্ষিত করতে পারে না। সার্ভার সাইড বৈধতাও প্রয়োজন।
প্রয়োজনীয় বৈশিষ্ট্য
ইনপুট ক্ষেত্রটি অবশ্যই পূরণ করতে হবে তা নির্দিষ্ট করতে HTML5 প্রয়োজনীয় বৈশিষ্ট্য ব্যবহার করুন:
উদাহরণ
প্রয়োজনীয় ইনপুট ক্ষেত্র:
<form name="myForm">
<input name="myInput" ng-model="myInput" required>
</form>
<p>The input's valid state is:</p>
<h1>{{myForm.myInput.$valid}}</h1>ইমেল যাচাইকরণ
মানটি একটি ইমেল হওয়া উচিত তা নির্দিষ্ট করতে HTML5 প্রকারের ইমেল ব্যবহার করুন:
উদাহরণ
ইনপুট ক্ষেত্রটি অবশ্যই একটি ইমেল হতে হবে:
<form name="myForm">
<input name="myInput" ng-model="myInput" type="email">
</form>
<p>The input's valid state is:</p>
<h1>{{myForm.myInput.$valid}}</h1>ফর্ম পর্যায় এবং ইনপুট পর্যায়
AngularJS ক্রমাগত ফর্ম এবং ইনপুট ক্ষেত্রের অবস্থা আপডেট করে।
ইনপুট ক্ষেত্রের অবস্থান
| অবস্থা | ব্যাখ্যা |
|---|---|
| $untouched | মাঠটি এখনও অক্ষত |
| $touched | মাঠ ছুঁয়ে গেছে |
| $pristine | এখনও মাঠ বদলানো হয়নি |
| $dirty | ক্ষেত্র পরিবর্তন করা হয়েছে |
| $invalid | ক্ষেত্র বিষয়বস্তু বৈধ নয় |
| $valid | ক্ষেত্র বিষয়বস্তু বৈধ |
এগুলি সমস্ত ইনপুট ক্ষেত্রের বৈশিষ্ট্য, এবং সত্য বা মিথ্যা হতে পারে।
ফর্ম স্তর
| অবস্থা | ব্যাখ্যা |
|---|---|
| $pristine | এখনও কোন ক্ষেত্র পরিবর্তন করা হয়নি |
| $dirty | এক বা একাধিক পরিবর্তন করা হয় |
| $invalid | ফর্ম বিষয়বস্তু বৈধ নয় |
| $valid | ফর্ম বিষয়বস্তু বৈধ |
| $submitted | ফর্ম জমা দেওয়া হয়েছে |
এই স্তরগুলি ব্যবহারকারীর কাছে অর্থপূর্ণ বার্তাগুলি প্রদর্শন করতে ব্যবহার করা যেতে পারে।
উদাহরণ
যদি ক্ষেত্রটি স্পর্শ করা হয় এবং খালি থাকে তবে একটি ত্রুটি বার্তা প্রদর্শন করুন:
<input name="myName" ng-model="myName" required>
<span ng-show="myForm.myName.$touched && myForm.myName.$invalid">The name is required.</span>CSS ক্লাস
AngularJS তাদের অবস্থানের উপর নির্ভর করে ফর্ম এবং ইনপুট ক্ষেত্রে CSS ক্লাস যোগ করে।
ইনপুট ক্ষেত্রের জন্য ক্লাস
সিএসএস ক্লাস
ng-untouched- মাঠ এখনও ছুঁয়ে যায়নি
ng-touched- মাঠ ছুঁয়ে গেছে
ng-pristine- মাঠ এখনও পরিবর্তন করা হয়নি
ng-dirty- ক্ষেত্র পরিবর্তন করা হয়েছে
ng-valid- ক্ষেত্রের বিষয়বস্তু বৈধ
ng-invalid- ক্ষেত্রের বিষয়বস্তু বৈধ নয়
উদাহরণ CSS
input.ng-invalid {
background-color: pink;
}
input.ng-valid {
background-color: lightgreen;
}ফর্মের জন্য ক্লাস
সিএসএস ক্লাস
ng-pristine- এখনও কোন ক্ষেত্র পরিবর্তন করা হয়নি
ng-dirty- এক বা একাধিক ক্ষেত্র পরিবর্তিত হয়েছে
ng-valid- ফর্ম বিষয়বস্তু বৈধ
ng-invalid- ফর্ম বিষয়বস্তু বৈধ নয়
উদাহরণ CSS
form.ng-pristine {
background-color: lightblue;
}
form.ng-dirty {
background-color: pink;
}তাদের নির্দিষ্ট মান মিথ্যা হলে ক্লাসগুলি সরানো হয়।
এই ক্লাসগুলিতে শৈলী যোগ করুন এবং আপনার অ্যাপ্লিকেশনটিকে আরও ভাল এবং আরও স্বজ্ঞাত ব্যবহারকারী ইন্টারফেস দিন।
কাস্টম বৈধতা
আপনার নিজস্ব বৈধতা ফাংশন তৈরি করা একটু বেশি জটিল; আপনার অ্যাপ্লিকেশনে একটি নতুন নির্দেশনা যোগ করা উচিত এবং নির্দিষ্ট আর্গুমেন্ট সহ একটি ফাংশনের ভিতরে বৈধতা পরিচালনা করা উচিত।
উদাহরণ
আপনার নিজস্ব নির্দেশিকা তৈরি করুন যাতে একটি কাস্টম বৈধতা ফাংশন রয়েছে, এবং my-directive ব্যবহার করে চিহ্নিত করুন।
একটি ক্ষেত্র বৈধ তখনই যদি মানটিতে "e" অক্ষর থাকে:
<form name="myForm">
<input name="myInput" ng-model="myInput" required my-directive>
</form>
<script>
var app = angular.module('myApp', []);
app.directive('myDirective', function() {
return {
require: 'ngModel',
link: function(scope, element, attr, mCtrl) {
function myValidation(value) {
if (value.indexOf("e") > -1) {
mCtrl.$setValidity('charE', true);
} else {
mCtrl.$setValidity('charE', false);
}
return value;
}
mCtrl.$parsers.push(myValidation);
}
};
});
</script>উদাহরণ বর্ণনা:
এইচটিএমএল-এ, মাই-ডাইরেক্টিভ অ্যাট্রিবিউট ব্যবহার করে একটি নতুন নির্দেশিকা নির্দিষ্ট করা হয়।
জাভাস্ক্রিপ্টে, আমরা myDirective নামে একটি নতুন নির্দেশিকা যোগ করে শুরু করি।
নির্দেশিকা নামকরণের সময়, আপনাকে অবশ্যই একটি উট-কেস নাম, myDirective ব্যবহার করতে হবে, কিন্তু এটিকে কল করার সময়, আপনাকে অবশ্যই - পৃথক করা নাম, my-directive ব্যবহার করতে হবে।
তারপরে একটি বস্তু ফেরত দিন যা নির্দিষ্ট করে যে ngModel প্রয়োজন, যা ngModelController।
একটি লিঙ্ক ফাংশন তৈরি করুন যা কিছু আর্গুমেন্ট নেয়, যার চতুর্থ আর্গুমেন্ট হল mCtrl ngModelController।
তারপর myValidation নামে একটি ফাংশন নির্দিষ্ট করুন, যার আর্গুমেন্ট হল ইনপুট এলিমেন্টের মান।
মানটিতে "e" অক্ষর রয়েছে কিনা তা পরীক্ষা করুন এবং মডেল কন্ট্রোলারের বৈধতা সত্য বা মিথ্যাতে সেট করুন।
অবশেষে, mCtrl.$parsers.push(myValidation); অন্যান্য ফাংশনগুলির অ্যারেতে myValidation ফাংশন যোগ করে যা প্রতিবার ইনপুট মান পরিবর্তন করার সময় কার্যকর করা হয়।
বৈধতা উদাহরণ
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>
<h2>Validation Example</h2>
<form ng-app="myApp" ng-controller="validateCtrl"
name="myForm" novalidate>
<p>Username:<br>
<input type="text" name="user" ng-model="user" required>
<span style="color:red" ng-show="myForm.user.$dirty && myForm.user.$invalid">
<span ng-show="myForm.user.$error.required">Username is required.</span>
</span>
</p>
<p>Email:<br>
<input type="email" name="email" ng-model="email" required>
<span style="color:red" ng-show="myForm.email.$dirty && myForm.email.$invalid">
<span ng-show="myForm.email.$error.required">Email is required.</span>
<span ng-show="myForm.email.$error.email">Invalid email address.</span>
</span>
</p>
<p>
<input type="submit"
ng-disabled="myForm.user.$dirty && myForm.user.$invalid ||
myForm.email.$dirty && myForm.email.$invalid">
</p>
</form>
<script>
var app = angular.module('myApp', []);
app.controller('validateCtrl', function($scope) {
$scope.user = 'John Doe';
$scope.email = 'john.doe@gmail.com';
});
</script>
</body>
</html>ডিফল্ট ব্রাউজার বৈধতা নিষ্ক্রিয় করতে HTML ফর্ম novalidate বৈশিষ্ট্য ব্যবহার করা হয়।
উদাহরণ বর্ণনা
AngularJS ng-model নির্দেশিকা মডেলের সাথে ইনপুট উপাদানগুলিকে আবদ্ধ করে।
মডেল অবজেক্টের দুটি বৈশিষ্ট্য ব্যবহারকারী এবং ইমেল রয়েছে।
ng-show এর কারণে, color:red সহ স্প্যান শুধুমাত্র তখনই প্রদর্শিত হয় যখন ব্যবহারকারী বা ইমেল $dirty এবং $invalid হয়।
ব্যায়াম
কোন AngularJS নির্দেশিকা একটি ত্রুটি বার্তা প্রদর্শন করতে ব্যবহৃত হয় যদি একটি ক্ষেত্র স্পর্শ করা হয় এবং অবৈধ?
প্রশিক্ষণ শুরু করুন:
AngularJS ফর্ম বৈধতাHTML5 বৈশিষ্ট্য এবং AngularJS নির্দেশাবলীসংমিশ্রণে ব্যবহার করে।
উপরের বিকল্পগুলি থেকে সঠিক উত্তরনির্বাচন করুন.
সর্বোত্তম অনুশীলন
প্রয়োজনীয়, টাইপ="ইমেল", প্যাটার্ন ইত্যাদি ব্যবহার করে মৌলিক যাচাইকরণ সম্পাদন করুন।
ত্রুটি বার্তাগুলি এমনভাবে প্রদর্শন করুন যা ব্যবহারকারীর পক্ষে বোঝা সহজ।
ng-valid, ng-invalid-এর মতো CSS ক্লাস ব্যবহার করে ফিল্ড স্টেট দেখান।
সর্বদা সার্ভার-সাইড বৈধতাও সম্পাদন করুন।
যখনই সম্ভব স্ট্যান্ডার্ড HTML5 বৈধতা ব্যবহার করুন।