Kuinka luoda valintaruutu Angular8: ssa?

Jos olet luonut tähän mennessä minkä tahansa tyyppisiä sovelluksia, tiedät jo valintaruudun merkityksen. Paitsi että se helpottaa tietojen syöttämistä mille tahansa alustalle, se myös helpottaa tietojen nopeaa lajittelua, koska se toimitetaan usein luettelo-ominaisuuden mukana. Tässä artikkelissa näemme, kuinka valintaruutu luodaan kulmassa8 seuraavassa järjestyksessä:

• Luo valintaruutu kulmassa8
• Vahvistetaan valintaruutu
• ASync-lomakekontrollien lisääminen

Luo valintaruutu kulmassa8

Selittäkää valintaruudun luomisen vaiheet Angular8: ssa ottamalla esimerkki, jossa meillä on luettelo tilauksista, joista valita, ja meidän on tehtävä tämä käyttäjälle valintaruudun muodossa. Noudata tätä varten alla olevaa koodia.

const tilauksetData = [{id: 1, nimi: 'tilaus 1'}, {id: 2, nimi: 'tilaus 2'}, {id: 3, nimi: 'tilaus 3'}, {id: 4, nimi: 'tilaus 4'}]

Tällöin tiedot ovat jo kanssamme, ja siksi olemme käyttäneet yllä jaettua koodia. Todellisessa tilanteessa nämä tiedot todennäköisesti tuotaisiin API: n kautta.

Tässä esimerkissä voimme myös käyttää reaktiivisia muotoja, jotta lopputulos olisi puhtaampi ja tehokas. Katso alla oleva esimerkki ymmärtääksesi, miten tämä tehdään.

tuo {komponentti} @ kulmasta / ytimestä tuonti {FormBuilder, FormGroup} tiedostosta @ kulma / muodot @ komponentti ({valitsin: 'my-app', templateUrl: './app.component.html', styleUrls: ['./app.component.css']}) vientiluokka AppComponent {form: FormGroup orderData = [] konstruktori (private formBuilder: FormBuilder) {this.form = this.formBuilder.group ({tilaukset: []})} Lähetä() { ... } }

Edellä olevassa koodissa olemme käyttäneet seuraavaa.

1. Lomakeryhmät: joka edustaa yhtä lomaketta.
2. FormControl: joka edustaa yhtä merkintää yhdeksi muodoksi.
3. FormArray: jota käytetään edustamaan koko FormControls-kokoelmaa.

Yllä olevassa esimerkissä voimme myös käyttää FormBuilder-palvelua luomaan lomakkeen, joka näyttää tältä.

kuinka asentaa pimennysikkunat

Lähetä

Yllä olevassa esimerkissä olemme sitoneet lomakkeen muotoelementtiin käyttämällä [formGroup] = ”muoto”.

Nyt kun peruslomake on luotu, lisätään dynaamisuutta samaan FormArrayn avulla alla olevan kuvan mukaisesti.

tuo {komponentti} @ kulmasta / ytimestä tuonti {FormBuilder, FormGroup, FormArray, FormControl, ValidatorFn} kohteesta @ kulma / muodot @Komponentti ({valitsin: 'my-app', templateUrl: './app.component .html ', styleUrls: [' ./app.component.css ']}) vientiluokka AppComponent {lomake: FormGroup tilauksetData = [{id: 100, nimi:' tilaus 1 '}, {id: 200, nimi:' tilaus 2 '}, {id: 300, nimi:' tilaus 3 '}, {id: 400, nimi:' tilaus 4 '}] konstruktori (yksityinen formBuilder: FormBuilder) {this.form = this.formBuilder.group ({ tilaukset: new FormArray ([])}) this.addCheckboxes ()} private addCheckboxes () {this.ordersData.forEach ((o, i) => {const control = new FormControl (i === 0) // if ensimmäinen kohde on tosi, muuten väärä (this.form.controls.orders as FormArray) .push (control)})} submit () {const selectedOrderIds = this.form.value.orders .map ((v, i) = > v? this.orders [i] .id: null). suodatin (v => v! == null) console.log (selectedOrderIds)}}

Yllä olevassa esimerkissä jokaisen silmukka-iteraation jälkeen olemme luoneet uuden FormControlin ja ottaneet tilauksemme FormArraysta. Olemme asettaneet ensimmäisen kontrollin totta ja siten ensimmäinen järjestys on oletusarvoisesti poistettu luettelosta.

Tämän jälkeen meidän on sidottava FormArray-elementti tähän malliin saadaksemme tietyt tilaustiedot, jotka on näytettävä käyttäjälle.

{{tilauksetData [i] .nimi}} lähetä

Tuotos:

asenna php Windows 10: een

Tarkistetaan valintaruutu kulmassa 8

Katso alla olevasta esimerkistä, miten voit vahvistaa valintaruudun.

{{tilauksetData [i] .nimi}} Ainakin yksi tilaus on valittava lähetä ... vientiluokka AppComponent {lomake: FormGroup tilauksetData = [...] konstruktori (yksityinen formBuilder: FormBuilder) {this.form = this.formBuilder .group ({tilaukset: uusi FormArray ([], minSelectedCheckboxes (1))}) this.addCheckboxes ()} ...} -toiminto minSelectedCheckboxes (min = 1) {const validator: ValidatorFn = (formArray: FormArray) => { const totalSelected = formArray.controls // hae luettelo valintaruutujen arvoista (boolean). map (control => control.value) // laskee yhteen valittujen valintaruutujen määrän .reduce ((prev, next) => next? prev + seuraava: edellinen, 0) // jos kokonaismäärä ei ole suurempi kuin pienin, palauta virheilmoitus return totalSelected> = min? null: {vaaditaan: tosi}} palauta vahvistaja}

Tuotos:

ASync-lomakekontrollien lisääminen

Nyt kun tiedät kuinka lisätä dynaamisia valintaruutuja, katsotaanpa, kuinka voimme lisätä ASyncin näihin lomakkeisiin.

tuoda {Komponentti '@ angular / core' -tuotteesta tuonti {FormBuilder, FormGroup, FormArray, FormControl, ValidatorFn} kohteesta '@ angular / forms' import {of} kohteesta 'rxjs' @Component ({selector: 'my-app', templateUrl: './app.component.html', styleUrls: ['./app.component.css']}) vientiluokka AppComponent {lomake: FormGroup orderData = [] konstruktori (yksityinen formBuilder: FormBuilder) {this.form = this.formBuilder.group ({tilaukset: uusi FormArray ([], minSelectedCheckboxes (1))}) // synkroniset tilaukset this.ordersData = this.getOrders () this.addCheckboxes ()} private addCheckboxes () {this.ordersData. forEach ((o, i) => {const control = new FormControl (i === 0) // jos ensimmäinen kohde on true, muuten false (this.form.controls.orders as FormArray) .push (control)} )} getOrders () {return [{id: 100, nimi: 'tilaus 1'}}, {id: 200, nimi: 'tilaus 2'}, {id: 300, nimi: 'tilaus 3'}, {id: 400, nimi: 'tilaus 4'}]} lähetä () {const selectedOrderIds = this.form.value.orders .map ((v, i) => v? This.ordersData [i] .id: null). suodatin (v => v! == null) console.log (selectedOrderIds)}} ... tuo {of} tiedostosta 'rxjs' ... konstruktori (yksityinen formBuilder: FormBuilder) {this.form = tämä. formBuilder.group ({tilaukset: uusi FormArray ([], minSelectedCheckboxes (1))}) // asynkronointitilaukset (voi olla http-palvelukutsu) kohteelle (this.getOrders ()). tilaa (tilaukset => {this.ordersData = tilaa this.addCheckboxes ()}) // synkroniset tilaukset // this.ordersData = this.getOrders () // this.addCheckboxes ()}

Tämän avulla olemme päässeet artikkelimme loppuun. Nyt kun tiedät kuinka lisätä valintaruutu angular8: een, toivomme, että hyödynnät sitä päivittäisessä koodauksessasi.

Nyt kun tiedät Angularin rakennusosat, tutustu kirjoittanut Edureka. Angular on JavaScript-kehys, jota käytetään skaalautuvien, yritys- ja suorituskykyisten asiakaspuolen verkkosovellusten luomiseen. Kulmakehyksen käyttöönoton ollessa korkea sovelluksen suorituskyvyn hallinta on yhteisölähtöistä, välillisesti parempia työmahdollisuuksia. Angular Certification -koulutuksen tarkoituksena on kattaa kaikki nämä uudet konseptit yrityssovellusten kehittämisen ympärillä.

skanneriluokan käyttö java