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

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

by
Difficulty:BeginnerLength:MediumLanguages:
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)

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

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

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

नहीं तो, हमारे GitHub रेपो से इस कोड की एक कॉपी ले लो और इसे एक शुरुआती बिंदु के रूप में उपयोग करो।

बिल्ट-इन वैलिडेटर्स

Angular विशाल बिल्ट-इन वैलिडेटर्स लाइब्रेरी का दावा नहीं करता है। जहाँ तक Angular 4 की बात है, हमारे पास Angular के निम्नलिखित लोकप्रिय वैलिडेटर्स है:

  • required
  • minlength
  • maxlength
  • pattern

वास्तव में कुछ और भी हैं, और आप पूरी लिस्ट Angular docs में देख सकते हैं।

हम ऊपर दिए गए बिल्ट-इन वैलिडेटर का दो तरीकों से उपयोग कर सकते हैं:

1. टेंप्लेट-ड्रिवन फॉर्म्स में डायरेक्टिव के रूप में।

2.  मॉडल-ड्रिवन फॉर्म्स में FormControl कंस्ट्रक्टर के अंदर वैलिडेटर्स के रूप में।

यदि ऊपर दिए गए सिंटेक्स आपको समझ में नहीं आए, तो टेंप्लेट-ड्रिवन अप्रोच या मॉडल-ड्रिवन अप्रोच का उपयोग करके signup फॉर्म बनाने पर मेरे पिछले ट्यूटोरियल को फॉलो करें और फिर उसे छोड़ वापस आ जाए!

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

यहाँ एक तथ्य है: टेंप्लेट-ड्रिवन फॉर्म अंदर से खुद मॉडल-ड्रिवन फॉर्म ही है। टेंप्लेट-ड्रिवन फॉर्म में, हम टेंपलेट को ही हमारे लिए मॉडल बनाने का ध्यान रखने देते हैं। एक सीधा प्रश्न अब यह है, आप एक वैलिडेटर को एक फॉर्म में कैसे अटैच करते हैं?

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

डिटेल में और गहराई से जाना

हालांकि यह पहले से ही कवर किया जा चुका है, हम जल्दी से signup फॉर्म के लिए कोड के एक रीकैप के माध्यम से जाएंगे। सबसे पहले, यहां एक रिएक्टिव एप्रोच है।

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

FormBuilder एक सिंटेक्स शुगर है जो FormGroup और FormControl का इंस्टेंस बनाता है। एक FormControl एक इंडिविजुअल फॉर्म एलिमेंट की वैल्यू और वैलिडेशन की स्टेट को ट्रैक करता है। दूसरी ओर, एक FormGroup में, FormControl इंस्टेंसस का एक ग्रुप शामिल होता है, और यह पूरे ग्रुप की वैल्यू और वैलिडिटी को ट्रैक करता है।

यहां वह स्ट्रक्चर है जिसे हम फॉलो करने जा रहे हैं:

जरूरत के हिसाब से, हम एक FormControl या एक FormGroup पर एक वैलिडेटर जोड़ सकते हैं। एक ईमेल को ब्लैक लिस्ट करने वाले वैलिडेटर को ईमेल के FormControl इंस्टेंस के साथ जोड़ने की आवश्यकता होगी।

हालांकि, अधिक मुश्किल वैलिडेशंस जहां एक से अधिक कंट्रोल फील्ड को कंपेयर और वैलिडेट किया जाना हो, वहां यह बेहतर उपाय होगा कि पेरेंट FormGroup पर वैलिडेशन लॉजिक को जोड़ दें। जैसा कि आप देख सकते हैं, password के पास अपना खुद का FormGroup है, और यह हमारे लिए उन वैलिडेटर को जो pwd और confirmPwd को एक सामान वैल्यू के लिए जांचते हैं, उन्हें लिखना आसान बनाता है।

टेंप्लेट-ड्रिवन फॉर्म के लिए, वह सभी लॉजिक HTML टेंप्लेट में जाते हैं, और यहां एक उदाहरण है:

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

ngModel FormControl का एक इंस्टेंस बनाता है और उसे फॉर्म कंट्रोल एलिमेंट के साथ बाइंड कर देता है। इसी तरह से, ngModelGroup FormGroup इंस्टेंस को एक DOM एलिमेंट में बनाता और बाइंड करता है। वे एक ही मॉडल डोमेन स्ट्रक्चर को शेयर करते हैं जिसके बारे में हमने ऊपर डिस्कस किया है।

यह भी ध्यान रखना दिलचस्प होगा कि FormControl, FormGroup, और FormArray AbstractControl क्लास को एक्सटेंड करते हैं। इसका मतलब यह है कि AbstractControl क्लास फॉर्म ऑब्जेक्ट्स की वैल्यू पर नजर रखने, उन्हें वैलिडेट करने, और अन्य चीजों को जैसे कि pristine, dirty, और touched मेथड, को पावर देती है।

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

मॉडल-ड्रिवन फॉर्म के लिए कस्टम वैलिडेटर फंक्शन

वैलिडेटर्स वे फंक्शन है, जो एक FormControl / FormGroup इंस्टेंस को इनपुट की तरह लेता है और या तो null या एक error ऑब्जेक्ट रीटर्न करता है। null को रीटर्न किया जाता है जब वैलिडेशन सफल हो, और यदि नहीं, तो error ऑब्जेक्ट को थ्रो किया जाता है। यहां वैलिडेशन फंक्शन का एक बहुत ही बेसिक वर्जन है।

app/password-match.ts

मैंने एक फंक्शन डिक्लेअर किया है जो FormGroup के इंस्टेंस को एक इनपुट के तौर पर स्वीकार करता है। यह एक key जिसका टाइप स्ट्रिंग हो और true/false वैल्यू का एक ऑब्जेक्ट रिटर्न करता है। ऐसा इसलिए है ताकि हम नीचे दिए गए फॉर्म के एक error ऑब्जेक्ट को रिटर्न कर सके:

इसके बाद, हमें pwd और confirmPwd FormControl इंस्टेंसस की वैल्यू प्राप्त करने की आवश्यकता है। मैं उनकी वैल्यू को लाने के लिए control.get() का उपयोग करने जा रहा हूं।

अब हमें कंपेयर करने की आवश्यकता है और फिर या तो null या एक एरर ऑब्जेक्ट रिटर्न किया जाएगा।

app/password-match.ts

मैंने AbstractControl के साथ FormGroup को रिप्लेस क्यों किया? जैसा कि आप जानते हैं, AbstractControl सभी Form* क्लासेस की मदर है, और यह आपको फॉर्म कंट्रोल ऑब्जेक्ट्स पर और अधिक कंट्रोल देता है। इसमें एक अतिरिक्त लाभ यह है कि यह हमारे वैलिडेशन कोड को और अधिक कंसिस्टेंट बनाता है।

SignupForm कॉम्पोनेंट में passwordMatch को इंपोर्ट करें और इसे पासवर्ड FormGroup इंस्टेंस के लिए एक वैलिडेटर के रूप में डिक्लेअर करें।

app/password-match.ts

Errors को डिस्पले करना

यदि आपने सब कुछ सही किया है, तो password.errors?.mismatch true होगा जब भी दोनों फील्ड की वैल्यू मैच नहीं करती।

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

सबसे पहले, मैं यह देखने के लिए ngIf का उपयोग करने जा रहा हूं कि क्या पासवर्ड इनवेलिड है।

हम password.touched का उपयोग यह सुनिश्चित करने के लिए करते हैं की यूजर का सामना एरर्स के साथ नहीं हुआ है यहां तक की किसी key को दबाने से भी पहले।

इसके बाद, मैं ngIf=”expression; then a else b” सिंटेक्स का प्रयोग करने जा रहा हूं ताकि सही एरर को डिस्प्ले किया जाए।

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

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

मॉडल-ड्रिवन फॉर्म्स में कस्टम वैलिडेटर्स के लिए डेमो

टेंप्लेट-ड्रिवन फॉर्म्स के लिए कस्टम वैलिडेटर डायरेक्टिव

हम उसी वैलिडेटर फंक्शन का उपयोग करेंगे जो हमने मॉडल ड्रिवन फॉर्म के लिए पहले बनाया था। हालांकि, हमारे पास टेंप्लेट ड्रिवन फॉर्म में FormControl / FormGroup के इंस्टेंसस तक सीधी पहुंच नहीं है। यहां वह चीजें हैं जिनकी आपको वैलिडेटर को काम करने योग्य बनाने के लिए आवश्यकता होगी:

  1. एक PasswordMatchDirective बनाएं जो passwordMatch वैलिडेटर फंक्शन के चारों ओर एक रैपर के रूप में काम करता हो। हम डायरेक्टिव को NG_VALIDATORS प्रोवाइडर का प्रयोग करके एक वैलिडेटर की तरह रजिस्टर करेंगे। इसके बारे में और अधिक बाद में देखते हैं।
  2. टेंप्लेट फॉर्म कंट्रोल में डायरेक्टिव को अटैच करें।

चलिए पहले डायरेक्टिव को लिखते हैं। जहां आप देख सकते हैं कि Angular में डायरेक्टिव किस प्रकार दिखता है:

app/password-match.ts

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

app/password-match.ts

  1. डायरेक्टिव अब सभी इनपुट कंट्रोल्स के साथ जुड़ा हुआ है जिनमें ngModelGroup और passwordMatch के अटरीब्यूट्स है।
  2. हम NG_VALIDATORS प्रोवाइडर का उपयोग करके बिल्ट-इन वैलिडेटर्स को एक्सटेंड करते हैं। जैसा कि पहले उल्लेख किया गया है, NG_VALIDATORS एक प्रोवाइडर है जिसके पास वैलिडेटर्स का एक्सटेंसिबल कलेक्शन है। passwordMatch फंक्शन जो हमने पहले बनाया था, एक डिपेंडेंसी के रूप में डिक्लेयर किया गया है। multi: true इस प्रोवाइडर को एक मल्टी-प्रोवाइडर बनाता है। इसका मतलब यह है कि NG_VALIDATORS द्वारा प्रदान किए गए वैलिडेटर्स के मौजूदा कलेक्शन में जोड़ देंगे।

अब ngModule में डिक्लेरेशन के लिए डायरेक्टिव जोड़ें।

app/app.module.ts

Error मैसेजेस को डिस्प्ले करना

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

टेम्पलेट-ड्रिवेन फॉर्म में कस्टम वेलीडेटर का एक डेमो

निष्कर्ष

इस ट्यूटोरियल में, हमने Angular में फॉर्म के लिए कस्टम Angular वैलिडेटर्स बनाने के बारे में सीखा।

वैलिडेटर्स ऐसे फंक्शंस हैं जो null या error ऑब्जेक्ट रिटर्न करते हैं। मॉडल-ड्रिवन फॉर्म्स में, हमें वैलिडेटर्स को FormControl / FormGroup इंस्टेंस में अटैच करना होगा, और बस इतना ही। टेंप्लेट-ड्रिवन फॉर्म में प्रोसेस थोड़ा अधिक मुश्किल था क्योंकि हमें वैलिडेटर्स फंक्शन के टॉप पर एक डायरेक्टिव बनाने की जरूरत थी।

यदि आप जावास्क्रिप्ट के बारे में और अधिक जानने के लिए आगे बढ़ने में रुचि रखते हैं, तो इसकी जांच जरूर करें कि हमारे पास Envato Market में क्या है।

मुझे आशा है कि आप ने Angular में फॉर्म्स पर इस सीरीज का आनंद लिया होगा। मुझे आपके विचार सुनकर अच्छा लगेगा। उन्हें कमैंट्स के माध्यम से सांझा करें।

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.