Angular8 లో చెక్‌బాక్స్‌ను ఎలా సృష్టించాలి?

మీరు ఇప్పటివరకు ఏ రకమైన అనువర్తనాలను సృష్టిస్తుంటే, చెక్‌బాక్స్ కలిగి ఉన్న భారీ ప్రాముఖ్యత గురించి మీకు ఇప్పటికే తెలుసు. ఇది ఏదైనా ప్లాట్‌ఫామ్‌కు డేటా ఇన్‌పుట్‌ను సులభతరం చేయడమే కాకుండా, డేటా ఫీచర్‌తో ప్యాక్ చేయబడినప్పుడు డేటాను త్వరగా క్రమబద్ధీకరించడానికి కూడా ఇది దోహదపడుతుంది. ఈ వ్యాసంలో, కింది క్రమంలో కోణీయ 8 లో చెక్‌బాక్స్‌ను ఎలా సృష్టించాలో చూద్దాం:

• Angular8 లో చెక్‌బాక్స్ సృష్టించండి
• చెక్‌బాక్స్‌ను ధృవీకరిస్తోంది
• ASync ఫారం నియంత్రణలను కలుపుతోంది

Angular8 లో చెక్‌బాక్స్ సృష్టించండి

Angular8 లో చెక్‌బాక్స్‌ను సృష్టించే దశలను వివరించడానికి, మనకు ఎంచుకోవలసిన ఆర్డర్‌ల జాబితాను కలిగి ఉన్న ఒక ఉదాహరణను తీసుకుందాం మరియు దీన్ని చెక్‌బాక్స్ రూపంలో వినియోగదారుకు తప్పక ఇవ్వాలి. దీనికి, క్రింది కోడ్‌ను అనుసరించండి.

ఉదాహరణలతో pl sql ట్యుటోరియల్

const ordersData = [{id: 1, name: 'order 1'}, {id: 2, name: 'order 2'}, {id: 3, name: 'order 3'}, {id: 4, name: 'ఆర్డర్ 4'}]

ఈ సందర్భంలో, డేటా ఇప్పటికే మా వద్ద ఉంది మరియు అందువల్ల మేము పైన పంచుకున్న కోడ్‌ను ఉపయోగించుకున్నాము. వాస్తవ ప్రపంచ దృష్టాంతంలో, ఈ డేటా చాలావరకు API ద్వారా దిగుమతి అవుతుంది.

ఈ ఉదాహరణలో, తుది ఫలితాన్ని శుభ్రంగా మరియు సమర్థవంతంగా చేయడానికి రియాక్టివ్ రూపాలను కూడా ఉపయోగించుకోవచ్చు. దీన్ని ఎలా చేయాలో అర్థం చేసుకోవడానికి, ఈ క్రింది ఉదాహరణను చూడండి.

'@ కోణీయ / కోర్' దిగుమతి {భాగం @ దిగుమతి {ఫారమ్‌బిల్డర్, '@ కోణీయ / రూపాల' నుండి ఫార్మ్‌గ్రూప్} కాంపోనెంట్ ({సెలెక్టర్: 'నా-అనువర్తనం', టెంప్లేట్ యుర్ల్: './app.component.html', స్టైల్‌యూర్ల్స్: ['./app.component.css']}) ఎగుమతి తరగతి AppComponent {form: FormGroup ordersData = [] కన్స్ట్రక్టర్ (ప్రైవేట్ ఫారమ్‌బిల్డర్: FormBuilder) {this.form = this.formBuilder.group ({orders: []})} సమర్పించండి () {...}}

పై కోడ్‌లో, మేము ఈ క్రింది వాటిని ఉపయోగించుకున్నాము.

1. ఫారమ్‌గ్రూప్‌లు: ఇది ఒకే రూపాన్ని సూచిస్తుంది.
2. ఫారం కంట్రోల్: ఇది ఒకే రూపంలోకి ఒకే ఎంట్రీని సూచిస్తుంది.
3. ఫారంఅర్రే: ఇది అన్ని ఫార్మ్‌కంట్రోల్‌ల సేకరణను సూచించడానికి ఉపయోగించబడుతుంది.

పై ఉదాహరణలో, ఫారమ్‌ను రూపొందించడానికి మేము ఫార్మ్‌బిల్డర్ సేవను కూడా ఉపయోగించుకోవచ్చు, ఇది ఇలా కనిపిస్తుంది.

సమర్పించండి

పై ఉదాహరణలో, మేము [formGroup] = ”form” ని ఉపయోగించి ఫారమ్ ఎలిమెంట్‌తో ఫారమ్‌ను బంధించాము.

ఇప్పుడు ప్రాథమిక రూపం సృష్టించబడింది, క్రింద చూపిన విధంగా ఫారంఅర్రే ఉపయోగించడం ద్వారా కొంత డైనమిటీని చేర్చుదాం.

'@ కోణీయ / కోర్' దిగుమతి {కాంపోనెంట్ from నుండి దిగుమతి {ఫారమ్‌బిల్డర్, ఫారమ్‌గ్రూప్, ఫారమ్‌అర్రే, ఫార్మ్‌కంట్రోల్, వాలిడేటర్ ఎఫ్ఎన్ from '@ కోణీయ / రూపాల' నుండి @ కాంపోనెంట్ ({సెలెక్టర్: 'నా-అనువర్తనం', టెంప్లేట్ యుర్ల్: '. .html ', styleUrls: [' ./app.component.css ']}) ఎగుమతి తరగతి AppComponent {form: FormGroup ordersData = [{id: 100, name:' order 1 '}, {id: 200, name:' ఆర్డర్ 2 '}, {id: 300, పేరు:' ఆర్డర్ 3 '}, {id: 400, పేరు:' ఆర్డర్ 4 '}] కన్స్ట్రక్టర్ (ప్రైవేట్ ఫారమ్‌బిల్డర్: ఫారమ్‌బిల్డర్) {this.form = this.formBuilder.group ({ ఆదేశాలు: క్రొత్త FormArray ([]) this) this.addCheckboxes ()} ప్రైవేట్ addCheckboxes () {this.ordersData.forEach ((o, i) => {const control = new FormControl (i === 0) // if మొదటి అంశం ఒప్పుకు సెట్ చేయబడింది, లేకపోతే తప్పు (this.form.controls.orders ను FormArray గా) .పష్ (నియంత్రణ)})} సమర్పించండి () {const selectOrderIds = this.form.value.orders .map ((v, i) = > v? this.orders [i] .id: null) .ఫిల్టర్ (v => v! == null) console.log (selectOrderIds)}}

పై ఉదాహరణలో, ప్రతి లూప్ మళ్ళా తరువాత మేము క్రొత్త ఫారమ్‌కంట్రోల్‌ని సృష్టించాము మరియు ఫార్మ్‌అర్రే నుండి మా ఆర్డర్‌లను తీసుకున్నాము. మేము మొదటి నియంత్రణను నిజమని సెట్ చేసాము మరియు మొదటి ఆర్డర్ అప్రమేయంగా జాబితా నుండి తనిఖీ చేయబడింది.

దీని తరువాత వినియోగదారుకు ప్రదర్శించాల్సిన నిర్దిష్ట ఆర్డర్ సమాచారాన్ని పొందడానికి మేము ఈ టెంప్లేట్‌కు FormArray మూలకాన్ని బంధించాలి.

{{ordersData [i]. పేరు}} సమర్పించండి

అవుట్పుట్:

Angular8 లోని చెక్‌బాక్స్‌ను ధృవీకరిస్తోంది

చెక్‌బాక్స్‌ను ఎలా ధృవీకరించాలో తెలుసుకోవడానికి ఈ క్రింది ఉదాహరణను చూడండి.

{{ordersData [i] .name} submit కనీసం ఒక ఆర్డర్‌ను ఎంచుకోవాలి తప్పక సమర్పించండి ... ఎగుమతి తరగతి AppComponent {form: FormGroup ordersData = [...] కన్స్ట్రక్టర్ (ప్రైవేట్ ఫారమ్‌బిల్డర్: FormBuilder) {this.form = this.formBuilder .గ్రూప్ ({ఆదేశాలు: క్రొత్త ఫారంఅర్రే ([], minSelectedCheckboxes (1)) this) this.addCheckboxes ()} ...} ఫంక్షన్ minSelectedCheckboxes (min = 1) {const validator: ValidatorFn = (formArray: FormArray) => { const totalSelected = formArray.controls // చెక్‌బాక్స్ విలువల (బూలియన్) జాబితాను పొందండి .మ్యాప్ (కంట్రోల్ => కంట్రోల్.వాల్యూ) // తనిఖీ చేసిన చెక్‌బాక్స్‌ల సంఖ్యను మొత్తం పెంచండి .రేడ్యూస్ ((మునుపటి, తదుపరి) => తదుపరి? గత + తదుపరి: గత, 0) // మొత్తం కనిష్టానికి మించకపోతే, దోష సందేశాన్ని తిరిగి ఇవ్వండి మొత్తం ఎంచుకున్న> = నిమి? శూన్య: {అవసరం: నిజమైన}} రిటర్న్ వాలిడేటర్}

అవుట్పుట్:

ASync ఫారం నియంత్రణలను కలుపుతోంది

డైనమిక్ చెక్‌బాక్స్‌లను ఎలా జోడించాలో ఇప్పుడు మీకు తెలుసు, ఈ ఫారమ్‌లకు ASync ను ఎలా జోడించవచ్చో చూద్దాం.

'@ కోణీయ / కోర్' దిగుమతి {కాంపోనెంట్ import ను దిగుమతి చేయండి {ఫార్మ్‌బిల్డర్, ఫారమ్‌గ్రూప్, ఫారమ్‌అర్రే, ఫారమ్‌కంట్రోల్, వాలిడేటర్ ఎఫ్ఎన్ '' @ కోణీయ / రూపాల 'దిగుమతి from నుండి' rxjs '@ కాంపోనెంట్ ({సెలెక్టర్:' నా-అనువర్తనం ', templateUrl: './app.component.html', styleUrls: ['./app.component.css']}) ఎగుమతి తరగతి AppComponent {form: FormGroup ordersData = [] కన్స్ట్రక్టర్ (ప్రైవేట్ ఫారమ్‌బిల్డర్: FormBuilder) {this.form = this.formBuilder.group ({ఆదేశాలు: క్రొత్త FormArray ([], minSelectedCheckboxes (1)) //) // సమకాలిక ఆదేశాలు this.ordersData = this.getOrders () this.addCheckboxes ()} private addCheckboxes () {this.ordersData. forEach ((o, i) => {const control = new FormControl (i === 0) // మొదటి అంశం ఒప్పుకు సెట్ చేస్తే, లేకపోతే తప్పు (this.form.controls.orders ను FormArray గా) .పష్ (నియంత్రణ) )} getOrders () {తిరిగి [{id: 100, పేరు: 'ఆర్డర్ 1'}, {id: 200, పేరు: 'ఆర్డర్ 2'}, {id: 300, పేరు: 'ఆర్డర్ 3'}, {id: 400, పేరు: 'ఆర్డర్ 4'}]} సమర్పించు () {const selectOrderIds = this.form.value.orders .map ((v, i) => v? This.ordersData [i] .id: శూన్య) .ఫిల్టర్ (v => v! == శూన్య) console.log (selectOrderIds)}} ... 'rxjs' నుండి import యొక్క import యొక్క దిగుమతి ... కన్స్ట్రక్టర్ (ప్రైవేట్ ఫారమ్‌బిల్డర్: ఫారమ్‌బిల్డర్) {this.form = this. formBuilder.group ({ఆదేశాలు: క్రొత్త FormArray ([], minSelectedCheckboxes (1))}) // (this.getOrders ()) యొక్క // అసిన్క్ ఆర్డర్లు (http సేవా కాల్ కావచ్చు). సభ్యత్వాన్ని పొందండి (ఆర్డర్లు => {this.ordersData = ఆర్డర్లు this.addCheckboxes ()}) // సింక్రోనస్ ఆర్డర్లు // this.ordersData = this.getOrders () // this.addCheckboxes ()}

దీనితో, మేము మా వ్యాసం చివరికి వచ్చాము. మీ కోణీయ 8 కు చెక్‌బాక్స్‌ను ఎలా జోడించాలో ఇప్పుడు మీకు తెలుసు, మీ రోజువారీ కోడింగ్‌లో మీరు దీన్ని ఉపయోగించుకుంటారని మేము ఆశిస్తున్నాము.

ఫైబొనాక్సీ సంఖ్యలు సి ++

ఇప్పుడు మీకు కోణీయ బిల్డింగ్ బ్లాక్స్ తెలుసు, చూడండి ఎడురేకా చేత. కోణీయ అనేది జావాస్క్రిప్ట్ ఫ్రేమ్‌వర్క్, ఇది స్కేలబుల్, ఎంటర్‌ప్రైజ్ మరియు పనితీరు క్లయింట్-సైడ్ వెబ్ అనువర్తనాలను సృష్టించడానికి ఉపయోగించబడుతుంది. కోణీయ ఫ్రేమ్‌వర్క్ స్వీకరణ అధికంగా ఉండటంతో, అనువర్తనం యొక్క పనితీరు నిర్వహణ సమాజంతో నడిచేది పరోక్షంగా మెరుగైన ఉద్యోగ అవకాశాలను అందిస్తుంది. ఎంటర్ప్రైజ్ అప్లికేషన్ డెవలప్మెంట్ చుట్టూ ఈ కొత్త భావనలన్నింటినీ కవర్ చేయడం కోణీయ ధృవీకరణ శిక్షణ.