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


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

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


76
2018-01-13 01:40


मूल


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


जवाब:


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

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

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

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


143
2018-01-13 02:25



आम तौर पर इसे जेएस के अंदर बुलाया जाएगा $scope.yourformname.$valid। - Dan Atkinson
हमेशा त्रुटि मिलती है अपरिभाषित संपत्ति '$ मान्य' नहीं पढ़ सकता - John Nguyen
आपको फॉर्म को स्पष्ट रूप से कुछ फॉर्म जैसे <form name = "form"> देना होगा, फिर $ scope.form उपलब्ध होना चाहिए .. - StrangeLoop
अगर संपत्ति नियंत्रक में परिभाषित नहीं प्रतीत होती है, तो इसे स्पष्ट रूप से नियंत्रक में प्रारंभ करें $scope.myformname = {}; - Nicolas Janel
@JohnNguyen मुझे एक ही सटीक त्रुटि मिली। मैंने यह काम किया है। अपने सबमिट फ़ंक्शन में, फ़ॉर्म को तर्क के रूप में पास करें। फिर आप अपने नियंत्रक पर जा सकते हैं और यह देखने के लिए जांच सकते हैं कि फ़ॉर्म आपके FormName द्वारा मान्य है या नहीं। $ मान्य। उन्होंने इस उदाहरण का उपयोग कोणीय दस्तावेज में किया था, उनके प्लंकर यहां पाए गए थे: plnkr.co/edit/Q8mlPOSgkaPstg4uvjlc?p=preview - devonJS


उदाहरण

<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>

36
2017-10-01 10:18





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

जैसे

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

11
2017-09-26 18:20





प्रपत्र

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

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

उपनाम: ngForm

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

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

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

एनजी-अमान्य अगर फॉर्म अमान्य है तो सेट है।

एनजी-प्राचीन अगर सेट प्राचीन है तो सेट है।

एनजी-गंदा अगर सेट गंदा है तो सेट है।

एनजी द्वारा जमा किए गए अगर फॉर्म जमा किया गया है तो सेट है।

ध्यान रखें कि एनजीएनिमेट जोड़े और हटाए जाने पर इन कक्षाओं में से प्रत्येक का पता लगा सकता है।

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

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

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

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

ngSubmit फॉर्म तत्व पर निर्देश

ngClick सबमिट करने के पहले बटन या इनपुट फ़ील्ड पर निर्देश (इनपुट [टाइप = सबमिट])

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

यह एचटीएमएल विनिर्देश में निम्नलिखित फॉर्म सबमिशन नियमों के कारण है:

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

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

अद्यतन मॉडल तक पहुंच प्राप्त करने के लिए 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>

स्रोत: AngularJS: एपीआई: फॉर्म


5
2018-05-05 17:04