एनजी-सबमिट का उपयोग करके फॉर्म कैसे जमा करें
एक वेब पेज पर जानकारी जमा करने की प्रक्रिया आम तौर पर वेब ब्राउज़र पर सबमिट इवेंट द्वारा नियंत्रित की जाती है। इस घटना का उपयोग आम तौर पर जानकारी भेजने के लिए किया जाता है जिसे उपयोगकर्ता ने वेब पेज पर प्रवेश करने के लिए लॉगिन क्रेडेंशियल, फॉर्म डेटा, आदि जैसे प्रसंस्करण के लिए इस्तेमाल किया हो सकता है। सूचना जमा करना GET या POST अनुरोध के माध्यम से किया जा सकता है।
AngularJS एनजी-सबमिट नामक एक निर्देश भी प्रदान करता है जिसका उपयोग ब्राउज़र के सबमिट इवेंट में एप्लिकेशन को बाँधने के लिए किया जा सकता है। तो AngularJS के मामले में, सबमिट इवेंट पर आप कंट्रोलर के भीतर ही कुछ प्रोसेसिंग कर सकते हैं और फिर उपयोगकर्ता को संसाधित जानकारी प्रदर्शित कर सकते हैं।
आइए एक उदाहरण लेते हैं कि हम इसे कैसे प्राप्त कर सकते हैं।
हमारे सबमिट-पोस्ट उदाहरण में,
हम उपयोगकर्ता को एक टेक्स्टबॉक्स पेश करने जा रहे हैं जिसमें वे उस विषय में प्रवेश कर सकते हैं जिसे वे सीखना चाहते हैं। पृष्ठ पर एक सबमिट बटन होगा, जिसे दबाए जाने पर विषय को अनियंत्रित सूची में जोड़ दिया जाएगा।
Event Registration Guru99 Global Event
कोड स्पष्टीकरण:
- हम पहले अपना फ़ॉर्म HTML टैग घोषित कर रहे हैं, जो "टेक्स्ट बॉक्स" और "सबमिट बटन" कंट्रोल रखेगा। फिर हम फ़ंक्शन "डिस्प्ले ()" को हमारे फॉर्म में बाँधने के लिए एनजी-सबमिट निर्देश का उपयोग कर रहे हैं। यह फ़ंक्शन हमारे नियंत्रक में परिभाषित किया जाएगा और फॉर्म सबमिट किए जाने पर कहा जाएगा।
- हमारे पास एक पाठ नियंत्रण है जिसमें उपयोगकर्ता उस विषय में प्रवेश करेगा जिसे वे सीखना चाहते हैं। यह 'टॉपिक' नामक एक चर के लिए बाध्य होगा जिसका उपयोग हमारे नियंत्रक में किया जाएगा।
- सामान्य सबमिट बटन है जिसे उपयोगकर्ता उस विषय पर क्लिक करेंगे जब उन्होंने उस विषय में प्रवेश किया है जो वे चाहते हैं।
- उपयोगकर्ता द्वारा दर्ज किए जाने वाले विषयों की सूची आइटम प्रदर्शित करने के लिए हमने एनजी-दोहराने निर्देश का उपयोग किया है। एनजी-रिपीट निर्देश सरणी 'ऑल्टोपिक' में प्रत्येक विषय के माध्यम से जाता है और तदनुसार विषय का नाम प्रदर्शित करता है।
- हमारे नियंत्रक में, हम एक सरणी चर की घोषणा कर रहे हैं जिसे 'AllTopic' कहा जाता है। इसका उपयोग Step2 में उपयोगकर्ता द्वारा दर्ज किए गए सभी विषयों को रखने के लिए किया जाएगा।
- हम अपने प्रदर्शन () फ़ंक्शन के लिए कोड को परिभाषित कर रहे हैं जिसे उपयोगकर्ता द्वारा सबमिट बटन पर क्लिक करने पर बुलाया जाएगा। यहां हम उपयोगकर्ता द्वारा 'टॉपिक' के माध्यम से हमारे एरे 'एलोपैथिक' में दिए गए टॉपिक्स को जोड़ने के लिए पुश ऐरे फंक्शन का उपयोग कर रहे हैं।
यदि कोड सफलतापूर्वक निष्पादित किया जाता है, तो ब्राउज़र में अपना कोड चलाते समय निम्न आउटपुट दिखाया जाएगा।
आउटपुट:
कोड को काम करते हुए देखने के लिए, पहले "AngularJS" जैसा एक टॉपिक नाम दर्ज करें जैसा कि टेक्स्टबॉक्स में ऊपर दिखाया गया है और फिर सबमिट बटन पर क्लिक करें।
- सबमिट बटन पर क्लिक करने के बाद, आपको वह आइटम दिखाई देगा जो आइटम की सूची में जोड़े गए टेक्स्टबॉक्स में दर्ज किया गया था।
- यह प्रदर्शन () फ़ंक्शन द्वारा प्राप्त किया जा रहा है, जिसे सबमिट बटन दबाए जाने पर कहा जाता है।
- प्रदर्शन () फ़ंक्शन टेक्स्ट को 'AllTopic' नामक सरणी चर में जोड़ता है। और हमारा एनजी-रिपीट डायरेक्शन एरे वेरिएबल 'ऑल्टोपिक' में प्रत्येक मान से होकर जाता है और उसी के अनुसार सूची आइटम के रूप में प्रदर्शित करता है।
सारांश
"एनजी-सबमिट" निर्देश का उपयोग उपयोगकर्ता द्वारा दर्ज किए गए इनपुट को संसाधित करने के लिए किया जाता है जब फॉर्म सबमिट किया जाता है।