🧦 🍨 🤠 Mobx @ quantumart / mobx-form-validation-kit पर प्रतिक्रिया के लिए नया सत्यापन पैकेज 👨🏾‍🤝‍👨🏼 🐤 🕺🏿

शुभ दोपहर
आज मैं उन परियोजनाओं में अतुल्यकालिक मान्यताओं के लिए एक नए पैकेज के बारे में बात करना चाहता हूं जो कि React , Mobx पर आधारित हैं और टाइपस्क्रिप्ट में लिखे गए हैं।
आधुनिक सीमांत विकास में साइट पर दस्तावेजों, प्रश्नावली और दस्तावेजों के साथ पृष्ठों को भरना, ऋण के लिए भुगतान के आदेश, पंजीकरण पृष्ठ शामिल हैं। मुख्य तार्किक बोझ सत्यापन जांचों पर पड़ता है। कोणीय डेवलपर्स ने इस बिंदु पर सोचा और डेवलपर्स को इन उद्देश्यों के लिए अंतर्निहित फॉर्मकंट्रोल तंत्र का उपयोग करने की पेशकश की, जो कि हालांकि, इसमें कई कमियां हैं, फिर भी रिएक्ट पर इस तरह के समाधान की पूर्ण अनुपस्थिति से बेहतर है। स्थिति इस तथ्य से जटिल है कि रिएक्ट विकास की वर्तमान प्रवृत्ति में व्यापारिक तर्क को व्यवस्थित करने के लिए मोबाइल का उपयोग शामिल है।
इन समस्याओं का सामना करते हुए, हमने सभी को एक पैकेज लिखकर हल किया: @ क्वांटमार्ट / मोबेक्स-फॉर्म-वेलिडेशन-किट

पैकेज के लाभ:

टाइपस्क्रिप्ट पर पूरी तरह से
Mobx के साथ संगत (संस्करण 4, जो सभी का पसंदीदा, IE10 का समर्थन करता है)
प्रतिक्रिया में काम करने के लिए डिज़ाइन किया गया (बिना प्रतिक्रिया के परियोजनाओं में इस्तेमाल किया जा सकता है)
अतुल्यकालिक सत्यापन के लिए डिज़ाइन किया गया
मौजूदा प्रोजेक्ट में एम्बेड करना आसान है।

कट के तहत पैकेज के साथ काम करने के निर्देश।

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

FormControl

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

फॉर्म को प्रबंधित करने के लिए @ क्वांटमार्ट / मोबेक्स-फॉर्म-वेलिडेशन-किट लाइब्रेरी में तीन मुख्य वर्ग (सत्यापन घटक) शामिल हैं:

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

इसके अलावा, मूल सार कक्षाएं हैं

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

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

this.form = new FormGroup<IUserInfo>({ name: new FormControl( this.userInfo.name, [], v => (this.userInfo.name = v) ), surname: new FormControl( this.userInfo.surname, [], v => (this.userInfo.surname = v) ) // … });

फॉर्मग्रुप नेस्टिंग का समर्थन करता है, अर्थात

 this.form = new FormGroup<IUserInfo>({ name: new FormControl( this.userInfo.name, [], v => (this.userInfo.name = v) ), surname: new FormControl( this.userInfo.surname, [], v => (this.userInfo.surname = v) ) passport: new FormGroup<IPassport >({ number: new FormControl( this.userInfo.passport.number, [], v => (this.userInfo.passport.number = v) ), // … }) // … });

आप FormArray जोड़ सकते हैं, जो बदले में FormControl और या पूरे FormGroup को किसी भी जटिलता और संरचना की वस्तुओं को बनाने के लिए पारित किया जा सकता है।

FormArray <FormControl>
FormArray <FormGroup>

FormControl स्वयं निर्माणकर्ता में मापदंडों का निम्नलिखित सेट लेता है
- मूल्य : तीक्ष्णता आरंभिक मूल्य है।
- सत्यापनकर्ता : मान्यकर्ताफंक्शनफॉर्मकंट्रोलहैंडलर [] - सत्यापनकर्ताओं का एक समूह।
- callbackValidValue : UpdateValidValueHandler | null - कॉलबैक फ़ंक्शन जिसके लिए अंतिम वैध मान पारित किया गया है। यह हर बार फॉर्म-कॉन्ट्रोल परिवर्तनों में एक मूल्य कहा जाता है और यह मान वर्णित मान्यताओं को पारित करता है।
- सक्रिय करें : () (= = बूलियन) | null - फ़ंक्शन स्थिति के अनुसार सत्यापन को सक्षम / अक्षम करेगा (हमेशा डिफ़ॉल्ट रूप से सक्षम)। उदाहरण के लिए, "असीमित" चेकबॉक्स की जाँच नहीं होने पर सेवा की अंतिम तिथि की वैधता की जाँच करने की आवश्यकता नहीं है। नतीजतन, बस यहां एक फ़ंक्शन दर्ज करके जो "असीमित" चेकबॉक्स के लिए जिम्मेदार अवलोकन क्षेत्र की स्थिति की जांच कर रहा है, आप तारीख की प्रत्येक सत्यापन में इस तर्क को दर्ज करने के बजाय, दिनांक की जाँच करने के लिए फ़ील्ड से जुड़े सभी सत्यापन को स्वचालित रूप से बंद कर सकते हैं।
- अतिरिक्तडेटा : TAdditionalData | अशक्त - अतिरिक्त जानकारी वाला एक ब्लॉक आपको एक विशिष्ट फॉर्मकंट्रोल में अतिरिक्त जानकारी जोड़ने और उन्हें बाद में उपयोग करने की अनुमति देता है, उदाहरण के लिए, विज़ुअलाइज़ेशन के लिए। यह सुविधाजनक है अगर वहाँ FormControl के लिए बिल्डरों हैं जिसमें आपको कुछ जानकारी को पार्स करने की आवश्यकता है, और विज़ुअलाइज़ेशन के नियंत्रण के लिए एक जटिल डेटा बंडल के माध्यम से इस जानकारी को पास न करें। हालाँकि, मैं एक सटीक और निर्विवाद अनुप्रयोग परिदृश्य नहीं दे सकता, लेकिन इसके बिना इस तरह के अवसर को भुगतना बेहतर है।
एक सीमा है कि कोणीय फॉर्मकंट्रोल भी है; विभिन्न रूपों पर वस्तुओं का पुन: उपयोग करने की कोई आवश्यकता नहीं है। यानी आप एक फॉर्मग्रुप बिल्डर बना सकते हैं और प्रत्येक पृष्ठ पर अपनी खुद की वस्तु बना सकते हैं। लेकिन पृष्ठों के गुच्छा के प्रति एक वस्तु का उपयोग करना बुरा व्यवहार है।
इसके अलावा, FormControl एक एकल मूल्य के साथ आरंभीकृत होता है, और यदि यह मान बदल जाता है, तो नया मान FormControl में नहीं आएगा । यह उद्देश्य से किया जाता है, क्योंकि, जैसा कि अभ्यास से पता चला है, किसी कारण से, हर कोई मूल मान्यताओं को दरकिनार करते हुए मूल वस्तु को शुरू में संपादित करने की कोशिश कर रहा है, और फॉर्मकंट्रोल में मूल्य नहीं। मूल ऑब्जेक्ट को संशोधित करने के लिए FormControl के मान फ़ील्ड में एक नया मान असाइन करें।
फॉर्मग्रुप , कंस्ट्रक्टर में मापदंडों के निम्नलिखित सेट को स्वीकार करता है:
- नियंत्रण : TControls - AbstractControls से विरासत में मिली एक वस्तु। वास्तव में, बस AbstractControls से विरासत में मिला एक इंटरफ़ेस बनाएं जिसमें आप FormGroup , FormControl , FormArray के प्रकारों की गणना करते हैं । आप निश्चित रूप से टाइप को किसी भी पर सेट कर सकते हैं, लेकिन फिर टाइपस्क्रिप्ट के सभी फायदे खो जाएंगे।
- सत्यापनकर्ता : मान्यकारकफ़ॉर्मफॉर्मग्रुपहैंडलर [] - समूह मूल्यों के लिए सत्यापनकर्ताओं का एक समूह। उदाहरण के लिए, आप एक फॉर्मग्रुप बना सकते हैं जिसमें दो मान हों - न्यूनतम और अधिकतम तिथि, अवधि चयन नियंत्रण के लिए। यह इन सत्यापनकर्ताओं में है कि आपको तिथि सीमा की जांच करने के लिए फ़ंक्शन / फ़ंक्शन को पास करना होगा। उदाहरण के लिए, प्रारंभ तिथि अंतिम तिथि से अधिक नहीं है
- सक्रिय करें : () (= = बूलियन) | null - फ़ंक्शन स्थिति के अनुसार सत्यापन को सक्षम / अक्षम करेगा (हमेशा डिफ़ॉल्ट रूप से सक्षम)। यह समझना चाहिए कि एक समूह में सत्यापन समारोह को लागू करना पूरे समूह के स्तर पर सत्यापन को अक्षम करता है। उदाहरण के लिए, हमारे पास एक पहचान दस्तावेज के लिए एक चयन बॉक्स है। आप दस्तावेज़ों के लिए फ़ील्ड के एक अलग सेट के साथ कई फॉर्मग्रुप्स बना सकते हैं: पासपोर्ट, ड्राइवर का लाइसेंस, नाविक का पासपोर्ट, आदि ... इस फ़ंक्शन में, ड्रॉपडाउन मानों की जांच करें, और यदि चयनित मान इस समूह के अनुरूप नहीं है, तो सभी वैध चेक अक्षम हैं। अधिक सटीक रूप से, समूह को मान्य माना जाएगा, भले ही इसमें कोई मूल्य न हो।
आइए FormControl फ़ील्ड्स के बारे में बात करते हैं, जिसमें फ़ॉर्मग्रुप और फ़ॉर्मअरे दोनों की उपस्थिति शामिल है।
- ControlTypes - नियंत्रण का प्रकार (नियंत्रण | समूह | सरणी)
- प्रसंस्करण : बूलियन - विश्लेषण की प्रक्रिया में। क्योंकि अतुल्यकालिक सत्यापन का समर्थन किया जाता है, उदाहरण के लिए, जिन्हें सर्वर अनुरोध की आवश्यकता होती है। स्कैन की वर्तमान स्थिति इस क्षेत्र में पाई जा सकती है।
  इसके अलावा, फॉर्मग्रुप और फॉर्मअरे प्रतीक्षा पद्धति का समर्थन करते हैं, जो आपको चेक को पूरा करने के लिए इंतजार करने की अनुमति देता है। उदाहरण के लिए, जब आप "डेटा भेजें" बटन पर क्लिक करते हैं, तो आपको निम्नलिखित डिज़ाइन को पंजीकृत करना होगा।
```
 await this.form.wait(); if (this.form.invalid) { … 
```
- अक्षम : बूलियन - त्रुटि जाँच अक्षम है (नियंत्रण हमेशा मान्य है)
- सक्रिय : बूलियन - त्रुटि जाँच सक्षम है। सक्रियण फ़ंक्शन के परिणाम पर निर्भर करता है। यह मान किसी प्रपत्र पर फ़ील्ड के समूह को छिपाने के लिए उपयोग करने के लिए बहुत सुविधाजनक है और व्यावसायिक तर्क के अतिरिक्त और डुप्लिकेट फ़ंक्शन नहीं लिखता है।
- अमान्य : बूलियन; - फॉर्मकंट्रोल के लिए - इसका मतलब है कि क्षेत्र में सत्यापन त्रुटियां हैं। फॉर्मग्रुप और फॉर्मअरे के लिए, इसका मतलब है कि समूह नियंत्रण में स्वयं त्रुटियां हैं, या किसी नेस्टेड फ़ील्ड (किसी भी नेस्टिंग स्तर पर) में सत्यापन त्रुटियाँ हैं। यानी पूरे फॉर्म की वैधता की जांच करने के लिए, ऊपरी फॉर्मग्रुप की एक अमान्य या वैध जांच करना पर्याप्त है।
- वैध : बूलियन - फॉर्मकंट्रोल के लिए - का अर्थ है कि क्षेत्र में सत्यापन त्रुटियां नहीं हैं। फॉर्मग्रुप और फॉर्मअरे के लिए, इसका मतलब है कि समूह नियंत्रण में स्वयं त्रुटियां नहीं हैं और किसी भी नेस्टेड फ़ील्ड (किसी भी नेस्टिंग स्तर पर) में सत्यापन त्रुटियाँ नहीं हैं।
- प्राचीन : बूलियन - फ़ील्ड में मान, डिफ़ॉल्ट मान के साथ आरंभीकरण के बाद, नहीं बदला।
- गंदा : बूलियन - क्षेत्र में मान, डिफ़ॉल्ट मान के साथ आरंभीकरण के बाद, बदल गया।
- अछूता : बूलियन - फॉर्मकंट्रोल के लिए - इसका मतलब है कि फ़ील्ड (जैसे इनपुट) ध्यान में नहीं था। फॉर्मग्रुप और फॉर्मअरे के लिए इसका मतलब है कि नेस्टेड फॉर्मकंट्रोल में से कोई भी फोकस में नहीं था। इस क्षेत्र में असत्य का अर्थ यह है कि फोकस केवल सेट नहीं किया गया था, बल्कि क्षेत्र से हटा दिया गया था।
- छुआ : बूलियन - फॉर्मकंट्रोल के लिए - इसका मतलब है कि क्षेत्र (उदाहरण के लिए, इनपुट) फोकस में था। FormGroup और FormArray के लिए , इसका मतलब है कि नेस्टेड FormControls में से एक फ़ोकस में था। इस क्षेत्र में सही मूल्य का अर्थ है कि फोकस केवल सेट नहीं किया गया था, बल्कि फ़ील्ड से भी हटा दिया गया था।
- फ़ोकस : बूलियन - फॉर्मकंट्रोल के लिए - इसका मतलब है कि फ़ील्ड (उदाहरण इनपुट के लिए) अब फ़ोकस में है। FormGroup और FormArray के लिए , इसका मतलब है कि नेस्टेड FormControls में से एक अब फ़ोकस में है।
- त्रुटियाँ : मान्यकरण [] - क्षेत्र में सत्यापन त्रुटियाँ हैं। सूचीबद्ध फ़ील्डों के विपरीत, इस सरणी में बिल्कुल FormControl , या FormGroup , या FormArray की त्रुटियां हैं , अर्थात्। इस नियंत्रण की त्रुटियां, और सभी नेस्टेड नहीं हैं। मान्य / अमान्य फ़ील्ड को प्रभावित करता है
- चेतावनियाँ : मान्यकरण [] - फ़ील्ड में चेतावनी संदेश शामिल हैं। सूचीबद्ध फ़ील्डों के विपरीत, इस सरणी में बिल्कुल FormControl, या FormGroup, या FormArray की त्रुटियां हैं, अर्थात्। इस नियंत्रण के संदेश, लेकिन सभी संलग्न नहीं हैं। मान्य / अमान्य फ़ील्ड को प्रभावित नहीं करता है
- infoMessages: ValidationEvent [] - फ़ील्ड में सूचनात्मक संदेश होते हैं। सूचीबद्ध फ़ील्डों के विपरीत, इस सरणी में बिल्कुल FormControl, या FormGroup, या FormArray की त्रुटियां हैं, अर्थात्। इस नियंत्रण के संदेश, लेकिन सभी संलग्न नहीं हैं। मान्य / अमान्य फ़ील्ड को प्रभावित नहीं करता है
- सफलताओं : वैधता - क्षेत्र में अतिरिक्त वैधता संदेश शामिल हैं। सूचीबद्ध फ़ील्डों के विपरीत, इस सरणी में बिल्कुल FormControl, या FormGroup, या FormArray की त्रुटियां हैं, अर्थात्। इस नियंत्रण के संदेश, लेकिन सभी संलग्न नहीं हैं। मान्य / अमान्य फ़ील्ड को प्रभावित नहीं करता है
- maxEventLevel () - वर्तमान में फ़ील्ड में सत्यापन संदेशों का अधिकतम स्तर।
- विधि अगली प्राथमिकता में, एनम मूल्यों में से एक को वापस कर देगी।
  1. ValidationEventTypes.Error;
  2. ValidationEventTypes.Warning;
  3. ValidationEventTypes.Info;
  4. ValidationEventTypes.Success;
- ServerErrors : string [] - सर्वर पर एक संदेश भेजने के बाद, यह सर्वर पर फॉर्म की वैधता की जांच करने के लिए अच्छा रूप है। नतीजतन, सर्वर अंतिम फॉर्म की जांच की त्रुटियों को वापस कर सकता है, और सर्वर एरर इन त्रुटियों के लिए अभिप्रेत है। ServerErrors की एक प्रमुख विशेषता सत्यापन संदेशों की स्वचालित सफाई है जब फ़ोकस उस फ़ील्ड से खो जाता है जिस पर सर्वर त्रुटियां दी गई थीं, और यदि फ़ील्ड बदल दी गई है, तो सर्वर त्रुटियाँ भी साफ़ हो जाती हैं।
- onChange: प्रतिनिधि - मानक mobx तंत्र - प्रतिक्रिया के अलावा, आप प्रतिनिधि का उपयोग कर सकते हैं और इसमें कॉलबैक फ़ंक्शन जोड़ सकते हैं, जिसे डेटा बदलने पर कहा जाता है।
- setDirty (गंदा: बूलियन): शून्य - विधि आपको प्राचीन / गंदे खेतों के मूल्य को बदलने की अनुमति देगा
- setTouched (छुआ हुआ: बूलियन): शून्य; - विधि आपको अछूते / छुआ फ़ील्ड के मूल्य को बदलने की अनुमति देगा
- dispose (): void; - घटक के लिए जिम्मेदार नियंत्रण को कॉल करने के लिए आवश्यक हैWillUnmount।
ये सभी नियंत्रणों के लिए सामान्य क्षेत्र थे, लेकिन प्रत्येक नियंत्रण में अपने प्रकार के क्षेत्र भी विशिष्ट होते हैं।
FormControl
- मान - इसमें फ़ील्ड का वर्तमान मान होता है। आप इस फ़ील्ड में एक नया मान भी निर्दिष्ट कर सकते हैं।
फॉर्मग्रुप और फॉर्मअरे में होते हैं
- प्रतीक्षा - विधि आपको नेस्टेड सहित सभी (सत्यापन) के चेक के अंत की उम्मीद करने की अनुमति देती है
- allControls () - यह विधि आपको विभिन्न स्तरों पर नेस्टेड सहित सभी FormControl का एक पूरा सेट प्राप्त करने की अनुमति देता है। यानी वास्तव में, यह एक बहुस्तरीय फॉर्मग्रुप ऑब्जेक्ट का विस्तार करता है, जिसमें फ़ॉर्मग्रुप भी हो सकता है, जिसमें एक बड़ी सूची में केवल फॉर्मकंट्रोल शामिल है। यदि हमें पहला अमान्य तत्व ढूंढना है और उस पर ध्यान केंद्रित करना है तो यह कार्यक्षमता आवश्यक है।
  कोड, इस मामले में, इस तरह दिखेगा:
```
 await this.form.wait(); if (this.form.invalid) { this.form.setTouched(true); const firstError = this.form.allControls().find(c => c.invalid && !!c.element); if (!!firstError) { firstError.element.focus(); } } ... 
```
सत्यापन

बेशक, नियंत्रणों के अलावा जो आपको डेटा के साथ काम करने की अनुमति देते हैं, हमें स्वयं सत्यापन की आवश्यकता है। @ क्वांटमार्ट / मोबेक्स-फॉर्म-वेलिडेशन-किट पैकेज में स्वाभाविक रूप से कई पूर्वनिर्धारित सत्यापन शामिल हैं, और यह कस्टम कस्टम सत्यापन के निर्माण का भी समर्थन करता है।
एक आयु क्षेत्र के लिए फ़ॉर्मकंट्रोल के लिए मान्यताओं को स्थापित करने का एक उदाहरण।
```
 new FormControl<number>( this.userInfo.age, [required(), minValue(18, "    18 .", ValidationEventTypes.Warning)], v => (this.userInfo.age = v) ) 
```
नवीनतम मापदंडों के साथ प्रत्येक सत्यापन होता है:
- संदेश - एक सत्यापन संदेश।
- EventType - संदेश स्तर। 4 संदेश स्तर समर्थित हैं।
  1. त्रुटि - त्रुटियाँ
  2. चेतावनी - चेतावनी
  3. जानकारी - सूचनात्मक संदेश
  4. सफलता - वैधता के बारे में संदेश। उदाहरण के लिए, आप यह सत्यापित कर सकते हैं कि पासवर्ड वास्तव में जटिल है।
पैकेज में मान्यताओं का निम्नलिखित सेट है:
- आवश्यक (... - आवश्यक फ़ील्ड
- notEmptyOrSpaces (... - फ़ील्ड खाली नहीं है और इसमें केवल स्थान नहीं हैं। वास्तव में, आवश्यक है, रिक्त स्थान के निषेध को ध्यान में रखते हुए।
- पैटर्न (regExp: RegExp, ... - पहला पैरामीटर नियमित अभिव्यक्ति है जो फ़ील्ड से मेल खाना चाहिए। पैटर्न मिलान न होने पर एक त्रुटि उत्पन्न होती है।
- invertPattern (regExp: RegExp, ... - पहला पैरामीटर नियमित अभिव्यक्ति है कि फ़ील्ड को मैच नहीं करना चाहिए। पैटर्न मैच होने पर एक त्रुटि उत्पन्न होती है।
- minLength ( मीनलफ्रेम : संख्या, .... - पहला पैरामीटर समावेशी पाठ की न्यूनतम लंबाई है। एक त्रुटि उत्पन्न होती है यदि लंबाई प्रेषित से कम है।
- maxLength (अधिकतम गति: संख्या, .... - पहला पैरामीटर पाठ सम्मिलित की अधिकतम लंबाई है। एक त्रुटि जारी की जाती है यदि लंबाई प्रेषित से अधिक लंबी हो।
- निरपेक्षता (लंबाई: संख्या, .... - पहला पैरामीटर पाठ की सटीक लंबाई है। यदि लंबाई निर्दिष्ट एक से मेल नहीं खाती है, तो एक त्रुटि जारी की जाती है।
- minValue (min: TEntity | ((= => TEntity)), ... - यह मान्यता केवल संख्याओं और तिथियों के लिए अभिप्रेत है। यदि मान निर्दिष्ट से कम है, तो एक त्रुटि सेट की जाती है। सत्यापन की ख़ासियत न केवल एक विशिष्ट मूल्य को स्वीकार करने की क्षमता है, बल्कि यह भी है। फ़ंक्शन, जिसका अर्थ है कि यदि आप ऑब्जेक्ट के @observable फ़ील्ड से इस फ़ंक्शन में मान को पढ़ते हैं, तो सत्यापन को केवल तब ही पुनरारंभ नहीं किया जाएगा जब फ़ील्ड जिस फ़ील्ड को मान्यता दी गई है वह बदल गया है, लेकिन यह भी कि "लिंक किए गए फ़ील्ड" को बदल दिया गया है। पहली टैग क्षेत्र है जो मूल्य @observable के रूप में पढ़ा है, सिवाय इसके।
- maxValue (अधिकतम: TEntity | () => TEntity), ... - यह मान्यता केवल संख्याओं और तिथियों के लिए अभिप्रेत है। यदि कोई मान निर्दिष्ट से अधिक है तो एक त्रुटि सेट की गई है। सत्यापन विशेषता केवल विशिष्ट मान को स्वीकार करने की क्षमता नहीं है, बल्कि यह भी है। फ़ंक्शन, जिसका अर्थ है कि यदि आप ऑब्जेक्ट के @observable फ़ील्ड से इस फ़ंक्शन में मान को पढ़ते हैं, तो सत्यापन को केवल तब ही पुनरारंभ नहीं किया जाएगा जब फ़ील्ड जिस फ़ील्ड को लटका दिया गया है वह बदल गया है, लेकिन यह भी कि "लिंक किए गए फ़ील्ड" को बदल दिया गया है। पहली टैग क्षेत्र को छोड़कर जो मूल्य @observable के रूप में पढ़ा है
- notContainSpaces (... - notEmptyOrSpaces के विपरीत, एक त्रुटि जारी की जाएगी यदि मूल्य में कम से कम अधिक स्थान हो।
- तुलना (अभिव्यक्ति: (मूल्य: तीक्ष्णता) => बूलियन (... - अपना स्वयं का सत्यापन कार्य लिखने से कॉपी-पेस्ट कोड उत्पन्न होता है, इस समस्या से छुटकारा पाने के लिए इस आवरण को विकसित किया गया था। यह सत्यापन समारोह पहले पैरामीटर के रूप में एक फ़ंक्शन को स्वीकार करता है, जो बदले में वर्तमान मान को पार करता है। फ़ील्ड, जो आपको एक जटिल चेक बनाने की अनुमति देती है, उदाहरण के लिए, टीआईएन या पासपोर्ट नंबर के लिए हैश की गणना करना, और फिर सही / गलत लौटना। चेक गलत होने पर त्रुटि दिखाई जाएगी।
- isEqual (मान: स्ट्रिंग ... - एक साधारण स्ट्रिंग मिलान जांच।
निम्नलिखित आवरण कार्यों का वर्णन करता है जो सत्यापन ट्रिगर के प्रवाह को नियंत्रित करते हैं।
यह ध्यान दिया जाना चाहिए कि फॉर्मकंट्रोल , फॉर्मग्रुप , फॉर्मअरे को पास किए गए सत्यापन का सेट एक ही सरणी में लॉन्च किया गया है और वास्तव में कोई निष्पादन अनुक्रम नहीं है। कार्य के परिणामस्वरूप, हमारे पास फ़ील्ड एरर , चेतावनियाँ , सूचना - संदेश , सफलताओं के एरर्स होंगे जिनमें एरर्स, चेतावनियाँ, एक ही एरे में संयुक्त हैं, आदि ...
अक्सर ग्राहक केवल एक गलती देखना चाहता है, और सभी एक बार में नहीं। इसके अलावा, टीओआर को डिजाइन किया जा सकता है ताकि पिछले एक के गुजरने के बाद ही एक चेक किया जाए।
इस समस्या को हल करने के लिए, आवरणकारक क्षमता का उपयोग किया जाता है। इसका कॉल और इसका एप्लिकेशन सामान्य फ़ंक्शन-सत्यापनकर्ता से अलग नहीं है, लेकिन इनपुट पर इसे वेरिएंट का एक सरणी प्राप्त होता है जिसे क्रमिक रूप से लॉन्च किया जाएगा, अर्थात्। अगला सत्यापन केवल पिछले एक त्रुटि के बिना पारित होने के बाद शुरू होता है।
दूसरा आवरण फ़ंक्शन मान्यताओं का प्रवाह नियंत्रण फ़ंक्शन है। पहला पैरामीटर के रूप में wrapperActivateValidation एक फ़ंक्शन लेता है जिसमें सत्यापन सक्रियण के लिए शर्तों को लिखा जाना चाहिए। सक्रिय फ़ंक्शन के विपरीत जो कि फॉर्मकंट्रोल को पास किया गया है, यह चेक अधिक जटिल तर्क के लिए डिज़ाइन किया गया है। मान लीजिए कि हमारे पास पूरे फॉर्मग्रुप भुगतान के लिए एक सामान्य बिल्डर है, और इसके अलावा, सर्वर पर केवल एक ही तरीका है जो फ़ील्ड के एक सामान्य सेट को स्वीकार करता है। लेकिन पकड़ यह है कि भले ही फ़ॉर्म एक है, "भुगतान के प्रकार" के आधार पर हम उपयोगकर्ता को फ़ील्ड का एक अलग सेट दिखाते हैं। तो आवरणकर्ताअनुरूपीकरण अमान्यता आपको तर्क लिखने की अनुमति देता है जिसमें विभिन्न प्रकार के भुगतान के प्रकार के आधार पर जांच की जाएगी।
रैपर का उपयोग साधारण कार्यों की तरह ही होगा।
```
 new FormControl( this.userInfo.megapole, [wrapperActivateValidation(() => this.info.A === 10, [ required(), pattern(/\^d{10}$/) ]), wrapperActivateValidation(() => this.info.A === 20, [ wrapperSequentialCheck([ notContainSpaces(), pattern(/\^d{20}$/) ]) ])], v => (this.userInfo.megapole = v) ) 
```
यह उदाहरण दिखाता है कि आवश्यक (), पैटर्न (/ \ ^ d {10} $ /) चेक केवल इस. info.A === 10 के साथ और यदि यह. info.A === 20 के साथ किया जाएगा। , तो notContainSpaces (), पैटर्न (/ \ ^ d {20} $ /) सत्यापन काम करेंगे, इसके अलावा, ये सत्यापन पहले मामले के विपरीत, क्रमिक रूप से काम करेंगे।

स्वाभाविक रूप से, वह क्षण आएगा जब मान्यताओं का मानक सेट अब पर्याप्त नहीं होगा।
फिर आपको अपने स्वयं के अतुल्यकालिक कार्यों को लिखना होगा। सौभाग्य से, यह बिना किसी विशेष कठिनाइयों के किया जाता है।
FormControl मूल रूप से अतुल्यकालिक सत्यापन कार्यों द्वारा तेज किया गया था, जो डेटा के लिए सर्वर पर जाना चाह सकता है, और इस उत्तर की प्रतीक्षा करने की आवश्यकता है। और परिणामस्वरूप, सभी सत्यापन अतुल्यकालिक हैं।
```
 async function checkValueOnServer(control: FormControl): Promise<ValidationEvent[]> { if (control.value == null) { return []; } const result = await sendToServer(control.value); if (result.errorMessage) { return [ { message: result.errorMessage, type: ValidationEventTypes.Error, }, ]; } return []; } 
```
यहां आपको दो वस्तुओं पर ध्यान देने की आवश्यकता है।
पहले हम हमेशा ऐरे से बात करते हैं। यानी वास्तव में, यदि आप चाहें तो आप एक ही बार में कई त्रुटि संदेश वापस कर सकते हैं।
दूसरा बिंदु लौटी हुई वस्तु है, इसमें खेतों का निम्नलिखित सेट है।
- कुंजी ?: स्ट्रिंग - एक वैकल्पिक क्षेत्र, आपको एक विशिष्ट सत्यापन के लिए "कुंजी" निर्दिष्ट करने की अनुमति देता है। सभी आधार कुंजी के लिए, कुंजी अद्वितीय है और उनके नाम से मेल खाती है। आप प्रतिक्रिया में सूची को प्रस्तुत करने के लिए कुंजी का उपयोग करना चाह सकते हैं, लेकिन जैसा कि अभ्यास ने दिखाया है, यह एक बुरा विचार है। भविष्य में, उदाहरण में, मैं दिखाऊंगा कि संदेश का उपयोग करना बेहतर है, और कुंजी को बिल्कुल भी स्पर्श न करें। किसी भी मामले में, यह अंगुनर के रूप में है, लेकिन इसकी आवश्यकता कम हो गई है, वास्तव में, 0 तक।
- संदेश : स्ट्रिंग - एक सत्यापन संदेश। अनिवार्य क्षेत्र।
- टाइप करें : ValidationEventTypes - संदेश प्रकार।
  1. त्रुटि - त्रुटियाँ
  2. चेतावनी - चेतावनी
  3. जानकारी - सूचनात्मक संदेश
  4. सफलता - वैधता के बारे में संदेश। उदाहरण के लिए, आप यह सत्यापित कर सकते हैं कि पासवर्ड वास्तव में जटिल है।
- अतिरिक्तता ?: कोई भी - अतिरिक्त जानकारी जो आवश्यक होने पर सत्यापन के साथ प्रेषित की जा सकती है। यह कुछ अतिरिक्त HTML मार्कअप या एक विशिष्ट शैली हो सकती है। सामान्य तौर पर, आप सब कुछ किसी में भी डाल सकते हैं।
एक्सटेंशन

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

इनपुट के लिए, FormControl (नाम) के लिए तत्व का बंधन इस तरह दिखाई देगा।
<input type = "text" {... InputFormControl.bindActions (controls.name)} />
बनावट के लिए, बंधन इस तरह से होगा
<textarea {... TextAreaFormControl.bindActions (controls.name)} />

InputFormControl.bindActions और TextAreaFormControl.bindActions दो मापदंडों को स्वीकार करते हैं:
- formControl : FormControl - वास्तव में FormControl जो बाध्यकारी के लिए उपयोग किया जाएगा। आवश्यक है।
- घटनाओं ? - यदि आप उन्हें अनुकूलित करने की आवश्यकता है, तो एक वैकल्पिक पैरामीटर फ़ंक्शन की एक सूची है, जिसे कॉल किया जा सकता है। , bindActions - Element, , element FormControl -, . . event. .
  - ref
  - onChange
  - onBlur
  - onFocus
, FormControl - .
```
 this.form = new FormGroup<IUserInfo>({ name: new FormControl( this.userInfo.name, [], v => (this.userInfo.name = v) ) }); 
```
this.userInfo.name , FormControl . FormControl.for
```
 this.form = new FormGroup<IUserInfo>({ name: FormControl.for(this.userInfo, 'name', []) }); 
```
, name name . , TypeScript, name , . userInfo — .

— . :)

उदाहरण

React TypeScript mobx.
.
npm install @quantumart/mobx-form-validation-kit
,
:

,
npm init –y
npm install --save-dev webpack webpack-cli
npm install --save react react-dom
npm install --save-dev @types/react @types/react-dom
npm install --save-dev typescript ts-loader source-map-loader

tsconfig.json
```
 { "compilerOptions": { "outDir": "./dist/", "sourceMap": true, "noImplicitAny": true, "module": "commonjs", "target": "es6", "jsx": "react", "experimentalDecorators": true, "emitDecoratorMetadata": true } } 
```
- src\components\Hello.tsx
- src\index.tsx
- index.html
- src\assets\global.scss
src\components\ Hello.tsx
```
 import * as React from "react"; export class Hello extends React.Component { render() { return ( <h1> Hello from TypeScript and React! </h1> ); } } 
```
src\ index.tsx
```
 import * as React from "react"; import * as ReactDOM from "react-dom"; import { Hello } from "./components/Hello"; ReactDOM.render( <Hello />, document.getElementById("example") ); 
```
index.html
```
 <!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>Hello React!</title> </head> <body> <div id="example"></div>  <script src="./node_modules/react/umd/react.development.js"></script> <script src="./node_modules/react-dom/umd/react-dom.development.js"></script>  <script src="./dist/main.js"></script> </body> </html> src\assets\global.scss .row { display: inline; } 
```
webpack-dev-server
npm install --save-dev webpack-dev-server
npm install --save-dev awesome-typescript-loader
npm install --save-dev html-webpack-plugin

webpack.config.js
```
 const path = require('path'); const HtmlWebpackPlugin = require('html-webpack-plugin'); module.exports = { entry: './src/index.tsx', resolve: { extensions: ['.ts', '.tsx', '.js'] }, output: { path: path.join(__dirname, '/dist'), filename: 'bundle.min.js' }, module: { rules: [ { test: /\.tsx?$/, loader: 'awesome-typescript-loader' }, { test: /\.(scss|css)?$/, use: [ { loader: 'style-loader' }, { loader: 'css-loader', options: { importLoaders: 1, }, }, { loader: 'sass-loader', options: { sourceMap: true } }, ], }, ] }, plugins: [ new HtmlWebpackPlugin({ template: './index.html' }) ] } 
```
, mobx React.
```
 "mobx": "4", "mobx-react": "^6.1.1", 
```
C IE10 mobx, 4 , package.json.
```
  "style-loader": "^0.23.1", "css-loader": "^3.1.0", "node-sass": "^4.12.0", "sass-loader": "^7.1.0" 
```
npm install

, .
npm install @quantumart/mobx-form-validation-kit

package.json
```
 { "name": "ttt", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "start": "webpack-dev-server --mode development --open", "test": "echo \"Error: no test specified\" && exit 1" }, "keywords": [], "author": "", "license": "MIT", "devDependencies": { "@types/react": "^16.9.5", "@types/react-dom": "^16.9.1", "awesome-typescript-loader": "^5.2.1", "html-webpack-plugin": "^3.2.0", "source-map-loader": "^0.2.4", "ts-loader": "^6.2.0", "typescript": "^3.6.3", "webpack": "^4.41.0", "webpack-cli": "^3.3.9" }, "dependencies": { "@quantumart/mobx-form-validation-kit": "^1.0.8", "mobx": "4", "mobx-react": "^6.1.1", "react": "^16.10.2", "react-dom": "^16.10.2", "webpack-dev-server": "^3.8.2", "style-loader": "^0.23.1", "css-loader": "^3.1.0", "node-sass": "^4.12.0", "sass-loader": "^7.1.0" } } 
```
npm run start

Hello from TypeScript and React!
Hello . RegistrationStore RegistrationStore.ts
src\RegistrationStore.ts
```
 import { observable } from "mobx"; export class RegistrationStore { @observable public userInfo = { name: "" }; } export const registrationStore = new RegistrationStore(); 
```
Hello.ts, .
```
 import * as React from "react"; import { observer } from "mobx-react"; import { registrationStore } from "../RegistrationStore"; @observer export class Hello extends React.Component { private changeName = (event: React.ChangeEvent<HTMLInputElement>) => { registrationStore.userInfo.name = event.target.value; }; render() { return ( <React.Fragment> <h1>, {registrationStore.userInfo.name}</h1> <div className="row"> <span>:</span> <input type="text" value={registrationStore.userInfo.name} onChange={this.changeName} /> </div> </React.Fragment> ); } } 
```
, Store Mobx. input.
, . , . «» . , .

@quantumart/mobx-form-validation-kit

- .
stc/ErrorWraper.tsx
```
 import * as React from "react"; import { observer } from "mobx-react"; import { FormControl } from "@quantumart/mobx-form-validation-kit"; interface Props { formControl: FormControl; } @observer export class ErrorWraper extends React.Component<Props> { render() { return ( <div> {this.props.children} {this.props.formControl.errors.map(error => ( <span key={error.message} className="error"> {error.message} </span> ))} </div> ); } } 
```
, -, .

Hello.tsx .
- — changeName. {...InputFormControl.bindActions(controls.name)} . .
- – input, input , , , .
- – form store , , , componentWillUnmount registrationStore.form.dispose() . mobx FromControl .
```
 import * as React from "react"; import { observer } from "mobx-react"; import { registrationStore } from "../RegistrationStore"; import { ErrorWraper } from "../ErrorWraper"; import { InputFormControl } from "@quantumart/mobx-form-validation-kit"; @observer export class Hello extends React.Component { constructor(props: any) { super(props); registrationStore.initForm(); } componentWillUnmount() { registrationStore.form.dispose(); } render() { const controls = registrationStore.form.controls; return ( <React.Fragment> <h1>, {registrationStore.userInfo.name}</h1> <div className="row"> <span>:</span> <ErrorWraper formControl={controls.name}> <input type="text" {...InputFormControl.bindActions(controls.name)} /> </ErrorWraper> </div> </React.Fragment> ); } } 
```
RegistrationStore.ts.
.
( ) userInfo, form. - userInfo.
```
 import { observable } from "mobx"; import { FormControl, FormGroup, AbstractControls } from "@quantumart/mobx-form-validation-kit"; interface IUserInfo extends AbstractControls { name: FormControl; } export class RegistrationStore { @observable public userInfo = { name: "" }; @observable public form: FormGroup<IUserInfo>; public initForm(): void { this.form = new FormGroup<IUserInfo>({ name: new FormControl( this.userInfo.name, [], v => (this.userInfo.name = v) ) }); } } export const registrationStore = new RegistrationStore(); 
```

Mobx @ quantumart / mobx-form-validation-kit पर प्रतिक्रिया के लिए नया सत्यापन पैकेज

FormControl

सत्यापन

एक्सटेंशन

उदाहरण

More articles: