AngularJS में फॉर्म सत्यापन

सत्यापन AngularJS की स्वचालित विशेषताओं में से एक है। हालांकि, ज़ाहिर है, यहाँ कुछ भी जादुई नहीं है। फार्म , इनपुट , चयन , textarea के रूप में इस तरह के मानक HTML टैग भी निर्देश हैं। और जब वे ngModel , आवश्यक, ngPattern, आदि के साथ संयोजन करते हैं, तो सत्यापन काम करना शुरू कर देता है।

ngModel

एक निर्देश जिसके बिना सत्यापन काम नहीं करेगा। इस निर्देश के लिए जिम्मेदार है:

• मॉडल और दृश्य के बीच दो-तरफ़ा बंधन (नियंत्रण / निर्देश input , textarea , select , आदि के लिए आवश्यक);
• सत्यापन के लिए एक इंटरफ़ेस प्रदान करता है: $render() , $setValidity() , $setViewValue() , $parsers , $formatters , आदि। (आवश्यक निर्देश / सत्यापनकर्ता के लिए required , number , email , url , ngPattern आदि);
• नियंत्रण की स्थिति को बचाने (वैध / अमान्य, गंदा / प्राचीन, सत्यापन त्रुटियां);
• तत्वों के लिए उपयुक्त कक्षाएं सेट करना (एनजी-वैध, एनजी-अमान्य, एनजी-गंदा, एनजी-प्रिस्टाइन);
• मूल प्रपत्र के लिए नियंत्रण पंजीकृत करें।

इन सभी जिम्मेदारियों को NgModelController के माध्यम से कार्यान्वित किया जाता है।

ईमेल सत्यापन ( डेमो ) का सबसे सरल उदाहरण।

  <input type="email" ng-model="myEmail"> 

आकार

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

• myForm.myInput.$valid
• myForm.myInput.$error
• myForm.$invalid
• myForm.$error.required

सत्यापन और त्रुटि की जानकारी भी रूपों और नियंत्रणों के वर्गों में परिलक्षित होती है। उदाहरण के लिए: ng-invalid-required , ng-dirty , ng-valid , ng-valid-email ।

एक सत्यापनकर्ता निर्देश बनाना

सत्यापनकर्ता निर्देश बनाते समय, आपको दो मामलों के लिए हैंडलर लागू करने की आवश्यकता होती है:

• मॉडल परिवर्तन - $ स्वरूपक सरणी से सभी कार्यों को कन्वेयर कहा जाएगा;
• प्रतिनिधित्व के परिवर्तन - $ पार्सर्स सरणी से सभी कार्यों को पाइपलाइन कहा जाएगा। सत्यापन के समर्थन के साथ अपने स्वयं के निर्देशों को लागू करते समय, $ setViewValue विधि के लिए एक कॉल इन कार्यों के लिए एक कॉल होगा।

एक सत्यापनकर्ता का एक उदाहरण जो पासवर्ड मापदंडों की जांच करता है - कम से कम 6 वर्ण, कम से कम 1 अंक और कम से कम एक गैर-डिजिटल चरित्र ( डेमो ):

  mod.directive('strongPassRequired', function () { var isValid = function(s) { return s && s.length > 5 && /\D/.test(s) && /\d/.test(s); }; return { require:'ngModel', link:function (scope, elm, attrs, ngModelCtrl) { ngModelCtrl.$parsers.unshift(function (viewValue) { ngModelCtrl.$setValidity('strongPass', isValid(viewValue)); return viewValue; }); ngModelCtrl.$formatters.unshift(function (modelValue) { ngModelCtrl.$setValidity('strongPass', isValid(modelValue)); return modelValue; }); } }; }); 

$setValidity विधि में, पहला पैरामीटर वह स्ट्रिंग है जिसका उपयोग किया जाएगा:

• नियंत्रण के लिए $error ऑब्जेक्ट की संपत्ति के रूप में जिस पर यह सत्यापनकर्ता लागू होगा। उदाहरण के लिए, myPassForm.myPass.$error.strongPass ;
• नियंत्रण के लिए एक सीएसएस वर्ग ( ng-valid-strong-pass या ng-invalid-strong-pass ) के रूप में जिस पर यह सत्यापनकर्ता लागू किया जाएगा, और इसके सभी मूल रूप।

सत्यापनकर्ता समर्थन के साथ दृश्य निर्देश

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

 .directive('uiCheckbox', function () { return { restrict: 'EA', replace: true, transclude: true, template: '<div class="checkbox-control" ng-click="toggle()">' + '<span ng-class="{\'icon-check-empty\': !value, \'icon-check\': value}"></span>' + '<span class="checkbox-label" ng-transclude></span>' + '</div>', require: 'ngModel', scope: true, link: function (scope, element, attrs, ngModelCtrl) { scope.value = false; ngModelCtrl.$render = function () { scope.value = ngModelCtrl.$viewValue; }; scope.toggle = function () { scope.value = !scope.value; ngModelCtrl.$setViewValue(scope.value); }; } }; }); 

यहाँ प्रमुख बिंदु हैं:

• आवश्यकता है कि ngModelController को link फ़ंक्शन में पास किया जाना चाहिए - require: 'ngModel' ;
• ngModelCtrl.$render मेथड का कार्यान्वयन ngModelCtrl.$render - जब ngModel में निर्दिष्ट मॉडल ngModel ;
• उपयोगकर्ता क्रियाओं के लिए जो एक मॉडल परिवर्तन का नेतृत्व करना चाहिए, आपको ngModelCtrl.$setViewValue को कॉल करना होगा। इस मामले में, $ पार्सर्स सरणी से सभी कार्यों को बुलाया जाएगा।

सत्यापन और पृथक गुंजाइश निर्देश

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

अछूता रूप

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

एक समान कार्य के लिए, मेरे पास एक व्यावहारिक है, लेकिन बहुत सुंदर समाधान नहीं है। शायद यह किसी के लिए उपयोगी है। या कोई बेहतर समाधान पेश करेगा। डेमो ।
निर्देशन स्रोत कोड:

 mod.directive('isolatedForm', function(){ return { require: 'form', link: function(scope, formElement, attrs, formController) { var parentFormCtrl = formElement.parent().controller('form'); var core$setValidity = formController.$setValidity; formController.$setValidity = function(validationToken, isValid, control) { core$setValidity(validationToken, isValid, control); if (!isValid && parentFormCtrl) { parentFormCtrl.$setValidity(validationToken, true, formController); } } } }; }); 

मुख्य विचार हर बार होता है जब कोई प्रपत्र ऊपर से सूचित करना चाहता है कि कुछ अमान्य है, इसके बजाय रिपोर्ट करें कि यह मान्य है।