Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. Angular
Code

Angular 4 में Forms का परिचय: टेम्पलेट-ड्रिवेन फॉर्म्स

by
Difficulty:BeginnerLength:LongLanguages:
This post is part of a series called Introduction to Forms in Angular 4.
Introduction to Forms in Angular 4: Reactive Forms

Hindi (हिंदी) translation by Ashish Rampal (you can also view the original English article)

Final product image
What You'll Be Creating

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

इस ट्यूटोरियल में, हम Angular के फॉर्म्स के डेवलपमेंट के लिए उपलब्ध विभिन्न स्ट्रेटेजीज के बारे में बात करेंगे। आपके द्वारा चुनी गई स्ट्रेटेजी के बावजूद, यहां कुछ ऐसी चीजें हैं जो एक फॉर्म लाइब्रेरी को कवर करनी चाहिए:

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

Angular में फॉर्म्स का परिचय

Angular, एक पूर्ण रूप से फ्रंट-एन्ड फ्रेमवर्क के रूप में, जटिल फॉर्म्स के निर्माण के लिए अपने स्वयं की लाइब्रेरीज का सेट लिए हुए है। Angular के नवीनतम वर्जन में दो शक्तिशाली फॉर्म-बिल्डिंग स्ट्रेटेजीज हैं। वो हैं:

  • टेम्पलेट-संचालित फॉर्म
  • मॉडल संचालित या रिएक्टिव फॉर्म

दोनों टेक्नोलॉजीज @angular/forms लाइब्रेरी से संबंधित हैं और वे उसी प्रकार के फॉर्म कण्ट्रोल क्लासेज पर आधारित हैं। हालांकि, वे अपने फिलोसॉफी, प्रोग्रामिंग स्टाइल और तकनीक में उल्लेखनीय रूप से भिन्न हैं। दूसरे पर एक को चुनना आपके व्यक्तिगत पसंद पर निर्भर करता है और उस फॉर्म की जटिलता पर भी निर्भर करता है जिसे आप बनाने की कोशिश कर रहे हैं। मेरी राय में, आपको पहले दोनों तरीकों से प्रयास करना चाहिए और फिर एक को चुनना चाहिए जो आपकी स्टाइल और प्रोजेक्ट के साथ में फिट बैठता है।

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

टेम्पलेट-संचालित फॉर्म

टेम्पलेट-संचालित एप्रोच एक ऐसी रणनीति है जो AngularJS युग से उधार ली गई। मेरी राय में, यह फॉर्म्स के निर्माण के लिए सबसे आसान तरीका है। यह कैसे काम करता है? हम कुछ Angular डायरेक्टिव का उपयोग करेंगे।

Directive आपको DOM में एलिमेंट्स में बिहेवियर अटैच करने की अनुमति देते हैं।
Angular डॉक्यूमेंटेशन

Angular फॉर्म-स्पेसिफिक डायरेक्टिव प्रदान करता है जो कि आप फॉर्म इनपुट डेटा और मॉडल को बाँध सकते हैं। फॉर्म-स्पेसिफिक डायरेक्टिव एक सादे HTML फार्म में अतिरिक्त फंक्शनलिटी और बिहेवियर जोड़ते हैं। अंतिम परिणाम यह है कि टेम्पलेट मॉडल और फ़ॉर्म वेलिडेशन के साथ बॉन्डिंग वैल्यूज का ख्याल रखता है।

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

  • app.module.ts में FormsModule जोड़ना।
  • User मॉडल के लिए एक क्लास बनाना।
  • साइनअप फ़ॉर्म के लिए प्रारंभिक कंपोनेंट्स और लेआउट बनाना।
  • ngModel, ngModelGroup, और ngForm जैसे Angular फॉर्म डायरेक्टिव का उपयोग करना।
  • बिल्ट-इन validator का उपयोग करके वेलिडेशन जोड़ना।
  • वेलिडेशन errors को सार्थक रूप से प्रदर्शित करना।
  • ngSubmit का उपयोग करके फॉर्म सबमिशन को हैंडल करना।

आएँ शुरू करें।

आवश्यक शर्तें

इस प्रोजेक्ट के कोड मेरे GitHub रेपो पर उपलब्ध है I ज़िप को डाउनलोड करें या इसे एक्शन में देखने के लिए रेपो को क्लोन करें। यदि आप इसके बजाय स्क्रैच से शुरू करना पसंद करते हैं, तो सुनिश्चित करें कि आपके पास Angular CLI इनस्टॉल हो। एक नया प्रोजेक्ट बनाने के लिए ng कमांड का उपयोग करें।

इसके बाद, SignupForm के लिए एक नया कॉम्पोनेन्ट गेनेराते करें।

app.component.html के कंटेंट को इस के साथ बदलें:

src/ डायरेक्टरी के लिए डायरेक्टरी स्ट्रक्शन ये है। मैंने चीजों को सरल रखने के लिए कुछ गैर-आवश्यक फ़ाइलों को निकाल दिया हैI

जैसा कि आप देख सकते हैं, SignupForm कॉम्पोनेन्ट के लिए एक डायरेक्टरी ऑटोमेटिकली बना दी गयी है। यही वह जगह है जहां हमारे अधिकांश कोड जाएंगे। मैंने अपने User मॉडल को स्टोर करने के लिए एक नयी User.ts फाइल बनायीं है।

HTML टेम्पलेट

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

The HTML Template

यहां HTML टेम्प्लेट है जो हम हमारे रजिस्ट्रेशन पेज के लिए उपयोग करेंगे।

HTML टेम्पलेट

HTML टेम्प्लेट में उपयोग किए जाने वाले CSS क्लासेज चीजों को सुंदर बनाने के लिए इस्तेमाल की जाने वाली Bootstrap लाइब्रेरी का हिस्सा हैं I चूंकि यह एक डिजाइन ट्यूटोरियल नहीं है, इसलिए मैं जब तक आवश्यक ना हो फ़ॉर्म के CSS पहलुओं के बारे में ज्यादा बात नहीं करूँगा।

बेसिक फ़ॉर्म सेटअप

टेम्पलेट-संचालित फ़ॉर्म डायरेक्टिव का उपयोग करने के लिए, हमें@angular/forms से FormsModule को इम्पोर्ट करना होगा और इसे app.module.ts में imports array में जोड़ना होगा।

app/app.module.ts

इसके बाद, एक ऐसी क्लास बनाएं जो User एंटिटी की सभी प्रॉपर्टीज को होल्ड करें। हम या तो एक इंटरफ़ेस का उपयोग कर सकते हैं और इसे कॉम्पोनेन्ट में लागू कर सकते हैं या मॉडल के लिए TypeScript क्लास का उपयोग कर सकते हैं।

app/User.ts

अब, SignupForm कॉम्पोनेन्ट में क्लास का एक इंस्टैंस बनाएं। मैंने जेंडर के लिए एक अतिरिक्त प्रॉपर्टी भी डिक्लेअर कर दी हैI

app/signup-form/signup-form.component.ts

signup-form.component.html फ़ाइल के लिए, मैं ऊपर उल्लिखित किये गए के सामान ही HTML टेम्पलेट का उपयोग करने जा रहा हूं, सिर्फ कुछ मामूली बदलावों के साथ। signup फ़ॉर्म में ऑप्शंस की सूची में एक सेलेक्ट फ़ील्ड है। हांलांकि यह काम करता है, हम इसे ngFor डायरेक्टिव का उपयोग करके Angular के तरीके से लिस्ट में लूप करके करेंगे।

app/signup-form/signup-form.component.html

इसके बाद, हम फॉर्म डेटा को यूजर क्लास के ऑब्जेक्ट में बाइंड करना चाहते हैं ताकि जब आप फॉर्म में signup डेटा डालें, तो एक नया User ऑब्जेक्ट बन जाए जो अस्थायी रूप से उस डेटा को स्टोर करें। इस तरह, आप व्यू को मॉडल के साथ सिंक (sync) में रख सकते हैं, और इसे binding कहा जाता है।

ऐसा होने के कुछ तरीके हैं। सबसे पहले मैं आपको ngModel और ngForm से मिलवाऊंगा।

ngForm और ngModel

ngForm और ngModel Angular के डायरेक्टिव हैं जो टेम्पलेट-संचालित फॉर्म्स को बनाने के लिए आवश्यक हैं। चलिए पहले ngForm के साथ शुरू करते हैं। यहां Angular docs से ngForm के बारे में एक excerpt है।

NgForm डायरेक्टिव अतिरिक्त फीचर्स के साथ form एलिमेंट को सप्लीमेंट करता है। यह आपके द्वारा ngModel डायरेक्टिव और name एट्रिब्यूट वाले एलिमेंट्स के लिए बनाए गए कण्ट्रोल को रखता है, और उनकी वैलिडिटी सहित उनकी प्रॉपर्टीज को मॉनिटर करता है। इसमें अपनी valid प्रॉपर्टी भी है जो केवल तभी true होती है यदि प्रत्येक शामिल कण्ट्रोल वैलिड है।

सबसे पहले, ngForm डायरेक्टिव के साथ फॉर्म को अपडेट करें:

app/signup-form/signup-form.component.html

#signupform एक टेम्पलेट रिफरेन्स वेरिएबल है जो ngForm डायरेक्टिव को रेफेर करता है जो पूरे फॉर्म को नियंत्रित करता है। नीचे दिए गए उदाहरण वेलिडेशन के लिए एक ngForm रिफरेन्स ऑब्जेक्ट के उपयोग को दर्शाता है।

app/signup-form/signup-form.component.html

यहां, signupForm.form.valid false रीटर्न करेगा जब तक कि सभी फॉर्म एलिमेंट उनके संबंधित वेलिडेशन जांच से न गुजारें। सबमिट बटन तब तक डिसएबल हो जाएगा जब तक कि फॉर्म वैलिड नहीं है।

टेम्पलेट और मॉडल को बाइंड करने के लिए, ऐसा करने के कई तरीके हैं, और इस स्थिति से निपटने के लिए ngModel के तीन अलग-अलग सिंटेक्स होते हैं। वो हैं:

  1. [(NgModel)]
  2. [NgModel]
  3. ngModel

चलो पहले एक के साथ शुरू करते हैं।

[(ngModel)] का उपयोग करके Two-Way binding

[(ngModel)] इनपुट कण्ट्रोल की वैल्यूज को पढ़ने और लिखने के लिएtwo-way binding करता है। यदि [[ngModel]] डायरेक्टिव का उपयोग किया जाता है, तो इनपुट फ़ील्ड बाउंड कॉम्पोनेन्ट क्लास से प्रारंभिक वैल्यू लेता है और इसे वापस अपडेट करता है जब भी इनपुट कण्ट्रोल वैल्यू में कोई परिवर्तन (keystroke होने पर और बटन प्रेस होने पर) का पता चलता है। नीचे दी गई इमेज दो तरह से binding प्रोसेस को बेहतर तरीके से बताती है।

Two-way binding with ngModel

ईमेल इनपुट फ़ील्ड के लिए यहां कोड दिया गया है:

[(ngModel)] = "user.email" यूजर की ईमेल प्रॉपर्टी को इनपुट वैल्यू से जोड़ता है। मैंने एक name एट्रिब्यूट को जोड़ा है और name="email" को सेट किया है। यह महत्वपूर्ण है, और आपको एक error मिल जाएगा यदि आपने ngModel का उपयोग करते समय name एट्रिब्यूट को घोषित नहीं किया हो।

इसी प्रकार, [[ngModel]] और एक unique name एट्रिब्यूट को प्रत्येक फॉर्म एलिमेंट के लिए जोड़ें। आपके फॉर्म को अब ऐसा कुछ दिखना चाहिए:

app/signup-form/signup-form.component.html

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

ब्राउज़र में JSON के रूप में मॉडल को रेंडर करने के लिए JsonPipe के माध्यम से यूजर की प्रॉपर्टी को पाइप करें। यह डिबगिंग और लॉगिंग के लिए उपयोगी है। आपको इस तरह से एक JSON आउटपुट दिखना चाहिए।

An example of JSON output

वैल्यूज व्यू से मॉडल तक बह रही हैं। दूसरे मौजूद तरीके के बारे में क्या? यूजर ऑब्जेक्ट को कुछ वैल्यूज के साथ आरंभ करने का प्रयास करें।

app/signup-form/signup-form.component.ts

और वे खुद ही व्यू में दिखाई देते हैं:

two-way binding [(ngModel)] सिंटेक्स आपको आसानी से फ़ॉर्म बनाने में मदद करता है हालांकि, इसमें कुछ कमियां हैं; इसलिए, एक वैकल्पिक एप्रोच है जो ngModel या [ngModel] का उपयोग करता है।

ngModel को Mix में जोड़ना

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

तो [(ngModel)] = " " के सभी इंस्टैंस को ngModel के साथ बदलें। हम name एट्रिब्यूट को रखेंगे क्योंकि ngModel के सभी तीन वर्जन को काम करने के लिए name एट्रिब्यूट की आवश्यकता होगी।

app/signup-form/signup-form.component.html

ngModel के साथ, name एट्रिब्यूट की वैल्यू ngForm के रिफरेन्स ऑब्जेक्ट signupForm की एक कुंजी बन जायेगी जो हमने पहले बनाया था। इसलिए, उदाहरण के लिए, signupForm.value.email ईमेल id के लिए कण्ट्रोल वैल्यू को स्टोर करेगा।

{{user | json}} को {{signupForm.value | json }} के साथ बदलें क्योंकि यहीं सभी स्टेट को इस समय स्टोर किया गया है।

[ngModel] का प्रयोग करके एक तरफ़ा बाइंडिंग

क्या होगा अगर आपको बाउंड क्लास कॉम्पोनेन्ट से प्रारंभिक अवस्था निर्धारित करने की आवश्यकता हो? यही वो है जो [ngModel] आपके लिए करता है।

One-way binding with ngModel

यहां मॉडल से व्यू तक डेटा बहता है। एक तरफ़ा बाइंडिंग का उपयोग करने के लिए सिंटैक्स में निम्नलिखित परिवर्तन करें:

app/signup-form/signup-form.component.html

तो आप किस एप्रोच को चुनना चाहेंगे? यदि आप [(ngModel)] और ngForm का उपयोग एक साथ कर रहे हैं, तो आपको अंततः दो स्टेट्स बनाए रखने के लिए—user और signupForm.value मेन्टेन करना होगा-होगा और यह आपको संभवतः कंफ्यूज कर सकता है।

इसलिए, मैं इसके बदले एक तरफ़ा बाइंडिंग मेथड का उपयोग करने की सिफारिश करूँगा। लेकिन यह वो है जिसको आपको तय करना है।

वेलिडेशन और Error मैसेज को दिखाना

वेलिडेशन के लिए हमारी आवश्यकताएं यहाँ हैं।

  • सभी फॉर्म कण्ट्रोल रिक्वायर्ड हैं।
  • सभी इनपुट फ़ील्ड भरने तक सबमिट बटन को डिसएबल करें।
  • ईमेल फ़ील्ड में सिर्फ एक ईमेल आईडी ही होनी चाहिए।
  • पासवर्ड फ़ील्ड में न्यूनतम लंबाई 8 होनी चाहिए।
  • दोनों पासवर्ड और कन्फर्मेशन मैच होने चाहिए।
Form with Validation using Template-driven forms
वेलिडेशन को लगाकर हमारा फॉर्म

पहला वाला आसान है। आपको इस तरह प्रत्येक फॉर्म एलिमेंट में एक required वेलिडेशन एट्रिब्यूट को जोड़ना होगा:

app/signup-form/signup-form.component.html

required एट्रिब्यूट के अलावा, मैंने एक नया #email टेम्पलेट रिफरेन्स वेरिएबल निर्यात भी किया हैI ऐसा इसलिए है कि आप खुद टेम्पलेट के अंदर ही से इनपुट बॉक्स के Angular कण्ट्रोल को एक्सेस कर सकते हैं। हम इसका इस्तेमाल errors और warnings को दिखाने के लिए करेंगे। अब बटन की disabled प्रॉपर्टी का प्रयोग करके बटन को डिसएबल करें:

app/signup-form/signup-form.component.html

ईमेल पर एक बाधा (कन्सट्रैन्ट) जोड़ने के लिए, पैटर्न एट्रिब्यूट का उपयोग करें जो कि इनपुट फ़ील्ड के साथ काम करता है। पैटर्न नीचे दिए गए अनुसार एक रेगुलर एक्सप्रेशन को निर्दिष्ट करने के लिए उपयोग किया जाता है:

पासवर्ड फ़ील्ड के लिए, आपको बस minlength=" " एट्रिब्यूट को जोड़ना है:

app/signup-form/signup-form.component.html

errors को प्रदर्शित करने के लिए, मैं एक div एलिमेंट पर कंडीशनल डायरेक्टिव ngIf का उपयोग करने जा रहा हूं। ईमेल के लिए इनपुट कण्ट्रोल फील्ड से शुरू करते हैं:

app/signup-form/signup-form.component.html

यहां पर बहुत कुछ चल रहा है। आइए error सेक्शन की पहली लाइन से शुरू करते हैं।

#email वेरिएबल को याद करें जो हमने पहले एक्सपोर्ट किया था? यह ईमेल फील्ड के इनपुट कण्ट्रोल स्टेट के बारे में कुछ जानकारी रखता है। इसमें शामिल हैं: email.valid, email.invalid, email.dirty, email.pristine, email.touched, email.untouched, और email.errors। नीचे दी गई इमेज में हर एक प्रॉपर्टी को विस्तार से वर्णित किया गया है।

Different class properties for displaying errors

इसलिए *ngIf के साथ div एलिमेंट केवल तभी रेंडर किया जाएगा यदि ईमेल इनवैलिड है। हालांकि, आप के पास फॉर्म को एडिट करने का मौका होने से पहले भी इनपुट फ़ील्ड रिक्त होने के बारे में errors से यूजर को ग्रीट (greet) किया जायेगा।

इस परिदृश्य से बचने के लिए, हमने दूसरी कंडीशन जोड़ दी है। कण्ट्रोल में विजिट करने के बाद ही error प्रदर्शित किया जाएगा या कण्ट्रोल की वैल्यू को बदल दिया जायेगा

नेस्टेड div एलिमेंट्स को वेलिडेशन errors के सभी मामलों को कवर करने के लिए उपयोग किया जाता है। हम सभी संभावित वेलिडेशन errors को जांचने के लिए और फिर कस्टम मैसेज के रूप में यूजर को उन्हें वापस प्रदर्शित करने के लिए email.errors का उपयोग करते हैं। अब, अन्य फार्म एलिमेंट्स के लिए इसी प्रक्रिया का पालन करें। यहां बताया गया है कि कैसे मैंने पासवर्ड के लिए वेलिडेशन की कोडिंग की है।

app/signup-form/signup-form.component.html

यह थोड़ी गड़बड़ दिखना शुरू कर रहा है। Angular के पास वैलिडेट करने के लिए ऐट्रिब्यूट्स का एक सीमित सेट ही है: required, minlength, maxlength, और pattern। पासवर्ड तुलना की तरह किसी भी अन्य परिदृश्य को कवर करने के लिए, आपको नेस्टेड ngIf कंडीशनल पर भरोसा करना होगा जैसा कि मैंने ऊपर किया था या आदर्श रूप से, एक कस्टम validator फंक्शन बनाएं, जिसे मैं इस सीरीज के तीसरे भाग में शामिल करूँगा।

उपर्युक्त कोड में, मैंने ngIf else सिंटैक्स का उपयोग किया है जो Angular के नवीनतम संस्करण में पेश किया गया था। यहाँ दिया गया है कि यह कैसे काम करता है:

ngSubmit का उपयोग कर के फॉर्म सबमिट करें

हमने फार्म लगभग समाप्त कर लिया है। अब हमें फॉर्म सबमिट करने में सक्षम होना चाहिए, और फ़ॉर्म डेटा का कण्ट्रोल कॉम्पोनेन्ट मेथड को सौंप दिया जाना चाहिए, जो है onFormSubmit()

app/signup-form/signup-form.component.ts

अब, कॉम्पोनेन्ट के लिए:

app/signup-form/signup-form.component.ts

अंतिम डेमो

यहां एप्लीकेशन का अंतिम वर्जन है। मैंने फार्म को सुंदर बनाने के लिए कुछ बूटस्ट्रैप क्लासेज जोड़ दी हैं।

सारांश

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

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

नीचे कमैंट्स में अपने विचारों को साझा करें।

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.