Angular8 में एक चेकबॉक्स कैसे बनाएं?

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

• Angular8 में चेकबॉक्स बनाएं
• चेकबॉक्स को मान्य करना
• ASync फ़ॉर्म नियंत्रण जोड़ना

Angular8 में चेकबॉक्स बनाएं

Angular8 में एक चेकबॉक्स बनाने के चरणों की व्याख्या करने के लिए, आइए एक उदाहरण लेते हैं, जहां हमारे पास चुनने के लिए आदेशों की एक सूची है और हमें चेकबॉक्स के रूप में उपयोगकर्ता के पास यह होना चाहिए। इसके लिए नीचे दिए गए कोड का पालन करें।

c ++ प्रोग्राम आरोही क्रम में एक सरणी को सॉर्ट करने के लिए

const orderData = [{id: 1, name: 'order 1'}, {id: 2, name: 'ऑर्डर 2'}, {आईडी: 3, नाम: 'ऑर्डर 3'}, {आईडी: 4, नाम: 'आदेश 4'}]

इस मामले में, डेटा हमारे पास पहले से मौजूद है और इसलिए हमने ऊपर साझा किए गए कोड का उपयोग किया है। एक वास्तविक दुनिया के परिदृश्य में, यह डेटा सबसे अधिक संभावना एक एपीआई के माध्यम से आयात किया जाएगा।

इस उदाहरण में, हम अंतिम परिणाम को क्लीनर और कुशल बनाने के लिए प्रतिक्रियाशील रूपों का उपयोग भी कर सकते हैं। ऐसा करने के तरीके को समझने के लिए, नीचे दिए गए उदाहरण पर एक नज़र डालें।

'{कोणीय / कोर' आयात {{सेकुलर / फॉर्म्स), '@ कोणीय / रूपों' @Component ({चयनकर्ता: 'my-app', templateUrl: './app.combentent.html', styleUrls से आयात करें। ['./app.component.css']}) निर्यात वर्ग AppComponent {फॉर्म: फॉर्मग्रुप ऑर्डरडेटा = [] कंस्ट्रक्टर (निजी फॉर्मब्यूबर्ल: फॉर्मब्यूटरी) {this.form = this.formBilder.group ({ऑर्डर: []})} प्रस्तुत() { ... } }

उपरोक्त कोड में, हमने निम्नलिखित का उपयोग किया है।

1. फॉर्मग्रुप्स: जो एकल रूप का प्रतिनिधित्व करता है।
2. फॉर्मकंट्रोल: जो एकल रूप में एकल प्रविष्टि का प्रतिनिधित्व करता है।
3. फॉर्मअरे: जिसका उपयोग सभी फॉर्मकंट्रोल के संग्रह को दर्शाने के लिए किया जाता है।

उपर्युक्त उदाहरण में हम फॉर्मब्यूलर सेवा का उपयोग उस फॉर्म को बनाने के लिए भी कर सकते हैं जो कुछ इस तरह दिखाई देगा।

प्रस्तुत

उपर्युक्त उदाहरण में, हमने [formGroup] = 'फ़ॉर्म' का उपयोग करके फ़ॉर्म तत्व के साथ फ़ॉर्म को बाइंड किया है।

अब जब मूल रूप तैयार हो गया है, तो नीचे दिए गए फॉर्मएयर्रे के उपयोग के माध्यम से उसी में कुछ गतिशीलता जोड़ते हैं।

'{कोणीय / कोर' आयात से {{घटक}, फॉर्मग्रुप, फॉर्मअरे, फॉर्मकंट्रोल, वैलिडेटरफेन} को '@ कोणीय / रूपों' से @Component ({चयनकर्ता) 'my-app', importUrl: आयात करें। .html ', styleUrls: [' ./app.component.css ']}) निर्यात वर्ग AppComponent {फॉर्म: फॉर्मग्रुप ऑर्डरडाटा = [{आईडी: 100, नाम:' ऑर्डर 1 '}, {आईडी, 200, नाम:' ऑर्डर 2 '}, {आईडी: 300, नाम:' ऑर्डर 3 '}, {आईडी: 400, नाम:' ऑर्डर 4 '}] कंस्ट्रक्टर (निजी फ़ॉर्मबाली: फॉर्मब्यूरी) {this.form = this.formBuilder .group ({ आदेश: new FormArray ([])}) this.addCheckboxes ()} निजी addCheckboxes () {this.ordersData.forEach ((o, i) => {const नियंत्रण = नया Formontontrol (i === 0) // यदि पहला आइटम सत्य पर सेट है, दूसरा असत्य (यह Form.rray के रूप में .form.controls.orders) .push (नियंत्रण)}}} सबमिट करें () {const चयनितऑडरआईड्स = this.form.value.orders .map (v, i) = > v। इस? सीमाओं [i] .id: null) .filter (v => v! == null) कंसोल.लॉग (selectOrderIds)}}

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

इसके बाद हमें उपयोगकर्ता को प्रदर्शित किए जाने वाले विशिष्ट आदेश की जानकारी प्राप्त करने के लिए इस टेम्पलेट में FormArray तत्व को बांधने की आवश्यकता है।

{{ऑर्डरडेटा [i] .name}} सबमिट करें

आउटपुट:

Angular8 में चेकबॉक्स को मान्य करना

चेकबॉक्स को कैसे मान्य करें, यह जानने के लिए नीचे दिए गए उदाहरण पर एक नज़र डालें।

{{orderData [i] .name}} कम से कम एक आदेश का चयन किया जाना चाहिए ... निर्यात वर्ग AppComponent {फॉर्म: फॉर्मग्रुप ऑर्डरडाटा = [...] कंस्ट्रक्टर (निजी फॉर्मबस्टर: फॉर्मब्यूरी) {this.form = this.formBuilder .group ({आदेश: new FormArray ([]], minSelectedCheckboxes (1))}) this.addCheckboxes ()} ...} फ़ंक्शन minSelectedCheckboxes (मिनिमम 1) {const सत्यापनकर्ता: ValidatorFn = (formArray) = {} const TotalSelected = formArray.controls // चेकबॉक्स मानों (बूलियन) की एक सूची प्राप्त करें .map (control => control.value) // कुल चेक किए गए चेकबॉक्स की संख्या। अगला: prev, 0) // यदि कुल न्यूनतम से अधिक नहीं है, तो त्रुटि संदेश वापस लौटाएं कुल>> मिनट? अशक्त: {आवश्यक: सत्य}} वापसी सत्यापनकर्ता}

आउटपुट:

ASync फ़ॉर्म नियंत्रण जोड़ना

अब जब आप जानते हैं कि डायनामिक चेकबॉक्स कैसे जोड़े जाते हैं, तो आइए देखें कि हम इन रूपों में ASync कैसे जोड़ सकते हैं।

'{कोणीय / कोर' आयात से {{घटक}, फॉर्मग्रुप, फॉर्मअरे, फॉर्मकंट्रोल, वैलिडेटरफेन} से '@ कोणीय / फॉर्म' से आयात {} से 'आरएक्सएक्स' (@ चयनकर्ता: '') templateUrl: './app.component.html', styleUrls: ['./app.component.css']}) एक्सपोर्ट क्लास AppComponent {फॉर्म: फॉर्मग्रुप ऑर्डरडाटा = [] कंस्ट्रक्टर (प्राइवेटबारब्रस्टल: फॉर्मब्यूरो) {this.form = this.formBuilder.group ({आदेश: new FormArray ([], minSelectedCheckboxes (1))}} // सिंक्रोनस ऑर्डर this.ransData = this.getOrders () यह (.addCheckboxes) ()} निजी addCheckboxes () {this.ordersData। forEach ((o, i) => {const control = new FormControl (i === 0) // अगर पहला आइटम सही पर सेट होता है, तो दूसरा झूठा (Form.rray के रूप में यह .form.controls.orders) .push (नियंत्रण)}। )} getOrders () {रिटर्न [{आईडी: 100, नाम: 'ऑर्डर 1'}, {आईडी: 200, नाम: 'ऑर्डर 2'}, {आईडी: 300, नाम: 'ऑर्डर 3'}, {आईडी: 400, नाम: 'ऑर्डर 4'}]} सबमिट करें () {const selectOrderIds = this.form.ue.ue.orders .map (v, i) => v? This.ordersData [i] .id: null) .filter (v => v! == null) कंसोल.log (selectOrderIds)}} ... 'rxjs' से {}} का आयात ... कंस्ट्रक्टर (निजी फ़ॉर्मबस्टर: FormBuilder) {this.form = this। formBuilder.group ({आदेश: new FormArray ([], minSelectedCheckboxes (1))}} // async आदेश (यह एक http सेवा कॉल हो सकता है) (this.getOrders ()) की सदस्यता लें। = order.addCheckboxes ()}) // सिंक्रोनस ऑर्डर // this.ransData = this.getOrders () // this.addCheckboxes ()}

इसके साथ, हम अपने लेख के अंत में आ गए हैं। अब जब आप जानते हैं कि अपने कोणीय 8 में एक चेकबॉक्स कैसे जोड़ा जाता है, तो हम आशा करते हैं कि आप अपने दिन के कोडिंग में इसका उपयोग करेंगे।

नक्शा पक्ष हाइव में शामिल हो

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