AngularJS ng-submit फॉर्म सबमिट उदाहरण के साथ

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

AngularJS ng-submit निर्देश

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

ng-submit का उपयोग करके AngularJS में फ़ॉर्म कैसे सबमिट करें

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

आइए AngularJS में फॉर्म सबमिट करने का तरीका देखने के लिए Angular फॉर्म सबमिट करने का उदाहरण लें।

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

ng-submit का उपयोग करके AngularJS में फ़ॉर्म सबमिट करें
ng-submit का उपयोग करके AngularJS में फ़ॉर्म सबमिट करना

AngularJS फॉर्म सबमिट उदाहरण

अब, हम ng-submit निर्देश का उपयोग करके नियंत्रक से AngularJS फॉर्म सबमिट करने का एक उदाहरण देखेंगे:

<!DOCTYPE html>
<html>
<head>

    <meta chrset="UTF 8">
    <title>Event Registration</title>
</head>

<body  ng-app="sampleApp">
<script src="https://code.angularjs.org/1.6.9/angular-route.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.min.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.js"></script>
<script src="lib/bootstrap.js"></script>
<script src="lib/bootstrap.css"></script>
<h1> Guru99 Global Event</h1>
<div ng-controller="AngularController">

    <form ng-submit="Display()">
        &nbsp;&nbsp;&nbsp;
        Enter which topic you would like to learn
        <input type="text"  ng-app="sampleApp" ng-model="Topic"><br>

        <input type="submit" value="Submit"/>

        <ul ng-repeat="topicname in AllTopic">
            <li>{{topicname}}</li>
        </ul>
    </form>
</div>

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

    sampleApp.controller("AngularController",function($scope) {
        $scope.AllTopic=[];
        $scope.Display = function () {
            $scope.AllTopic.push($scope.Topic);
        }
    });
</script>
</body>
</html>

कोड स्पष्टीकरण:

  1. हम सबसे पहले अपने फॉर्म HTML टैग की घोषणा कर रहे हैं, जो “टेक्स्ट बॉक्स” और “सबमिट बटन” कंट्रोल को होल्ड करेगा जैसा कि Angular फॉर्म सबमिट इवेंट उदाहरण में दिखाया गया है। फिर हम अपने फॉर्म में “Display()” फ़ंक्शन को बांधने के लिए ngsubmit Angular निर्देश का उपयोग कर रहे हैं। यह फ़ंक्शन हमारे कंट्रोलर में परिभाषित किया जाएगा और फॉर्म सबमिट होने पर कॉल किया जाएगा।
  2. हमारे पास एक टेक्स्ट कंट्रोल है जिसमें उपयोगकर्ता वह विषय दर्ज करेगा जिसे वे सीखना चाहते हैं। यह 'टॉपिक' नामक एक वेरिएबल से बंधा होगा जिसका उपयोग हमारे कंट्रोलर में किया जाएगा।
  3. एंगुलरजेएस में सामान्य सबमिट बटन होता है जिस पर उपयोगकर्ता तब क्लिक करता है जब वह अपना इच्छित विषय दर्ज कर लेता है।
  4. हमने इस्तेमाल किया है एनजी-दोहराने उपयोगकर्ता द्वारा दर्ज किए गए विषयों की सूची आइटम प्रदर्शित करने के लिए निर्देश। ng-repeat निर्देश सरणी 'AllTopic' में प्रत्येक विषय से गुजरता है और तदनुसार विषय का नाम प्रदर्शित करता है।
  5. हमारे नियंत्रक में, हम 'AllTopic' नामक एक सरणी चर घोषित कर रहे हैं। इसका उपयोग चरण 2 में उपयोगकर्ता द्वारा दर्ज किए गए सभी विषयों को रखने के लिए किया जाएगा।
  6. हम अपने Display() फ़ंक्शन के लिए कोड परिभाषित कर रहे हैं जिसे उपयोगकर्ता द्वारा सबमिट बटन पर क्लिक करने पर कॉल किया जाएगा। यहाँ हम उपयोगकर्ता द्वारा वेरिएबल 'Topic' के माध्यम से दर्ज किए गए विषयों को हमारे array 'AllTopic' में जोड़ने के लिए push array फ़ंक्शन का उपयोग कर रहे हैं।

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

AngularJS में फॉर्म सबमिट करें

कोड को काम करते हुए देखने के लिए, सबसे पहले, टेक्स्टबॉक्स में ऊपर दिखाए अनुसार “Angular” जैसा विषय नाम दर्ज करें और फिर सबमिट बटन पर क्लिक करें।

AngularJS में फॉर्म सबमिट करें

  • सबमिट बटन पर क्लिक करने के बाद, आप देखेंगे कि टेक्स्टबॉक्स में दर्ज किया गया आइटम आइटमों की सूची में जुड़ गया है।
  • यह Display() फ़ंक्शन द्वारा प्राप्त किया जा रहा है, जिसे सबमिट बटन दबाने पर बुलाया जाता है।
  • Display() फ़ंक्शन 'AllTopic' नामक ऐरे वैरिएबल में टेक्स्ट जोड़ता है। और हमारा ng-repeat निर्देश ऐरे वैरिएबल 'AllTopic' में प्रत्येक मान से गुजरता है और उन्हें तदनुसार सूची आइटम के रूप में प्रदर्शित करता है।

सारांश

  • “ng-submit” निर्देश का उपयोग AngularJS में फॉर्म सबमिट करने के लिए उपयोगकर्ता द्वारा दर्ज इनपुट को संसाधित करने के लिए किया जाता है।
  • वेब पेज पर सूचना सबमिट करने की प्रक्रिया सामान्यतः वेब ब्राउज़र पर सबमिट इवेंट द्वारा नियंत्रित की जाती है।
  • सूचना प्रस्तुतीकरण GET या POST अनुरोध के माध्यम से किया जा सकता है।
  • Display() फ़ंक्शन 'AllTopic' नामक ऐरे वेरिएबल में टेक्स्ट जोड़ता है।