मैं एंगुलरज के साथ फॉर्म वैधता की जांच कैसे करूं?

Question

मैं कोणीयरों के लिए बहुत नया हूं। कहो कि मेरे ऐप में एक फॉर्म है। निरीक्षक का उपयोग करते हुए, मैंने देखा कि यदि कोणीयज यह सोचते हैं कि फॉर्म अमान्य है, तो यह प्रपत्र में एक गैर-अमान्य वर्ग जोड़ता है। लवली।

तो ऐसा लगता है कि फॉर्म वैध है या नहीं, यह जांचने के लिए मुझे Jquery चयनकर्ता के साथ अपने कोड को प्रदूषित करने की आवश्यकता है ?! फॉर्म कंट्रोलर का उपयोग किए बिना फॉर्म वैधता को इंगित करने का कोणीय तरीका क्या है?

Comments

"एक फार्म नियंत्रक का उपयोग किए बिना" नियंत्रक का उपयोग क्यों नहीं किया जाता है? वह कोणीय तरीका है

— KayEss

Answer 1

जब आप अपने <form>अंदर टैग डालते हैं, तो AngularJS अपने आप फॉर्म कंट्रोलर जोड़ता है (वास्तव में एक निर्देश है, जिसे formनेस्सेसरी व्यवहार कहा जाता है)। नाम विशेषता का मान आपके कार्यक्षेत्र में आबद्ध होगा; इतना कुछ <form name="yourformname">...</form>संतुष्ट करेगा:

एक फॉर्म FormController का एक उदाहरण है। नाम की विशेषता का उपयोग करके प्रपत्र उदाहरण को वैकल्पिक रूप से दायरे में प्रकाशित किया जा सकता है।

तो फॉर्म वैधता की जांच करने के लिए, आप $scope.yourformname.$validदायरे की संपत्ति के मूल्य की जांच कर सकते हैं।

प्रपत्रों के बारे में अधिक जानकारी आप डेवलपर के मार्गदर्शक अनुभाग में प्राप्त कर सकते हैं ।

Comments

आम तौर पर इसे जेएस के अंदर कहा जाएगा $scope.yourformname.$valid।

— दान एटकिंसन

आप स्पष्ट रूप से प्रपत्र <form नाम = "फार्म"> जैसे कुछ नाम देने के लिए की जरूरत है, तो $ scope.form उपलब्ध होना चाहिए ..

— StrangeLoop

यदि संपत्ति को नियंत्रक में परिभाषित नहीं किया गया है, तो इसे स्पष्ट रूप से नियंत्रक में शुरू करें$scope.myformname = {};

— निकोलस जेनेल

@ जॉननग्येन मुझे वही सटीक त्रुटि मिली। मैंने यह काम किया है। अपने सबमिट फ़ंक्शन में, फॉर्म को एक तर्क के रूप में पास करें। फिर आप अपने कंट्रोलर के पास जा सकते हैं और यह देखने के लिए जांच सकते हैं कि फॉर्म आपकेFormName द्वारा मान्य है। $ वैध। उन्होंने कोणीय दस्तावेज में इस उदाहरण का उपयोग किया, उनके प्लंकर ने यहां पाया: plnkr.co/edit/Q8mlPOSgkaPstg4uvjlc?p=preview

— devonj

के ng-showबजाय उपयोग करना सुनिश्चित करें ng-if, undefinedत्रुटि हो रही थी ।

— ब्रायन

Answer 2

उदाहरण

<div ng-controller="ExampleController">
  <form name="myform">
   Name: <input type="text" ng-model="user.name" /><br>
   Email: <input type="email" ng-model="user.email" /><br>
  </form>
</div>

<script>
  angular.module('formExample', [])
    .controller('ExampleController', ['$scope', function($scope) {

     //if form is not valid then return the form.
     if(!$scope.myform.$valid) {
       return;
     }
  }]);
</script>

Answer 3

आप भी उपयोग कर सकते हैं myform.$invalid

उदाहरण के लिए

if($scope.myform.$invalid){return;}

Answer 4

प्रपत्र

• मॉड्यूल एनजी में निर्देशन जो कि फॉर्मकंट्रोलर को त्वरित करता है।

यदि नाम विशेषता निर्दिष्ट की जाती है, तो प्रपत्र नियंत्रक को इस नाम के तहत वर्तमान स्कोप पर प्रकाशित किया जाता है।

उपनाम: ngForm

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

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

एनजी-वैध सेट है अगर फॉर्म वैध है।

प्रपत्र अमान्य है, तो गैर-अमान्य सेट किया गया है।

एनजी-प्रिस्टाइन सेट किया जाता है यदि फॉर्म प्रिस्टिन है।

प्रपत्र गंदा है तो एनजी-गंदा सेट किया जाता है।

यदि फॉर्म सबमिट किया गया था तो एनजी-सबमिट किया गया है।

ध्यान रखें कि जब भी जोड़ा और हटाया जाता है, तो ngAnimate इनमें से प्रत्येक वर्ग का पता लगा सकता है।

फ़ॉर्म सबमिट करना और डिफ़ॉल्ट कार्रवाई को रोकना

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

इस कारण से, कोणीय तब तक डिफ़ॉल्ट एक्शन (सर्वर को सबमिट करने) को रोकता है जब तक कि तत्व में एक्शन विशेषता निर्दिष्ट न हो।

आप निम्न दो तरीकों में से एक का उपयोग कर सकते हैं, यह निर्दिष्ट करने के लिए कि किसी फार्म को जमा करते समय जावास्क्रिप्ट विधि को क्या कहा जाना चाहिए:

प्रपत्र तत्व पर ngSubmit निर्देश

टाइप बटन सबमिट करने के पहले बटन या इनपुट क्षेत्र पर ngClick निर्देश (इनपुट [टाइप = सबमिट करें))

हैंडलर के दोहरे निष्पादन को रोकने के लिए, ngSubmit या ngClick निर्देशों में से केवल एक का उपयोग करें।

इसका कारण HTML विनिर्देश में निम्नलिखित फ़ॉर्म सबमिशन नियम हैं:

यदि किसी फ़ॉर्म में केवल एक इनपुट फ़ील्ड है, तो इस फ़ील्ड में दर्ज करें प्रविष्टियाँ फ़ॉर्म सबमिट करती हैं (ngSubmit) यदि किसी फ़ॉर्म में 2+ इनपुट फ़ील्ड हैं और कोई बटन नहीं है या input[type=submit]फिर कोई प्रपत्र या एक से अधिक इनपुट फ़ील्ड होने पर कोई प्रविष्टि सबमिट नहीं करता है। एक या एक से अधिक बटन या input[type=submit]फिर किसी भी इनपुट फ़ील्ड में input[type=submit]एंट्री मारने से पहले बटन या (एनग्लिक) पर क्लिक हैंडलर ट्रिगर होगा और एनक्लोजिंग फॉर्म (ngSubmit) पर सबमिट हैंडलर।

कोई लंबित ngModelOptions परिवर्तन एक एन्कोडिंग फ़ॉर्म सबमिट किए जाने पर तुरंत होगा। ध्यान दें कि मॉडल अपडेट होने से पहले ngClick ईवेंट घटित होंगे।

अद्यतन किए गए मॉडल तक पहुंच के लिए ngSubmit का उपयोग करें।

app.js :

angular.module('formExample', [])
  .controller('FormController', ['$scope', function($scope) {
    $scope.userType = 'guest';
  }]);

फॉर्म :

<form name="myForm" ng-controller="FormController" class="my-form">
  userType: <input name="input" ng-model="userType" required>
  <span class="error" ng-show="myForm.input.$error.required">Required!</span>
  userType = {{userType}}
  myForm.input.$valid = {{myForm.input.$valid}}
  myForm.input.$error = {{myForm.input.$error}}
  myForm.$valid = {{myForm.$valid}}
  myForm.$error.required = {{!!myForm.$error.required}}
 </form>

स्रोत: एंगुलरजेएस: एपीआई: फॉर्म