AngularJS
प्रपत्र सत्यापन

मूल रूप मान्यता

कोणीय की ताकत में से एक क्लाइंट-साइड फॉर्म सत्यापन है।

पारंपरिक रूप से आदानों से निपटना और पूछताछ jQuery- शैली प्रसंस्करण का उपयोग करना समय लेने वाली और बारीक हो सकता है। कोणीय आपको पेशेवर इंटरैक्टिव रूपों को अपेक्षाकृत आसानी से बनाने की अनुमति देता है।

एनजी-मॉडल निर्देश इनपुट फ़ील्ड के साथ दो-तरफ़ा बाइंडिंग प्रदान करता है और आमतौर पर ब्राउज़र को मूल सत्यापन करने से रोकने के लिए प्रपत्र तत्व पर गैर-अमान्य विशेषता भी रखी जाती है।

इस प्रकार, एक सरल रूप दिखेगा:

<form name="form" novalidate>
  <label name="email"> Your email </label>
  <input type="email" name="email" ng-model="email" />
</form>

इनपुट को मान्य करने के लिए कोणीय के लिए, नियमित इनपुट तत्व के रूप में ठीक उसी सिंटैक्स का उपयोग करें, जो एनजी-मॉडल विशेषता के अतिरिक्त को छोड़कर निर्दिष्ट करने के लिए कि चर पर किस चर को बांधना है। पूर्व उदाहरण में ईमेल दिखाया गया है। एक संख्या को मान्य करने के लिए, वाक्यविन्यास होगा:

<input type="number" name="postalcode" ng-model="zipcode" />

मूल रूप सत्यापन के लिए अंतिम चरण नियंत्रक पर एक फॉर्म सबमिट फ़ंक्शन से कनेक्ट हो रहे हैं, बजाय डिफ़ॉल्ट फॉर्म सबमिट करने की अनुमति के, एनजी-सबमिट का उपयोग करके। यह अनिवार्य नहीं है, लेकिन आमतौर पर इसका उपयोग किया जाता है, क्योंकि इनपुट चर पहले से ही गुंजाइश पर उपलब्ध हैं और इसलिए आपके सबमिट फ़ंक्शन के लिए उपलब्ध हैं। रूप को नाम देने के लिए आमतौर पर यह अच्छा अभ्यास भी है। इन परिवर्तनों के परिणामस्वरूप निम्न सिंटैक्स होगा:

<form name="signup_form" ng-submit="submitFunc()" novalidate>
  <label name="email"> Your email </label>
  <input type="email" name="email" ng-model="email" />
  <button type="submit">Signup</button>
</form>

यह उपरोक्त कोड कार्यात्मक है, लेकिन अन्य कार्यक्षमता है जो कोणीय प्रदान करता है।

अगला चरण यह समझना है कि फॉर्म प्रोसेसिंग के लिए एनजी-प्रिस्टाइन एनजी-प्रिस्टाइन , एनजी-डर्टी , एनजी-वैलिड और एनजी-अमान्य का उपयोग करके क्लास की विशेषताओं को संलग्न करता है। अपनी सीएसएस में इन कक्षाओं का उपयोग करने से आप वैध / अमान्य और प्राचीन / गंदे इनपुट क्षेत्रों को स्टाइल कर सकते हैं और इसलिए प्रस्तुति को बदल सकते हैं क्योंकि उपयोगकर्ता प्रपत्र में डेटा दर्ज कर रहा है।

फॉर्म और इनपुट स्टेट्स

कोणीय फॉर्म और इनपुट में विभिन्न राज्य हैं जो सामग्री को मान्य करते समय उपयोगी होते हैं

इनपुट स्टेट्स

उपरोक्त सभी अवस्थाएं बूलियन गुण हैं और यह सच या गलत हो सकती हैं।

इनके साथ, उपयोगकर्ता को संदेश प्रदर्शित करना बहुत आसान है।

<form name="myForm" novalidate>
    <input name="myName" ng-model="myName" required>
    <span ng-show="myForm.myName.$touched && myForm.myName.$invalid">This name is invalid</span>
</form>

यहां, हम उपयोगकर्ता को एक संदेश प्रदर्शित करने के लिए ng-show निर्देश का उपयोग कर रहे हैं यदि उन्होंने एक फॉर्म को संशोधित किया है, लेकिन यह अमान्य है।

सीएसएस कक्षाएं

कोणीय अपने राज्य के आधार पर फॉर्म और इनपुट के लिए कुछ सीएसएस कक्षाएं भी प्रदान करता है

अपने फॉर्म में शैलियों को जोड़ने के लिए आप इन कक्षाओं का उपयोग कर सकते हैं

input.ng-invalid {
  background-color: crimson;
}
input.ng-valid {
  background-color: green;
}

ngMessages

ngMessages का उपयोग दृश्य में सत्यापन संदेश प्रदर्शित करने के लिए शैली को ngMessages लिए किया जाता है।

परंपरागत दृष्टिकोण

ngMessages से पहले, हम सामान्य रूप से सत्यापन संदेशों को कोणीय पूर्व-परिभाषित निर्देशों ng-class का उपयोग करके प्रदर्शित करते हैं। यह दृष्टिकोण कूड़े और repetitive कार्य था।

अब, ngMessages का उपयोग ngMessages हम अपने स्वयं के कस्टम संदेश बना सकते हैं।

उदाहरण

Html:

<form name="ngMessagesDemo">
  <input name="firstname" type="text" ng-model="firstname" required>
  <div ng-messages="ngMessagesDemo.firstname.$error">
    <div ng-message="required">Firstname is required.</div>
  </div>
</form>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.16/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.16/angular-messages.min.js"></script>

जेएस:

var app = angular.module('app', ['ngMessages']);

app.controller('mainCtrl', function ($scope) { 
    $scope.firstname = "Rohit";
});

कस्टम फॉर्म वैलिडेशन

कुछ मामलों में बुनियादी मान्यता पर्याप्त नहीं है। ngModelController पर $validators वस्तु के लिए सत्यापनकर्ता कार्यों को जोड़ने वाले कोणीय समर्थन कस्टम सत्यापन

angular.module('app', [])
  .directive('myValidator', function() {
    return {
      // element must have ng-model attribute
      // or $validators does not work
      require: 'ngModel',
      link: function(scope, elm, attrs, ctrl) {
        ctrl.$validators.myValidator = function(modelValue, viewValue) {
            // validate viewValue with your custom logic
            var valid = (viewValue && viewValue.length > 0) || false;
            return valid; 
        };
      } 
    };

सत्यापनकर्ता को एक निर्देश के रूप में परिभाषित किया गया है, जिसके लिए ngModel आवश्यकता होती है, इसलिए सत्यापनकर्ता को लागू करने के लिए इनपुट नियंत्रण पर कस्टम निर्देश जोड़ें।

<form name="form">
  <input type="text" 
         ng-model="model" 
         name="model" 
         my-validator>
  <pre ng-bind="'my-validator returned: ' + form.model.$valid"></pre>
</form> 

और my-validator को मूल प्रपत्र नियंत्रण पर लागू होने की आवश्यकता नहीं है। यह किसी भी तत्व हो सकता है, जब तक कि यह अपनी विशेषताओं में ng-model में है। यह उपयोगी है जब आपके पास कुछ कस्टम बिल्ड यूआई घटक होते हैं।

नेस्टेड फॉर्म

कभी-कभी यह पृष्ठ पर तार्किक रूप से नियंत्रण और आदानों को समूहीकृत करने के उद्देश्य से घोंसले के रूपों के लिए वांछनीय है। हालाँकि, HTML5 प्रपत्रों को नेस्टेड नहीं किया जाना चाहिए। कोणीय इसके बजाय ng-form आपूर्ति करता है।

<form name="myForm" noValidate>
  <!-- nested form can be referenced via 'myForm.myNestedForm' -->
  <ng-form name="myNestedForm" noValidate>
    <input name="myInput1" ng-minlength="1" ng-model="input1" required />
    <input name="myInput2" ng-minlength="1" ng-model="input2" required />
  </ng-form>

  <!-- show errors for the nested subform here -->
  <div ng-messages="myForm.myNestedForm.$error">
    <!-- note that this will show if either input does not meet the minimum -->
    <div ng-message="minlength">Length is not at least 1</div>
  </div>
</form>

<!-- status of the form -->
<p>Has any field on my form been edited? {{myForm.$dirty}}</p>
<p>Is my nested form valid? {{myForm.myNestedForm.$valid}}</p>
<p>Is myInput1 valid? {{myForm.myNestedForm.myInput1.$valid}}</p>

प्रपत्र का प्रत्येक भाग समग्र रूप की स्थिति में योगदान देता है। इसलिए, यदि इनपुट में से एक myInput1 संपादित किया गया है और $dirty , तो इसका युक्त रूप भी $dirty । प्रत्येक युक्त रूप में यह myNestedForm , इसलिए myNestedForm और myForm दोनों $dirty ।

Async सत्यापनकर्ता

अतुल्यकालिक सत्यापनकर्ता आपको अपने बैकएंड ($ http का उपयोग करके) के बारे में जानकारी को सत्यापित करने की अनुमति देता है।

इस प्रकार के सत्यापनकर्ताओं की आवश्यकता तब होती है जब आपको सर्वर पर संग्रहीत जानकारी तक पहुंचने की आवश्यकता होती है जो आपके ग्राहक पर विभिन्न कारणों से नहीं हो सकती है, जैसे कि उपयोगकर्ता तालिका और अन्य डेटाबेस जानकारी।

Async सत्यापनकर्ताओं का उपयोग करने के लिए, आप अपने input के ng-model का उपयोग करते हैं और $asyncValidators संपत्ति के लिए कॉलबैक फ़ंक्शन को परिभाषित $asyncValidators हैं।

उदाहरण:

निम्न उदाहरण की जाँच करता है कि यदि एक प्रदत्त नाम पहले से मौजूद है, तो बैकएंड एक स्थिति लौटाएगा जो कि वादे को अस्वीकार कर देगा यदि नाम पहले से मौजूद है या यदि यह प्रदान नहीं किया गया था। यदि नाम मौजूद नहीं है तो यह एक सुलझा हुआ वादा लौटाएगा।

ngModel.$asyncValidators.usernameValidate = function (name) {               
     if (name) {
          return AuthenticationService.checkIfNameExists(name); // returns a promise
     } else {
          return $q.reject("This username is already taken!"); // rejected promise
     }
};

अब हर बार इनपुट के ng-model को बदल दिया जाता है, यह फ़ंक्शन चलेगा और परिणाम के साथ एक वादा लौटाएगा।