Angular8 இல் ஒரு தேர்வுப்பெட்டியை உருவாக்குவது எப்படி?

நீங்கள் இப்போது வரை எந்த வகையான பயன்பாடுகளையும் உருவாக்கிக்கொண்டிருந்தால், ஒரு தேர்வுப்பெட்டி வைத்திருக்கும் மிகப்பெரிய முக்கியத்துவத்தை நீங்கள் ஏற்கனவே அறிவீர்கள். எந்தவொரு தளத்திற்கும் தரவின் உள்ளீட்டை எளிதாக்குவது மட்டுமல்லாமல், பட்டியல் அம்சத்துடன் தொகுக்கப்பட்ட தரவுகளை விரைவாக வரிசைப்படுத்துவதற்கும் இது உதவுகிறது. இந்த கட்டுரையில், பின்வரும் வரிசையில் கோண 8 இல் ஒரு தேர்வுப்பெட்டியை எவ்வாறு உருவாக்குவது என்று பார்ப்போம்:

• Angular8 இல் தேர்வுப்பெட்டியை உருவாக்கவும்
• தேர்வுப்பெட்டியை சரிபார்க்கிறது
• ASync படிவக் கட்டுப்பாடுகளைச் சேர்த்தல்

Angular8 இல் தேர்வுப்பெட்டியை உருவாக்கவும்

Angular8 இல் ஒரு தேர்வுப்பெட்டியை உருவாக்குவதற்கான படிகளை விளக்குவதற்கு, எங்களிடம் தேர்வு செய்ய வேண்டிய ஆர்டர்களின் பட்டியல் உள்ள ஒரு எடுத்துக்காட்டை எடுத்துக்கொள்வோம், இது பயனருக்கு ஒரு தேர்வுப்பெட்டி வடிவத்தில் இருக்க வேண்டும். இதற்கு, கீழே உள்ள குறியீட்டைப் பின்பற்றவும்.

const ordersData = [{id: 1, name: 'order 1'}, {id: 2, name: 'order 2'}, {id: 3, name: 'order 3'}, {id: 4, name: 'ஆர்டர் 4'}]

இந்த வழக்கில், தரவு ஏற்கனவே எங்களிடம் உள்ளது, எனவே மேலே பகிரப்பட்ட குறியீட்டை நாங்கள் பயன்படுத்தினோம். ஒரு உண்மையான உலக சூழ்நிலையில், இந்த தரவு பெரும்பாலும் ஒரு API வழியாக இறக்குமதி செய்யப்படும்.

இந்த எடுத்துக்காட்டில், இறுதி முடிவை தூய்மையாகவும் திறமையாகவும் மாற்ற எதிர்வினை வடிவங்களைப் பயன்படுத்தலாம். இதை எப்படி செய்வது என்பதைப் புரிந்து கொள்ள, கீழேயுள்ள உதாரணத்தைப் பாருங்கள்.

'@ கோண / கோர்' இறக்குமதியிலிருந்து {கூறு import இறக்குமதி {ஃபார்ம் பில்டர், ஃபார்ம் குரூப் from '@ கோண / படிவங்களிலிருந்து' @ கூறு ({தேர்வாளர்: 'என்-பயன்பாடு', வார்ப்புரு: './app.component.html', styleUrls: ['./app.component.css']}) ஏற்றுமதி வகுப்பு AppComponent {form: FormGroup ordersData = [] கட்டமைப்பாளர் (தனியார் formBuilder: FormBuilder) {this.form = this.formBuilder.group ({orders: []})} சமர்ப்பிக்கவும் () {...}}

மேலே உள்ள குறியீட்டில், பின்வருவனவற்றைப் பயன்படுத்தினோம்.

1. படிவங்கள்: இது ஒரு வடிவத்தைக் குறிக்கிறது.
2. படிவம் கட்டுப்பாடு: இது ஒரு ஒற்றை வடிவத்தை ஒற்றை வடிவத்தில் குறிக்கிறது.
3. படிவம்அரே: இது அனைத்து ஃபார்ம் கன்ட்ரோல்களின் தொகுப்பைக் குறிக்கப் பயன்படுகிறது.

மேலேயுள்ள எடுத்துக்காட்டில், படிவத்தை உருவாக்க ஃபார்ம் பில்டர் சேவையைப் பயன்படுத்தலாம், இது இதுபோன்றதாக இருக்கும்.

சமர்ப்பிக்கவும்

மேலே உள்ள எடுத்துக்காட்டில், [formGroup] = ”form” ஐப் பயன்படுத்தி படிவத்தை படிவ உறுப்புடன் பிணைத்துள்ளோம்.

ஜாவாவில் mvc பயன்பாட்டு எடுத்துக்காட்டு

இப்போது அடிப்படை வடிவம் உருவாக்கப்பட்டுள்ளது, கீழே காட்டப்பட்டுள்ளபடி FormArray ஐப் பயன்படுத்துவதன் மூலம் அதனுடன் சில ஆற்றலைச் சேர்ப்போம்.

'@ கோண / கோர்' இறக்குமதியிலிருந்து {உபகரணத்தை import இறக்குமதி செய்க {ஃபார்ம் பில்டர், ஃபார்ம் குரூப், ஃபார்ம்அரே, ஃபார்ம் கன்ட்ரோல், வேலிடேட்டர்எஃப் 'from' @ கோண / படிவங்களிலிருந்து '@ கூறு ({தேர்வாளர்:' என்-பயன்பாடு ', டெம்ப்ளேட்உர்ல்:' .html ', styleUrls: [' ./app.component.css ']}) ஏற்றுமதி வகுப்பு AppComponent {form: FormGroup ordersData = [{id: 100, name:' order 1 '}, {id: 200, name:' ஆர்டர் 2 '}, {ஐடி: 300, பெயர்:' ஆர்டர் 3 '}, {ஐடி: 400, பெயர்:' ஆர்டர் 4 '}] கட்டமைப்பாளர் (தனியார் ஃபார்ம் பில்டர்: ஃபார்ம் பில்டர்) {this.form = this.formBuilder.group ({ ஆர்டர்கள்: புதிய FormArray ([]) this) this.addCheckboxes ()} private 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) .filter (v => v! == null) console.log (selectOrderIds)}}

மேலே உள்ள எடுத்துக்காட்டில், ஒவ்வொரு லூப் மறு செய்கைக்கும் பிறகு நாங்கள் ஒரு புதிய ஃபார்ம் கன்ட்ரோலை உருவாக்கி, ஃபார்ம்ஆரேவிலிருந்து எங்கள் ஆர்டர்களை எடுத்துள்ளோம். முதல் கட்டுப்பாட்டை உண்மை என்று அமைத்துள்ளோம், இதனால் முதல் ஆர்டர் இயல்புநிலையாக பட்டியலில் இருந்து சரிபார்க்கப்பட்டது.

இதற்குப் பிறகு, பயனருக்கு காண்பிக்கப்பட வேண்டிய குறிப்பிட்ட வரிசை தகவல்களைப் பெற, இந்த வார்ப்புருவில் FormArray உறுப்பை பிணைக்க வேண்டும்.

{{ordersData [i]. பெயர்}} சமர்ப்பிக்கவும்

வெளியீடு:

Angular8 இல் தேர்வுப்பெட்டியை சரிபார்க்கிறது

தேர்வுப்பெட்டியை எவ்வாறு சரிபார்ப்பது என்பதை அறிய கீழேயுள்ள எடுத்துக்காட்டைப் பாருங்கள்.

{{ordersData [i] .name} least குறைந்தபட்சம் ஒரு ஆர்டரைத் தேர்ந்தெடுக்க வேண்டும் சமர்ப்பிக்கவும் ... ஏற்றுமதி வகுப்பு AppComponent {படிவம்: FormGroup ordersData = [...] கட்டமைப்பாளர் (தனியார் formBuilder: FormBuilder) {this.form = this.formBuilder .குழு ({ஆர்டர்கள்: புதிய படிவம்அரே ([], minSelectedCheckboxes (1)) this) this.addCheckboxes ()} ...} செயல்பாடு minSelectedCheckboxes (min = 1) {const validator: ValidatorFn = (formArray: FormArray) => { const totalSelected = formArray.controls // தேர்வுப்பெட்டி மதிப்புகள் (பூலியன்) பட்டியலைப் பெறுங்கள் .மாப் (கட்டுப்பாடு => control.value) // சரிபார்க்கப்பட்ட தேர்வுப்பெட்டிகளின் எண்ணிக்கையை மொத்தமாகக் கொள்ளுங்கள் .முடிவு ((முந்தைய, அடுத்த) => அடுத்த? முந்தைய + அடுத்தது: முந்தைய, 0) // மொத்தம் குறைந்தபட்சத்தை விட அதிகமாக இல்லாவிட்டால், பிழை செய்தியைத் திருப்பி மொத்தம் தேர்ந்தெடுக்கப்பட்ட> = நிமிடம்? பூஜ்யம்: {தேவை: உண்மை}} ரிட்டர்ன் வேலிடேட்டர்}

வெளியீடு:

ASync படிவக் கட்டுப்பாடுகளைச் சேர்த்தல்

டைனமிக் செக்பாக்ஸை எவ்வாறு சேர்ப்பது என்பது இப்போது உங்களுக்குத் தெரியும், இந்த படிவங்களுக்கு ASync ஐ எவ்வாறு சேர்க்கலாம் என்று பார்ப்போம்.

'@ கோண / கோர்' இறக்குமதியிலிருந்து {கூறு import இறக்குமதி templateUrl: './app.component.html', styleUrls: ['./app.component.css']}) ஏற்றுமதி வகுப்பு AppComponent {form: FormGroup ordersData = [] கட்டமைப்பாளர் (தனியார் formBuilder: 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, பெயர்: 'order 1'}, {id: 200, name: 'order 2'}, {id: 300, name: 'order 3'}, {id: 400, பெயர்: 'ஆர்டர் 4'}]} சமர்ப்பிக்கவும் () {const selectOrderIds = this.form.value.orders .map ((v, i) => v? This.ordersData [i] .id: null) .filter (v => v! == null) console.log (selectOrderIds)}} ... 'rxjs' இலிருந்து import of import ஐ இறக்குமதி செய்க ... கட்டமைப்பாளர் (தனியார் formBuilder: FormBuilder) {this.form = this. formBuilder.group ({ஆர்டர்கள்: புதிய FormArray ([], minSelectedCheckboxes (1))}) // (this.getOrders ()) இன் ஒத்திசைவு ஆர்டர்கள் (http சேவை அழைப்பாக இருக்கலாம்). குழுசேர் (ஆர்டர்கள் => {this.ordersData = ஆர்டர்கள் this.addCheckboxes ()}) // ஒத்திசைவான ஆர்டர்கள் // this.ordersData = this.getOrders () // this.addCheckboxes ()}

இதன் மூலம், எங்கள் கட்டுரையின் முடிவுக்கு வந்துள்ளோம். உங்கள் கோண 8 இல் ஒரு தேர்வுப்பெட்டியை எவ்வாறு சேர்ப்பது என்பது இப்போது உங்களுக்குத் தெரியும், உங்கள் அன்றாட குறியீட்டு முறையில் அதைப் பயன்படுத்துவீர்கள் என்று நம்புகிறோம்.

இப்போது கோணத்தின் கட்டுமானத் தொகுதிகள் உங்களுக்குத் தெரியும், பாருங்கள் வழங்கியவர் எடுரேகா. கோணல் என்பது ஜாவாஸ்கிரிப்ட் கட்டமைப்பாகும், இது அளவிடக்கூடிய, நிறுவன மற்றும் செயல்திறன் கிளையன்ட் பக்க வலை பயன்பாடுகளை உருவாக்க பயன்படுகிறது. கோண கட்டமைப்பின் தத்தெடுப்பு அதிகமாக இருப்பதால், பயன்பாட்டின் செயல்திறன் மேலாண்மை சமூகத்தால் இயக்கப்படுகிறது, இது மறைமுகமாக சிறந்த வேலை வாய்ப்புகளை செலுத்துகிறது. நிறுவன பயன்பாட்டு மேம்பாட்டைச் சுற்றியுள்ள இந்த புதிய கருத்துகளை உள்ளடக்குவதை கோண சான்றிதழ் பயிற்சி நோக்கமாகக் கொண்டுள்ளது.