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>

स्वयं आयात करें

फॉर्म स्थिति और इनपुट स्थिति

AngularJS फॉर्म और इनपुट फील्ड की स्थिति लगातार अद्यतन करता है।

इनपुट फील्ड की निम्नलिखित स्थिति है:

• $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 कोटियां

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);
        } अन्यथा {
          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>

स्वयं आयात करें

एचटीएमएल फॉर्म प्रतियोगिता novalidate डिफ़ॉल्ट ब्राउज़र वेरिफिकेशन को निष्क्रिय करने के लिए उपयोग किया जाता है

उदाहरण व्याख्या:

एंजुलरजेएस इन्स्ट्रक्शन ng-model इनपुट एलीमेंट को मॉडल से बांधा जाता है

मॉडल ऑब्जैक्ट के दो गुण हैं:user और email।

कारण ng-showकेवल जब user या email $dirty और $invalid केवल जब color:red के स्पैन को दिखाया जाएगा।