AngularJS Input Validation
AngularJS প্রয়োগকৃত Data এর বৈধতা গঠন এবং নিয়ন্ত্রন করে
Input Validation
পূর্ববর্তী অধ্যায়ে আমরা AngularJS forms and controls শিখেছিলাম
AngularJS প্রয়োগকৃত Data এর বৈধতা গঠন এবং নিয়ন্ত্রন করে এবং ব্যবহারকারিকে ভুল তথ্য Input করার সময় Notify (সতর্ক) করে
Client-side validation একা ব্যবহারকারির input তথ্যকে নিরাপত্তা দিতে পারে না, Server side validation ও দরকার এই জন্য
Application Code
DOCTYPE html>
<html>
<head>
</head>
<body>
<h2>Validation Example</h2>
<form ng-app=”” 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>
function validateCtrl($scope) {
$scope.user = ‘John Doe’;
$scope.email = ‘john.doe@gmail.com’;
}
</script>
</body>
</html>
নিজে চেষ্টা করুন
The HTML এর অবৈধগুন (novalidate) ব্যবহার করা হয় default browser validation অক্ষম (Disable) করতে
উদাহরনের ব্যখাঃ
AngularJS নিরদেশক ng-model input ডাঁটা গুলকে একটা মডেলের মাধমে সাজিয়ে ফেলে
The model object এর দুইটা অংশ আছে : User আর Email
ng-show এর কারনে , spans লাল রঙ্গে প্রদর্শিত হয় তখন ই যখন User অথবা Email $dirty (ত্রুটি পূর্ণ ) and $invalid(অবৈধ)
