AngularJS फॉर्म सत्यापन
AngularJS इनपुट डेटा को मान्य कर सकता है।
फॉर्म सत्यापन
AngularJS क्लाइंट-साइड फॉर्म सत्यापन प्रदान करता है।
AngularJS फॉर्म की स्थिति और इनपुट फ़ील्ड (इनपुट, टेक्स्टरेरा, चयन) की निगरानी करता है, और आपको उपयोगकर्ता को वर्तमान स्थिति के बारे में सूचित करने देता है।
AngularJS इस बारे में भी जानकारी रखता है कि उन्हें छुआ गया है, या संशोधित किया गया है या नहीं।
आप इनपुट को मान्य करने के लिए मानक HTML5 विशेषताओं का उपयोग कर सकते हैं, या आप अपने स्वयं के सत्यापन कार्य कर सकते हैं।
क्लाइंट-साइड सत्यापन अकेले उपयोगकर्ता इनपुट को सुरक्षित नहीं कर सकता है। सर्वर साइड सत्यापन भी आवश्यक है।
आवश्यक
यह निर्दिष्ट करने के लिए HTML5 विशेषता का उपयोग requiredकरें कि इनपुट फ़ील्ड को भरा जाना चाहिए:
उदाहरण
इनपुट फ़ील्ड आवश्यक है:
<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 प्रकार का उपयोग emailकरें कि मान एक ई-मेल होना चाहिए:
उदाहरण
इनपुट फ़ील्ड को एक ई-मेल होना चाहिए:
<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फ़ील्ड सामग्री मान्य है
वे सभी इनपुट फ़ील्ड के गुण हैं, और या तो true
या false.
प्रपत्रों में निम्नलिखित अवस्थाएँ होती हैं:
$pristineअभी तक कोई फ़ील्ड संशोधित नहीं किया गया है$dirtyएक या अधिक को संशोधित किया गया है$invalidप्रपत्र सामग्री मान्य नहीं है$validप्रपत्र सामग्री मान्य है$submittedफ़ॉर्म सबमिट किया गया है
वे सभी रूप के गुण हैं, और या तो true
या हैं false।
उपयोगकर्ता को सार्थक संदेश दिखाने के लिए आप इन राज्यों का उपयोग कर सकते हैं। उदाहरण, यदि कोई फ़ील्ड आवश्यक है, और उपयोगकर्ता उसे खाली छोड़ देता है, तो आपको उपयोगकर्ता को एक चेतावनी देनी चाहिए:
उदाहरण
यदि फ़ील्ड को छुआ गया है और खाली है तो त्रुटि संदेश दिखाएं:
<input name="myName" ng-model="myName" required>
<span ng-show="myForm.myName.$touched
&& myForm.myName.$invalid">The name is required.</span>
सीएसएस कक्षाएं
AngularJS 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।
जावास्क्रिप्ट में हम नाम का एक नया निर्देश जोड़कर शुरू करते हैं myDirective।
याद रखें, निर्देश का नामकरण करते समय, आपको ऊंट केस नाम का उपयोग करना चाहिए
myDirective, लेकिन इसे लागू करते समय, आपको -अलग-अलग नाम
का उपयोग करना चाहिए my-directive।
फिर, उस ऑब्जेक्ट को वापस करें जहां आप निर्दिष्ट करते हैं कि हमें आवश्यकता है ngModel, जो कि ngModelController है।
एक लिंकिंग फ़ंक्शन बनाएं जो कुछ तर्क लेता है, जहां चौथा तर्क mCtrlहै ngModelController,
फिर एक फ़ंक्शन निर्दिष्ट करें, इस मामले में नाम दिया गया myValidationहै, जो एक तर्क लेता है, यह तर्क इनपुट तत्व का मान है।
परीक्षण करें कि क्या मान में "ई" अक्षर है, और मॉडल नियंत्रक की वैधता को या तो trueया पर सेट करें false।
अंत में, फ़ंक्शन को अन्य फ़ंक्शंस की एक सरणी में 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 = '[email protected]';
});
</script>
</body>
</html>
डिफ़ॉल्ट ब्राउज़र सत्यापन को अक्षम करने के लिए HTML प्रपत्र विशेषता नोवालिडेट का उपयोग किया जाता है।
उदाहरण समझाया गया
AngularJS निर्देश एनजी-मॉडल इनपुट तत्वों को मॉडल से बांधता है।
मॉडल ऑब्जेक्ट में दो गुण होते हैं: उपयोगकर्ता और ईमेल ।
एनजी-शो के कारण , रंग: लाल वाले स्पैन केवल तभी प्रदर्शित होते हैं जब उपयोगकर्ता या ईमेल $ गंदा और $ अमान्य होता है ।