AngularJS ফর্ম পরীক্ষা

AngularJS ইনপুট ডাটা পরীক্ষা করতে পারে

ফর্ম পরীক্ষা

AngularJS ক্লায়েন্ট সার্ভার ফর্ম পরীক্ষা প্রদান করে

AngularJS ফর্ম এবং ইনপুট ফিল্ড (input, textarea, select) এর অবস্থা নিরীক্ষা করে এবং বর্তমান অবস্থা নিয়ে ব্যবহারকারীকে সংবাদ দিতে অনুমতি দেয়

AngularJS একটি তথ্য সহযোগী করে দেয় যে কিনা এগুলো টাচ করা হয়েছে বা সংশোধিত হয়েছে

আপনি প্রামাণ্য HTML5 এট্রিবিউট ব্যবহার করে ইনপুট রূপান্তর পরীক্ষা করতে পারবেন এবং নিজস্ব পরীক্ষা ফাংশন তৈরি করতে পারবেন

ক্লায়েন্ট সার্ভার বিন্যাস বিন্যাস একলাংশভূত ব্যবহার করা যায় না। সার্ভার সাইড বিন্যাসও প্রয়োজন

required

HTML5 এট্রিবিউট ব্যবহার করুন required এই মানকের মান ইনপুট ফিল্ডটি বাধ্যতামূলক হবে:

একটি কাস্টম পরীক্ষা ফাংশন নিয়ে

এই ইনপুট ফিল্ডটি বাধ্যতামূলক হবে:

<form name="myForm">  
  <input name="myInput" ng-model="myInput" required>  
</form>  
<p>ইনপুটের বৈধ অবস্থা হল:</p>  
<h1>{{myForm.myInput.$valid}}</h1>

স্বয়ং প্রয়োগ করুন

email

HTML5 টাইপ ব্যবহার করুন email এই মানকের মান একটি ইমেইল হতে হবে:

একটি কাস্টম পরীক্ষা ফাংশন নিয়ে

এই ইনপুট ফিল্ডটি একটি ইমেইল হতে হবে:

<form name="myForm">  
  <input name="myInput" ng-model="myInput" type="email">  
</form>  
<p>ইনপুটের বৈধ অবস্থা হল:</p>  
<h1>{{myForm.myInput.$valid}}</h1>

স্বয়ং প্রয়োগ করুন

ফর্ম অবস্থা এবং ইনপুট অবস্থা

অ্যাংগুলারজেস ফর্ম এবং ইনপুট ফিল্ডের অবস্থা নিয়মিত অপদান করে

ইনপুট ফিল্ডের নিম্নলিখিত অবস্থা রয়েছে:

• $untouched এই ফিল্ডটি স্পর্শ করা হয়নি
• $touched এই ফিল্ডটি স্পর্শ করা হয়েছে
• $pristine এই ফিল্ডটি সম্পাদিত হয়নি
• $dirty এই ফিল্ডটি সম্পাদিত হয়েছে
• $invalid ফিল্ড কনটেন্ট অবলুপ
• $valid ফিল্ড কনটেন্ট বৈধ

এইগুলি সকলই ইনপুট ফিল্ডের বৈশিষ্ট্য, তারা সত্য বা বাস্তব হতে পারে

ফর্মের নিম্নলিখিত অবস্থা রয়েছে:

• $pristine কোনও ক্ষেত্র সম্পাদিত হয়নি
• $dirty একটি বা একাধিক ক্ষেত্র সম্পাদিত হয়েছে
• $invalid ফর্ম কনটেন্ট অবলুপ
• $valid ফর্ম কনটেন্ট বৈধ
• $subscribed ফর্ম সম্পাদিত হয়েছে

এইগুলি সকলই ফর্মের বৈশিষ্ট্য, তারা সত্য বা বাস্তব হতে পারে

আপনি এই অবস্থাগুলিকে ব্যবহার করে ব্যবহারকারীকে মায়ান্ত্রিত বার্তা দিতে পারেন। উদাহরণস্বরূপ, যদি কোনও ক্ষেত্র বাধ্যতামূলক এবং ব্যবহারকারী তা খালি রাখে, তবে ব্যবহারকারীকে সতর্ক করা হবে:

একটি কাস্টম পরীক্ষা ফাংশন নিয়ে

যদি কোনও ক্ষেত্র স্পর্শ করা হয়েছে এবং খালি, তবে ত্রুটি সংবাদ দেখানো হবে:

<input name="myName" ng-model="myName" required>  
<span ng-show="myForm.myName.$touched && myForm.myName.$invalid">নাম বাধ্যতামূলক ক্ষেত্র।</span>

স্বয়ং প্রয়োগ করুন

CSS শ্রেণী

অ্যাংগুলারজেস ফর্ম এবং ইনপুট ফিল্ডের অবস্থানুসারে CSS শ্রেণী যোগ করে

নিম্নলিখিত শ্রেণীগুলি ইনপুট ফিল্ডে যোগ করা হয়েছে বা ইনপুট ফিল্ড থেকে সরিয়ে দেওয়া হয়েছে:

• ng-untouched এই ফিল্ডটি স্পর্শ করা হয়নি
• ng-touched এই ফিল্ডটি স্পর্শ করা হয়েছে
• ng-pristine এই ফিল্ডটি সম্পাদিত হয়নি
• ng-dirty এই ফিল্ডটি সম্পাদিত হয়েছে
• ng-valid ফিল্ড কনটেন্ট বৈধ
• ng-invalid ফিল্ড কনটেন্ট অবলুপ
• ng-valid-key প্রত্যেকবার একটি কীয়ার পরীক্ষা করা হয়। উদাহরণ:ng-valid-requiredএকাধিক বাধ্যতামূলক পরীক্ষার সময় অত্যন্ত মূল্যবান
• ng-invalid-key উদাহরণ:ng-invalid-required

নিম্নলিখিত শ্রেণীগুলি ফর্মে যোগ করা হয়েছে বা ফর্ম থেকে সরিয়ে দেওয়া হয়েছে:

• ng-pristine কোনও ফিল্ড সম্পাদিত হয়নি
• ng-dirty একটি বা একাধিক ফিল্ড সম্পাদিত হয়েছে
• ng-valid ফর্ম কনটেন্ট বৈধ
• ng-invalid ফর্ম কনটেন্ট অবলুপ
• ng-valid-key প্রত্যেকবার একটি কীয়ার পরীক্ষা করা হয়। উদাহরণ:ng-valid-requiredএকাধিক বাধ্যতামূলক পরীক্ষার সময় অত্যন্ত মূল্যবান
• ng-invalid-key উদাহরণ:ng-invalid-required

যদি শ্রেণীর প্রতিনিধিত্বকারী মান falseতাহলে এই শ্রেণীগুলি মুছে যাবে。

এই শ্রেণীগুলিতে সাইলেস্ট লাগান, আপনার অ্যাপ্লিকেশনকে ভালো এবং স্পষ্ট ব্যবহারকারী ইন্টারফেস প্রদান করুন。

একটি কাস্টম পরীক্ষা ফাংশন নিয়ে

স্ট্যান্ডার্ড সিএসএস (CSS) সাইলেস্ট লাগানো:

<style>
input.ng-invalid {
  background-color: pink;
};
input.ng-valid {
  background-color: lightgreen;
};
</style>

স্বয়ং প্রয়োগ করুন

ফর্মের সাইলেস্টও সম্পাদন করা যায়。

একটি কাস্টম পরীক্ষা ফাংশন নিয়ে

অসম্পাদিত (মৌলিক) ফর্ম এবং সম্পাদিত ফর্মের জন্য সাইলেস্ট লাগানো:

<style>
form.ng-pristine {
  background-color: lightblue;
};
form.ng-dirty {
  background-color: pink;
};
</style>

স্বয়ং প্রয়োগ করুন

কাস্টম পরীক্ষা

একটি কাস্টম পরীক্ষা ফাংশন সৃষ্টি করতে কিছু দক্ষতা চায়; আপনাকে নতুন ইনস্ট্রাকশন যোগ করতে হবে

একটি কাস্টম পরীক্ষা ফাংশন নিয়ে

আপনার নিজস্ব ইনস্ট্রাকশন সৃষ্টি করুন 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>

স্বয়ং প্রয়োগ করুন

HTML-তে, নতুন ইনস্ট্রাকশন my-directive উল্লেখ করুন

JavaScript-তে আমরা প্রথমে myDirective নতুন ইনস্ট্রাকশন

মনে রাখুন যে, একটি ইনস্ট্রাকশন নামকরণ করার সময় myDirectiveকিন্তু এটা আহ্বান করার সময় হাইফেন দিয়ে নাম ব্যবহার করুন my-directive.

তবে, একটি অবজেক্ট ফেরত দেয় ngModelযেমন ngModelController.

একটি লিঙ্ক ফাংশন সৃষ্টি করুন যা কিছু পারামিটার নিয়ে আসে mCtrl হল ngModelController.

তবে, একটি ফাংশন সংজ্ঞায়িত করুন myValidationএটি একটি পারামিটার নিয়ে আসে যা ইনপুট ইলেকমেন্টের মান

এই মানকে "e" হিসাবে কি সামিল আছে তা পরীক্ষা করুন এবং মডেল কন্ট্রোলারের বৈধতা সেট করুন true বা false.

শেষ পর্যন্তmCtrl.$parsers.push(myValidation); প্রয়োজনীয় myValidation কার্যক্রম অন্য কার্যক্রমের গ্রিডে যোগ করা হয়, যা প্রত্যেক ইনপুট মান পরিবর্তনের সময় চালু করা হবে。

পরীক্ষামূলক উদাহরণ

<!DOCTYPE html>
<html>
<script src="https://cdn.staticfile.net/angular.js/1.6.9/angular.min.js"></script>
<body>
<h2>পরীক্ষামূলক উদাহরণ</h2>
<form ng-app="myApp"  ng-controller="validateCtrl"
name="myForm" novalidate>
<p>ব্যবহারকারী নাম：<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">ব্যবহারকারী নাম প্রয়োজনীয়</span>
  </span>
</p>
<p>ইমেইল：<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">ইমেইল প্রয়োজনীয়</span>
  <span ng-show="myForm.email.$error.email">অবৈধ ইমেইল ঠিকানা。</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 = 'Bill Gates';
  $scope.email = 'bill.gates@gmail.com';
});
</script>
</body>
</html>

স্বয়ং প্রয়োগ করুন

HTML ফর্ম বৈশিষ্ট্য novalidate ডিফল্ট ব্রাউজার পরীক্ষা নিষ্ক্রান্ত করা

উদাহরণ ব্যাখ্যা:

AngularJS ইনস্ট্রাকশন ng-model ইনপুট ইলিমেন্টকে মডেলের সাথে বাইন্ড করা হয়

মডেল অবজেক্টের দুটি বৈশিষ্ট্য রয়েছে:user এবং email.

বদ্ধলিপি ng-showহলেই, user বা email $dirty এবং $invalid color:red এর সাথে স্প্যানসমূহ দেখা যাবে