AngularJS में सबमिट पर फॉर्म वैलिडेशन: $dirty, $valid और $invalid

द्वारा: जेम्स हार्टमैन जेम्स हार्टमैन
Hours Updated

⚡ स्मार्ट सारांश

AngularJS में फॉर्म वैलिडेशन यह सुनिश्चित करता है कि सर्वर तक पहुंचने से पहले फॉर्म में दर्ज किया गया डेटा सही और पूर्ण है। यहां चार दृष्टिकोणों को शामिल किया गया है, जिनमें साधारण HTML5 एट्रिब्यूट्स से लेकर स्कोप प्रॉपर्टीज और स्वचालित वैलिडेशन मॉड्यूल तक शामिल हैं।

  • 🧩 HTML5 विशेषताएँ: आवश्यक विशेषता और ईमेल, पासवर्ड और संख्या इनपुट प्रकार बिना स्क्रिप्टिंग के ब्राउज़र-नेटिव जांच प्रदान करते हैं।
  • 🔍 राज्य की संपत्तियां: AngularJS, नाम वाले फॉर्म के अंदर मौजूद हर नाम वाले कंट्रोल पर $dirty, $pristine, $valid और $invalid को उपलब्ध कराता है।
  • ️ नामकरण की आवश्यकता: फॉर्म और प्रत्येक कंट्रोल दोनों को एक नाम विशेषता की आवश्यकता होती है, क्योंकि सत्यापन स्थिति को formName.controlName के रूप में संबोधित किया जाता है।
  • 🚫 नेटिव पॉपअप को दबाएँ: फॉर्म में novalidate जोड़ने से ब्राउज़र द्वारा सबमिशन को इंटरसेप्ट करना बंद हो जाता है, जिससे AngularJS इसे हैंडल कर सकता है।
  • 💬 संदेश प्रदर्शन: ngMessages मॉड्यूल स्टैक्ड ng-show निर्देशों को प्रतिस्थापित करता है और प्राथमिकता क्रम में एक समय में एक त्रुटि दिखाता है।
  • ⚙️ स्वचालित सत्यापन: jcs-autoValidate मॉड्यूल बिना किसी कस्टम मार्कअप के प्रत्येक कंट्रोल के लिए त्रुटि संदेश उत्पन्न करता है।
  • 🔘 प्रस्तुति पर प्रतिक्रिया: Ladda बटन सबमिशन प्रक्रिया के दौरान एक स्पिनर दिखाता है, जिससे उपयोगकर्ता को प्रगति का संकेत मिलता है।
विस्तार में पढ़ें

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

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

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

उदाहरण के लिए, ईमेल आईडी हमेशा इस प्रारूप में होनी चाहिए। username@site.domainयदि कोई व्यक्ति केवल उपयोगकर्ता नाम दर्ज करता है, तो सत्यापन विफल हो जाना चाहिए। विवरण को आगे की प्रक्रिया के लिए सर्वर पर भेजने से पहले सत्यापन ये बुनियादी जाँचें करता है।

⚠️ संस्करण संबंधी टिप्पणी: AngularJS (1.x शाखा) का सपोर्ट 31 दिसंबर 2021 को समाप्त हो गया और अब इसे कोई सुरक्षा पैच नहीं मिलेगा। नीचे दी गई तकनीकें पुराने एप्लिकेशन के लिए सही हैं; आधुनिक Angular टेम्पलेट-आधारित या रिएक्टिव फॉर्म के साथ यही काम करता है।

HTML5 का उपयोग करके फ़ॉर्म सत्यापन

फॉर्म वैलिडेशन वह प्रक्रिया है जिसके द्वारा वेब फॉर्म में दर्ज की गई जानकारी को सर्वर पर भेजने से पहले उसकी पूर्व-सत्यापन की जाती है। क्लाइंट साइड पर वैलिडेशन करना बेहतर होता है, क्योंकि इससे फॉर्म को दोबारा प्रस्तुत करने की तुलना में बहुत कम ओवरहेड होता है।

नीचे दिए गए उदाहरण में एक साधारण पंजीकरण फॉर्म दिखाया गया है जिसमें उपयोगकर्ता अपना उपयोगकर्ता नाम, पासवर्ड, ईमेल आईडी और आयु दर्ज करता है। फॉर्म में सत्यापन नियंत्रण मौजूद हैं जो यह सुनिश्चित करते हैं कि जानकारी सही ढंग से दर्ज की गई है।

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Event Registration</title>
    <link rel="stylesheet" href="lib/bootstrap.css">
    <script src="https://code.angularjs.org/1.8.3/angular.min.js"></script>
</head>
<body ng-app="sampleApp">
<h1>Guru99 Global Event</h1>

<form>
    Enter your user name:
    <input type="text" name="name" required><br><br>

    Enter your password:
    <input type="password" name="password"><br><br>

    Enter your email:
    <input type="email" name="email"><br><br>

    Enter your age:
    <input type="number" name="age"><br><br>

    <input type="submit" value="Submit">
</form>
</body>
</html>

⚠️ इस पेज पर दी गई सभी लिस्टिंग में सुधार लागू कर दिए गए हैं। मूल घोषित chrset="UTF 8"जो न तो एक वैध विशेषता है और न ही एक वैध एन्कोडिंग है, और इसने एंगुलरजेएस को तीन बार लोड किया है। angular-route.js सबसे पहले, जो त्रुटि उत्पन्न करता है क्योंकि रूट मॉड्यूल एक ऐसे फ्रेमवर्क के विरुद्ध पंजीकरण करता है जो लोड नहीं हुआ है, फिर angular.min.js और angular.jsउन्होंने एक ही पुस्तकालय में दो बार जाकर भी देखा। bootstrap.css एक के माध्यम से <script> टैग का उपयोग किया गया था, इसलिए कोई स्टाइलिंग लागू नहीं की गई। अब प्रत्येक लिस्टिंग एक लाइब्रेरी, संस्करण 1.8.3 लोड करती है और स्टाइलशीट को सही ढंग से लिंक करती है। लेआउट पैडिंग को बार-बार दोहराया गया है। &nbsp; संस्थाओं को हटा दिया गया है।

Code व्याख्या

  1. टेक्स्ट इनपुट प्रकार के लिए, required एट्रिब्यूट का मतलब है कि फॉर्म सबमिट करते समय टेक्स्टबॉक्स खाली नहीं हो सकता।
  2. अगला इनपुट प्रकार पासवर्ड है। चूंकि यह पासवर्ड के रूप में चिह्नित है, इसलिए फ़ील्ड में दर्ज किया गया टेक्स्ट छिपा रहेगा।
  3. क्योंकि इनपुट प्रकार ईमेल के रूप में निर्दिष्ट है, इसलिए बॉक्स में मौजूद टेक्स्ट को पैटर्न से मेल खाना चाहिए। नाम@साइट.डोमेन.
  4. जब इनपुट प्रकार को संख्या के रूप में चिह्नित किया जाता है, तो कीबोर्ड से टाइप किए गए अक्षर फ़ील्ड द्वारा स्वीकार नहीं किए जाते हैं।

उत्पादन

सत्यापन प्रक्रिया को देखने के लिए, कुछ भी दर्ज किए बिना सबमिट पर क्लिक करें।

एक पॉप-अप दिखाई देता है जिसमें बताया जाता है कि फ़ील्ड भरना आवश्यक है, इसलिए आवश्यक के रूप में चिह्नित नियंत्रण फ़ील्ड खाली रहने पर सबमिशन को रोक देता है।

पासवर्ड नियंत्रण में मान दर्ज करने पर '*' चिह्न अक्षरों को छुपा देता है।

गलत ईमेल आईडी दर्ज करके सबमिट पर क्लिक करने पर एक पॉप-अप विंडो खुलती है जिसमें @ चिह्न मांगा जाता है। अंत में, आयु वाले बॉक्स में टाइप किए गए अक्षर कभी दिखाई नहीं देते, क्योंकि यह बॉक्स केवल संख्याएँ ही स्वीकार करता है।

ब्राउज़र पॉप-अप को सेट अप करना आसान है, लेकिन उनके शब्दों और स्टाइल को बदला नहीं जा सकता। यहीं पर AngularJS की वैलिडेशन प्रॉपर्टीज़ काम आती हैं।

संबंधित आलेख

$dirty, $valid, $invalid, $pristine का उपयोग करके फ़ॉर्म सत्यापन

AngularJS यह सत्यापन के लिए अपनी स्वयं की प्रॉपर्टीज़ प्रदान करता है। प्रत्येक नामित कंट्रोल पर निम्नलिखित प्रॉपर्टीज़ उपलब्ध हैं:

  • $गंदा – उपयोगकर्ता ने नियंत्रण के साथ बातचीत की है
  • $वैध – फ़ील्ड सामग्री मान्य है
  • $अमान्य – फ़ील्ड सामग्री अमान्य है
  • $प्राचीन – उपयोगकर्ता ने अभी तक नियंत्रण के साथ बातचीत नहीं की है

AngularJS वैलिडेशन करने के लिए नीचे दिए गए चरणों का पालन करें।

चरण 1) उपयोग novalidate फॉर्म घोषित करते समय इस प्रॉपर्टी का उपयोग करें। इससे ब्राउज़र को पता चलता है कि सत्यापन AngularJS द्वारा किया जाएगा।

चरण 2) यह सुनिश्चित करें कि फॉर्म का एक नाम परिभाषित हो, क्योंकि उस नाम का उपयोग सत्यापन स्थिति तक पहुंचने के लिए किया जाता है।

चरण 3) सुनिश्चित करें कि प्रत्येक नियंत्रण में एक name इसी कारण से, एट्रिब्यूट का उपयोग किया जाता है। बिना नाम वाला कंट्रोल कभी भी फॉर्म पर पंजीकृत नहीं होता है।

चरण 4) उपयोग एनजी शो $dirty, $invalid और $valid गुणों की जांच करने का निर्देश।

नीचे दिए गए उदाहरण में एक टेक्स्ट फ़ील्ड है जिसमें उपयोगकर्ता विषय का नाम दर्ज करता है। यदि इसे खाली छोड़ दिया जाता है, तो सत्यापन त्रुटि उत्पन्न होती है और संदेश प्रदर्शित होता है।

<form ng-app="DemoApp" ng-controller="DemoController"
      name="myForm" novalidate>
    <p>Topic Name:<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">Username is required</span>
        </span>
    </p>
    <p>
        <input type="submit" ng-disabled="myForm.$invalid">
    </p>
</form>

<script>
    var app = angular.module("DemoApp", []);

    app.controller("DemoController", function($scope) {
        // Seed the textbox so the form starts in a valid state
        $scope.user = "AngularJS";
    });
</script>

⚠️ दो तार्किक त्रुटियाँ ठीक कर दी गई हैं। मूल संस्करण ने बटन को निष्क्रिय कर दिया था ng-disabled="myForm.user.$dirty && myForm.user.$invalid"। इसलिये $dirty जब तक उपयोगकर्ता फ़ील्ड को स्पर्श नहीं करता, बटन स्थिर रहता है। सक्षम एक अछूते खाली फॉर्म पर, ठीक उसी स्थिति को रोकने के लिए जिसे यह बनाया गया था; myForm.$invalid दोनों को कवर करता है। मूल संस्करण में डिफ़ॉल्ट मान को भी शामिल किया गया है। $scope.Display = function () { $scope.user = 'Angular'; }एक ऐसा फ़ंक्शन जिसे कभी कॉल नहीं किया गया, इसलिए टेक्स्टबॉक्स खाली खुला जबकि उसमें "AngularJS" लिखा था। अब असाइनमेंट सीधे किया जाता है, जिसमें आस-पास के टेक्स्ट उद्धरणों में दिए गए मान का उपयोग किया जाता है।

Code व्याख्या

  1. इस फॉर्म को “myForm” नाम दिया गया है। सत्यापन के लिए इसके नियंत्रणों तक पहुँचने के लिए यह नाम आवश्यक है।
  2. RSI novalidate यह प्रॉपर्टी ब्राउज़र को सत्यापन करने से रोकती है, इसलिए AngularJS इसके बजाय यह काम कर सकता है।
  3. ng-show निर्देश "$dirty" और "$invalid" गुणों की जाँच करता है। यदि टेक्स्टबॉक्स में कोई बदलाव हुआ है, तो $dirty मान सत्य होता है; यदि इसका मान खाली है, तो $invalid मान सत्य होता है। जब दोनों मान सत्य होते हैं, तो लाल रंग के टेक्स्ट वाला स्पैन प्रदर्शित होता है।
  4. नेस्टेड चेक "$error.required" प्रॉपर्टी को पढ़ता है, जो तब सत्य होता है जब किसी आवश्यक कंट्रोल का कोई मान नहीं होता है, और "उपयोगकर्ता नाम आवश्यक है" प्रदर्शित करता है।
  5. सबमिट बटन को निष्क्रिय कर दिया गया है ng-disabled जब भी पूरा फॉर्म ही अमान्य हो।
  6. कंट्रोलर प्रारंभिक टेक्स्टबॉक्स मान को "AngularJS" पर सेट करता है, इसलिए फॉर्म एक वैध स्थिति में खुलता है और टेक्स्ट डिलीट होने पर वैलिडेशन को देखना आसान हो जाता है।

उत्पादन

जब फॉर्म पहली बार प्रदर्शित होता है, तो टेक्स्टबॉक्स में "AngularJS" लिखा होता है और सबमिट बटन सक्रिय हो जाता है। टेक्स्ट हटाते ही त्रुटि संदेश दिखाई देता है और बटन निष्क्रिय हो जाता है।

ऊपर दिए गए स्क्रीनशॉट में दो चीजें दिखाई गई हैं:

  • सबमिट बटन अक्षम है
  • विषय टेक्स्टबॉक्स में कोई विषय नाम नहीं है, इसलिए "उपयोगकर्ता नाम आवश्यक है" त्रुटि संदेश प्रदर्शित होता है।

ngMessages का उपयोग करके सत्यापन त्रुटियाँ कैसे प्रदर्शित करें

ऊपर दिया गया पैटर्न काम करता है, लेकिन यह स्केलेबल नहीं है। चार बाधाओं वाले फ़ील्ड के लिए चार नेस्टेड फ़ील्ड की आवश्यकता होती है। ng-show कई अंतराल होते हैं, और जब उनमें से कई एक साथ विफल हो जाते हैं तो सभी संदेश एक साथ दिखाई देते हैं। ngMessages AngularJS टीम द्वारा अलग से उपलब्ध कराया गया मॉड्यूल, दोनों समस्याओं का समाधान करता है: यह संदेशों के लिखे जाने के क्रम में एक समय में एक ही संदेश दिखाता है।

मॉड्यूल को लोड करें और इसे एक डिपेंडेंसी के रूप में जोड़ें।

<script src="https://code.angularjs.org/1.8.3/angular-messages.js"></script>
<script>
    angular.module("DemoApp", ["ngMessages"]);
</script>

इसके बाद मार्कअप शर्तों के ढेर के बजाय नियमों की सूची के रूप में पढ़ा जाता है।

<input type="text" name="user" ng-model="user"
       required ng-minlength="4" ng-maxlength="20">

<div style="color:red" ng-messages="myForm.user.$error"
     ng-if="myForm.user.$dirty">
    <div ng-message="required">A topic name is required</div>
    <div ng-message="minlength">Use at least 4 characters</div>
    <div ng-message="maxlength">Use no more than 20 characters</div>
</div>

व्यवहार में इसके सुचारू रूप से काम करने के लिए तीन विवरण आवश्यक हैं। ng-messages विशेषता नियंत्रण की ओर इंगित करती है $error बूलियन के बजाय ऑब्जेक्ट का उपयोग किया जाता है, इसलिए किसी भी शर्त को दोहराने की आवश्यकता नहीं है। केवल पहला मिलान ng-message रेंडर करता है, जिसका अर्थ है कि एक खाली फ़ील्ड यह रिपोर्ट करता है कि यह आवश्यक है, बजाय इसके कि इसकी लंबाई के बारे में भी शिकायत करे। जोड़ना ng-messages-multiple जब हर विफलता को वास्तव में सूचीबद्ध करने की आवश्यकता होती है, तो यह व्यवहार उलट जाता है।

लपेटेंping ब्लॉक में ng-if="myForm.user.$dirty" जब तक उपयोगकर्ता वास्तव में कुछ टाइप नहीं कर लेता, तब तक फॉर्म को शांत रखता है। $touched एसटी $dirty इससे संदेश में और देरी होती है, जब तक कि फोकस उस क्षेत्र से हट न जाए, जो आमतौर पर एक लंबे पंजीकरण फॉर्म पर अधिक अनुकूल विकल्प होता है।

एक चेतावनी: ngMessages इसे एक अलग फ़ाइल के रूप में भेजा जाता है, इसलिए स्क्रिप्ट टैग या मॉड्यूल निर्भरता को भूल जाने से ब्लॉक बिल्कुल भी रेंडर नहीं होता है, और इसे समझाने के लिए कोई कंसोल त्रुटि भी नहीं आती है।

हाथ से संदेश लिखना सटीक तो होता है, लेकिन इसमें दोहराव की आवश्यकता होती है। अगले भाग में एक ऐसे मॉड्यूल के बारे में बताया गया है जो संदेशों को स्वचालित रूप से उत्पन्न करता है।

AngularJS ऑटो वैलिडेट का उपयोग करके फॉर्म सत्यापन

AngularJS किसी फॉर्म के सभी कंट्रोल्स को स्वचालित रूप से वैलिडेट कर सकता है, इसके लिए वैलिडेशन या एरर मैसेज के लिए कस्टम कोड की आवश्यकता नहीं होती है। यह "jcs-autoValidate" नामक कम्युनिटी मॉड्यूल को शामिल करके किया जाता है।

इस मॉड्यूल के लागू होने के बाद, सत्यापन चलाने या संदेश प्रदर्शित करने के लिए किसी विशेष कोड की आवश्यकता नहीं होती है; सब कुछ jcs-autoValidate के अंदर ही नियंत्रित हो जाता है।

नीचे दिए गए उदाहरण में एक साधारण फॉर्म है जिसमें एक अनिवार्य टेक्स्टबॉक्स है। यदि टेक्स्टबॉक्स भरा नहीं जाता है तो एक त्रुटि संदेश प्रदर्शित होता है।

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Event Registration</title>
    <link rel="stylesheet" href="lib/bootstrap.css">
    <script src="https://code.angularjs.org/1.8.3/angular.min.js"></script>
    <script src="lib/jcs-auto-validate.min.js"></script>
</head>
<body>
<h1>Guru99 Event</h1>

<div ng-app="DemoApp">
    <form name="myForm" novalidate>
        <div class="form-group">
            <label for="user">Topic Name:</label>
            <input class="form-control" type="text"
                   id="user" name="user" ng-model="user" required>
        </div>
        <div class="form-group">
            <input type="submit">
        </div>
    </form>
</div>

<script>
    var app = angular.module('DemoApp', ['jcs-autoValidate']);
</script>
</body>
</html>

⚠️ सुधार: मूल ने नियंत्रण की पहचान की id="user" केवल। jcs-autoValidate फॉर्म के माध्यम से नियंत्रण तक पहुँचता है, इसलिए एक name यह एट्रिब्यूट अनिवार्य है और इसके बिना संदेश कभी दिखाई नहीं दिया। मूल संस्करण में दो अलग-अलग AngularJS संस्करण लोड किए गए थे, गूगल CDN से 1.6.4 और 1.6.9, और कभी लिंक नहीं किया गया था। Bootstrap भले ही उदाहरण इस पर निर्भर करता हो form-group और form-control त्रुटि पाठ की स्थिति निर्धारित करने के लिए क्लास।

💡 नोट: jcs-autoValidate एक सामुदायिक परियोजना है और अब इसका सक्रिय रूप से रखरखाव नहीं किया जाता है। यह मौजूदा AngularJS अनुप्रयोगों पर उपयोग योग्य बना हुआ है, लेकिन अंतर्निहित सुविधाएँ उपलब्ध नहीं हैं। ngMessages पहले दिखाया गया तरीका किसी भी नई चीज के लिए अधिक सुरक्षित विकल्प है।

Code व्याख्या

  1. ऑटो-वैलिडेशन की सभी कार्यक्षमताओं को समाहित करने वाली "jcs-auto-validate.js" स्क्रिप्ट को शामिल किया गया है।
  2. प्रत्येक कंट्रोल और उसके आसपास के div को एक "फॉर्म-ग्रुप" क्लास के अंदर रखा जाता है, जहाँ मॉड्यूल अपना संदेश इंजेक्ट करता है।
  3. नियंत्रण में एक आईडी और एक दोनों होते हैं। name, तथा Bootstrap आपूर्ति करता है form-control स्टाइल।
  4. “jcs-autoValidate” मॉड्यूल को AngularJS मॉड्यूल की निर्भरता के रूप में सूचीबद्ध किया गया है।

उत्पादन

डिफ़ॉल्ट रूप से, फ़ॉर्म को ठीक उसी रूप में प्रदर्शित किया जाता है जैसा कि लिखा गया है।

खाली फॉर्म सबमिट करने पर "यह फ़ील्ड आवश्यक है" संदेश प्रदर्शित होता है, जो पूरी तरह से jcs-autoValidate द्वारा उत्पन्न होता है। फॉर्म के मान्य होने के बाद, सवाल यह उठता है कि फॉर्म भेजते समय उपयोगकर्ता को क्या दिखाई देता है।

लाड्डा बटन के साथ उपयोगकर्ता फीडबैक

“लड्डा” बटन एक फ्रेमवर्क है जो इसके ऊपर निर्मित है। Javaलिपि जो बटन दबाने पर एक दृश्य प्रभाव प्रदान करता है।

यदि किसी बटन को “ladda” विशेषता दी जाती है और उसे दबाया जाता है, तो स्पिन प्रभाव प्रदर्शित होता है। अतिरिक्त दृश्य प्रभावों के लिए विभिन्न डेटा शैलियाँ उपलब्ध हैं।

नीचे दिए गए उदाहरण में सबमिट बटन वाला एक साधारण फॉर्म दिखाया गया है। बटन दबाने पर उस पर स्पिन इफ़ेक्ट दिखाई देता है।

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Event Registration</title>
    <link rel="stylesheet" href="lib/bootstrap.css">
    <script src="https://code.angularjs.org/1.8.3/angular.min.js"></script>
    <script src="lib/angular-ladda.min.js"></script>
</head>
<body>
<h1>Guru99 Event</h1>

<div ng-app="DemoApp" ng-controller="DemoController">
    <form name="myForm" novalidate ng-submit="submit()">
        <button class="btn btn-primary" type="submit"
                ladda="submitting" name="sbutton"
                data-style="expand-right">Submit</button>
    </form>
</div>

<script>
    var app = angular.module('DemoApp', ['angular-ladda']);

    app.controller('DemoController', function($scope) {
        $scope.submitting = false;

        $scope.submit = function() {
            $scope.submitting = true;
        };
    });
</script>
</body>
</html>

⚠️ सुधार: मूल लोड किया गया angular-ladda.js और angular-ladda.min.js साथ में, जो एक ही मॉड्यूल को दो बार पंजीकृत करता है, और फिर से दो AngularJS संस्करणों को शामिल करता है। इसमें यह भी सूचीबद्ध है jcs-autoValidate एक निर्भरता के रूप में जिसका उपयोग इस उदाहरण में कभी नहीं किया जाता है। प्रत्येक लाइब्रेरी की एक प्रति यहाँ लोड की जाती है।

Code व्याख्या

  1. "एनजी-सबमिटयह निर्देश "सबमिट" नामक फ़ंक्शन को कॉल करता है, जो बटन के लड्डा विशेषता को बदलता है।
  2. लड्डा विशेषता लड्डा फ्रेमवर्क से संबंधित है और यही स्पिन प्रभाव उत्पन्न करती है। इसका मान इससे जुड़ा हुआ है। submitting चर।
  3. data-style प्रॉपर्टी एक और Ladda विशेषता है जो एक अलग दृश्य प्रभाव का चयन करती है।
  4. फ्रेमवर्क के काम करने के लिए AngularJS एप्लिकेशन में 'angular-ladda' मॉड्यूल को जोड़ा जाना आवश्यक है।
  5. RSI submitting वेरिएबल को false पर इनिशियलाइज़ किया गया है, इसलिए बटन स्पिन इफ़ेक्ट के बिना शुरू होता है।
  6. सबमिट फ़ंक्शन सेट करता है submitting इसे true पर सेट करें, जिससे प्रभाव लागू हो जाएगा। वास्तविक अनुप्रयोग में, सर्वर के प्रतिक्रिया देने पर इसे false पर रीसेट कर दिया जाएगा, अन्यथा बटन लगातार घूमता रहेगा।

उत्पादन

जब फॉर्म पहली बार प्रदर्शित होता है, तो सबमिट बटन अपने सरल रूप में दिखाई देता है।

बटन दबाने पर, submitting वेरिएबल को true पर सेट किया गया है। यह मान बटन के "ladda" एट्रिब्यूट तक पहुँचता है, जिससे स्पिन प्रभाव उत्पन्न होता है।

अक्सर पूछे जाने वाले प्रश्न

जब मान बदलता है तो $dirty सत्य हो जाता है। जब फ़ील्ड से फ़ोकस हट जाता है तो $touched सत्य हो जाता है। उपयोगकर्ता के आगे बढ़ने तक त्रुटि को विलंबित करने के लिए $touched का उपयोग करें, जो टाइपिंग के दौरान कम आक्रामक लगता है।ping.

उदाहरण के लिए, ng-pattern=”/^[0-9]{6}$/” जैसे रेगुलर एक्सप्रेशन के साथ ng-pattern डायरेक्टिव जोड़ें। विफलता तब $error.pattern के रूप में सामने आती है, जिसे ngMessages किसी भी अंतर्निहित बाधा की तरह रिपोर्ट कर सकता है।

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

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

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

इस पोस्ट को संक्षेप में इस प्रकार लिखें: