Kung lumilikha ka ng anumang uri ng mga application hanggang ngayon, alam mo na ang malaking kahalagahan na humahawak sa isang checkbox. Hindi lamang nito ginagawang mas madali ang pag-input ng data sa anumang platform, ngunit pinapabilis din nito ang mabilis na pag-uuri ng data dahil madalas na nakabalot sa tampok na listahan. Sa artikulong ito, makikita natin kung paano lumikha ng isang checkbox sa angular8 sa sumusunod na pagkakasunud-sunod:
Lumikha ng Checkbox sa Angular8
Upang ipaliwanag ang mga hakbang sa paglikha ng isang checkbox sa Angular8, kumuha kami ng isang halimbawa kung saan mayroon kaming isang listahan ng mga order na mapagpipilian at kailangan namin ito sa gumagamit sa anyo ng isang checkbox. Upang magawa ito, sundin ang code sa ibaba.
const orderData = [{id: 1, name: 'order 1'}, {id: 2, name: 'order 2'}, {id: 3, name: 'order 3'}, {id: 4, name: 'order 4'}]Sa kasong ito, ang data ay naroroon sa amin at samakatuwid ay ginamit namin ang code na ibinahagi sa itaas. Sa isang tunay na sitwasyon sa mundo, ang data na ito ay malamang na mai-import sa pamamagitan ng isang API.
Sa halimbawang ito, maaari din kaming gumamit ng mga reaktibo na form upang gawing mas malinis at mahusay ang resulta. Upang maunawaan kung paano ito gawin, tingnan ang halimbawa sa ibaba.
i-import ang {Component} mula sa '@ angular / core' import {FormBuilder, FormGroup} mula sa '@ angular / form' @Component ({selector: 'my-app', templateUrl: './app.component.html', styleUrls: ['./app.component.css']}) i-export ang klase ng AppComponent {form: FormGroup orderData = [] konstruktor (pribadong formBuilder: FormBuilder) {this.form = this.formBuilder.group ({order: []})} ipasa() { ... } }Sa code sa itaas, nagamit namin ang mga sumusunod.
ay isang array isang bagay sa java
- FormGroups: na kumakatawan sa isang solong form.
- FormControl: na kumakatawan sa isang solong pagpasok sa isang solong form.
- FormArray: na ginagamit upang kumatawan sa isang koleksyon ng lahat ng mga FormControl.
Sa halimbawa sa itaas maaari din naming magamit ang serbisyo ng FormBuilder upang likhain ang form na magmumukhang ganito.
ipasa
Sa halimbawa sa itaas, pinagbuklod namin ang form ng form element sa pamamagitan ng paggamit ng [formGroup] = ”form”.
Ngayon na ang pangunahing form ay nilikha, magdagdag kami ng ilang pagiging Dynamic sa pareho sa pamamagitan ng paggamit ng FormArray tulad ng ipinakita sa ibaba.
i-import ang {Component} mula sa '@ angular / core' import {FormBuilder, FormGroup, FormArray, FormControl, ValidatorFn} mula sa '@ angular / form' @Component ({selector: 'my-app', templateUrl: './app.component .html ', styleUrls: [' ./app.component.css ']}) export class AppComponent {form: FormGroup orderData = [{id: 100, name:' order 1 '}, {id: 200, name:' order 2 '}, {id: 300, name:' order 3 '}, {id: 400, name:' order 4 '}] konstruktor (pribadong formBuilder: FormBuilder) {this.form = this.formBuilder.group ({ mga order: bagong FormArray ([])}) this.addCheckboxes ()} pribadong addCheckboxes () {this.orderData.forEach ((o, i) => {const control = bagong FormControl (i === 0) // kung unang item na itinakda sa totoo, kung hindi man mali (this.form.controls.order bilang FormArray) .push (control)})} isumite () {const napiliOrderIds = this.form.value.order .map ((v, i) = > v? this.order [i] .id: null) .filter (v => v! == null) console.log (napiliOrderIds)}}Sa halimbawa sa itaas, pagkatapos ng bawat pag-ulit ng loop ay lumikha kami ng isang bagong FormControl at kinuha ang aming mga order mula sa FormArray. Itinakda namin ang unang kontrol na totoo at sa gayon ang unang order ay nasuri mula sa listahan bilang default.
Pagkatapos nito kailangan naming bonoin ang elemento ng FormArray sa template na ito upang makuha ang tukoy na impormasyon ng order na kailangang ipakita sa gumagamit.
Isumite ang {{orderData [i] .name}}Output:
talend bukas studio para sa tutorial ng pagsasama ng data
Pagpapatunay ng Checkbox sa Angular8
Tingnan ang halimbawa sa ibaba upang malaman kung paano mapatunayan ang isang checkbox.
{{orderData [i] .name}} Hindi bababa sa isang order ang dapat mapiling isumite ... export class AppComponent {form: FormGroup ordersData = [...] konstruktor (pribadong formBuilder: FormBuilder) {this.form = this.formBuilder .group ({order: new FormArray ([], minSelectedCheckboxes (1))}) this.addCheckboxes ()} ...} function na minSelectedCheckboxes (min = 1) {Const validator: ValidatorFn = (formArray: FormArray) => { const totalSelected = formArray.controls // kumuha ng isang listahan ng mga halaga ng checkbox (boolean) .map (control => control.value) // total up ang bilang ng mga naka-check na checkbox. binawasan ((prev, susunod) => susunod? prev + susunod: prev, 0) // kung ang kabuuan ay hindi hihigit sa minimum, ibalik ang error message return totalSelected> = min? null: {kinakailangan: true}} return validator}Output:
Pagdaragdag ng Mga Kontrol sa ASync Form
Ngayong alam mo na kung paano magdagdag ng mga pabago-bagong checkbox, ipaalam sa amin kung paano namin maidaragdag ang ASync sa mga form na ito.
i-import ang {Component} mula sa '@ angular / core' import {FormBuilder, FormGroup, FormArray, FormControl, ValidatorFn} mula sa '@ angular / form' import {ng} mula sa 'rxjs' @Component ({selector: 'my-app', templateUrl: './app.component.html', styleUrls: ['./app.component.css']}) i-export ang klase ng AppComponent {form: FormGroup orderData = [] konstruktor (pribadong formBuilder: FormBuilder) {this.form = this.formBuilder.group ({order: new FormArray ([], minSelectedCheckboxes (1))}) // kasabay na mga order na ito.orderData = this.getOrders () this.addCheckboxes ()} pribadong addCheckboxes () {this.orderData. forEach ((o, i) => {const control = bagong FormControl (i === 0) // kung ang unang item ay nakatakda sa totoo, iba ang mali (this.form.controls.order bilang FormArray) .push (control)} )} getOrders () {return [{id: 100, name: 'order 1'}, {id: 200, name: 'order 2'}, {id: 300, name: 'order 3'}, {id: 400, pangalan: 'order 4'}]} isumite () {const napiliOrderIds = this.form.value.order .map ((v, i) => v? This.orderData [i] .id: null) .filter (v => v! == null) console.log (napiliOrderIds)}} ... i-import {ng} mula sa 'rxjs' ... konstruktor (pribadong formBuilder: FormBuilder) {this.form = ito. formBuilder.group ({order: new FormArray ([], minSelectedCheckboxes (1))}) // async order (maaaring isang tawag sa serbisyo ng http) ng (this.getOrders ()). mag-subscribe (order => {this.orderData = order this.addCheckboxes ()}) // kasabay na mga order // this.orderData = this.getOrders () // this.addCheckboxes ()}Sa pamamagitan nito, napunta kami sa dulo ng aming artikulo. Ngayon na alam mo kung paano magdagdag ng isang checkbox sa iyong angular8, inaasahan namin na magagamit mo ito sa iyong pang-araw-araw na pag-coding.
Ngayong alam mo na ang mga bloke ng gusali ng Angular, tingnan ang ni Edureka. Angular ay isang balangkas ng JavaScript na ginagamit upang lumikha ng nasusukat, enterprise, at pagganap na mga client-side web application. Sa Angular na pag-aampon ng balangkas na mataas, ang pamamahala ng pagganap ng aplikasyon ay hindi hinihimok ng komunidad na hindi direktang pagmamaneho ng mas mahusay na mga oportunidad sa trabaho. Nilalayon ng Angular Certification Training na masakop ang lahat ng mga bagong konsepto sa paligid ng Pag-unlad ng Application ng Enterprise.