Kā izveidot izvēles rūtiņu Angular8?

Ja līdz šim esat veidojis jebkura veida lietojumprogrammas, jūs jau esat informēts par milzīgo nozīmi, kāda ir izvēles rūtiņai. Tas ne tikai atvieglo datu ievadi jebkurai platformai, bet arī atvieglo ātru datu šķirošanu, jo tie bieži tiek komplektēti ar saraksta funkciju. Šajā rakstā mēs redzēsim, kā izveidot izvēles rūtiņu angular8 šādā secībā:

• Izveidot izvēles rūtiņu Angular8
• Notiek izvēles rūtiņas pārbaude
• Pievienojot ASync veidlapas vadīklas

Izveidot izvēles rūtiņu Angular8

Lai izskaidrotu izvēles rūtiņas izveidošanas darbības Angular8, ņemsim piemēru, kurā mums ir saraksts ar pasūtījumiem, no kuriem izvēlēties, un tas mums ir jānorāda lietotājam izvēles rūtiņas veidā. Lai to izdarītu, izpildiet zemāk redzamo kodu.

mācoties ssis soli pa solim

const orderData = [{id: 1, name: 'order 1'}, {id: 2, name: 'order 2'}, {id: 3, name: 'order 3'}, {id: 4, name: 'pasūtījums 4'}]

Šajā gadījumā dati jau ir pie mums, un tāpēc mēs esam izmantojuši iepriekš koplietoto kodu. Reālā situācijā šie dati, visticamāk, tiktu importēti, izmantojot API.

Šajā piemērā mēs varam izmantot arī reaktīvās formas, lai gala rezultāts būtu tīrāks un efektīvāks. Lai saprastu, kā to izdarīt, apskatiet zemāk redzamo piemēru.

importēt {Component} no '@ angular / core' importēt {FormBuilder, FormGroup} no '@ angular / forms' @Component ({selector: 'my-app', templateUrl: './app.component.html', styleUrls: ['./app.component.css']}) eksporta klase AppComponent {forma: FormGroup orderData = [] konstruktors (privāts formBuilder: FormBuilder) {this.form = this.formBuilder.group ({pasūtījumi: []})} Iesniegt() { ... } }

Iepriekš minētajā kodā mēs izmantojām sekojošo.

1. FormGroups: kas apzīmē vienu formu.
2. FormControl: kas apzīmē vienu ierakstu vienā veidlapā.
3. FormArray: kas tiek izmantots, lai attēlotu visu FormControls kolekciju.

Iepriekš minētajā piemērā mēs varam izmantot arī pakalpojumu FormBuilder, lai izveidotu veidlapu, kas izskatīsies apmēram tā.

Iesniegt

Iepriekš minētajā piemērā veidlapu esam sasaistījuši ar formas elementu, izmantojot [formGroup] = ”forma”.

Tagad, kad pamata forma ir izveidota, pievienosim tam zināmu dinamiku, izmantojot FormArray, kā parādīts zemāk.

importēt {Component} no '@ angular / core' importēt {FormBuilder, FormGroup, FormArray, FormControl, ValidatorFn} no '@ angular / forms' @Component ({selector: 'my-app', templateUrl: './app.component .html ', styleUrls: [' ./app.component.css ']}) eksporta klase AppComponent {forma: FormGroup orderData = [{id: 100, nosaukums:' order 1 '}, {id: 200, name:' 2. pasūtījums '}, {id: 300, nosaukums:' pasūtījums 3 '}, {id: 400, nosaukums:' pasūtījums 4 '}] konstruktors (privāts formBuilder: FormBuilder) {this.form = this.formBuilder.group ({ pasūtījumi: new FormArray ([])}) this.addCheckboxes ()} private addCheckboxes () {this.ordersData.forEach ((o, i) => {const control = new FormControl (i === 0) // if pirmais vienums ir iestatīts uz true, cits ir false (this.form.controls.orders as FormArray) .push (control)})} submit () {const selectedOrderIds = this.form.value.orders .map ((v, i) = > v? this.orders [i] .id: null) .filter (v => v! == null) console.log (selectedOrderIds)}}

Iepriekš minētajā piemērā pēc katras cilpas atkārtošanas mēs esam izveidojuši jaunu FormControl un pārņēmuši pasūtījumus no FormArray. Mēs esam noteikuši, ka pirmā vadība ir patiesa, un tādējādi pirmā kārtība pēc noklusējuma ir izslēgta no saraksta.

Pēc tam mums ir jāpiesaista elements FormArray šai veidnei, lai iegūtu konkrētu informāciju par pasūtījumu, kas jāparāda lietotājam.

Iesniedziet {{orderData [i] .name}}

Izeja:

Pārbaudiet izvēles rūtiņu leņķiskajā

Apskatiet zemāk redzamo piemēru, lai uzzinātu, kā apstiprināt izvēles rūtiņu.

{{orderData [i] .name}} Jāizvēlas vismaz viens pasūtījums iesniedz ... eksportēšanas klase AppComponent {forma: FormGroup orderData = [...] konstruktors (privāts formBuilder: FormBuilder) {this.form = this.formBuilder .group ({order: new FormArray ([], minSelectedCheckboxes (1))}) this.addCheckboxes ()} ...} funkcija minSelectedCheckboxes (min = 1) {const validator: ValidatorFn = (formArray: FormArray) => { const totalSelected = formArray.controls // iegūt izvēles rūtiņu vērtību sarakstu (Būla). karte (control => control.value) // kopsummā atzīmēt atzīmēto izvēles rūtiņu skaitu. nākamais: iepriekšējais, 0) // ja kopsumma nav lielāka par minimālo, atgrieziet kļūdas ziņojumu return totalSelected> = min? null: {obligāti: taisnība}} atgriezt validatoru}

Izeja:

Pievienojot ASync veidlapas vadīklas

Tagad, kad jūs zināt, kā pievienot dinamiskās izvēles rūtiņas, ļaujiet mums uzzināt, kā mēs šīm formām varam pievienot ASync.

importēt {Component} no '@ angular / core' importēt {FormBuilder, FormGroup, FormArray, FormControl, ValidatorFn} no '@ angular / form' importēt {of} no 'rxjs' @Component ({selector: 'my-app', templateUrl: './app.component.html', styleUrls: ['./app.component.css']}) eksporta klase AppComponent {forma: FormGroup orderData = [] konstruktors (privāts formBuilder: FormBuilder) {this.form = this.formBuilder.group ({pasūtījumi: jauns FormArray ([], minSelectedCheckboxes (1))}) // sinhronie pasūtījumi this.ordersData = this.getOrders () this.addCheckboxes ()} private addCheckboxes () {this.ordersData. forEach ((o, i) => {const control = new FormControl (i === 0) // ja pirmais vienums ir iestatīts uz true, citādi false (this.form.controls.orders kā FormArray) .push (control)} )} getOrders () {return [{id: 100, name: 'order 1'}}, {id: 200, name: 'order 2'}, {id: 300, name: 'order 3'}, {id: 400, nosaukums: 'order 4'}]} submit () {const selectedOrderIds = this.form.value.orders .map ((v, i) => v? This.ordersData [i] .id: null) .filter (v => v! == null) console.log (selectedOrderIds)}} ... importēt {no} no 'rxjs' ... konstruktora (privāts formBuilder: FormBuilder) {this.form = this. formBuilder.group ({pasūtījumi: jauns FormArray ([], minSelectedCheckboxes (1))}) // asinhronie pasūtījumi (varētu būt http pakalpojuma izsaukums) (this.getOrders ()). = pasūta this.addCheckboxes ()}) // sinhronie pasūtījumi // this.ordersData = this.getOrders () // this.addCheckboxes ()}

Ar to mēs esam nonākuši mūsu raksta beigās. Tagad, kad jūs zināt, kā pievienot izvēles rūtiņu savam angular8, mēs ceram, ka jūs to izmantosiet ikdienas kodēšanā.

kā ievest hashmap java

Tagad, kad jūs zināt Angular celtniecības elementus, pārbaudiet autore Edureka. Angular ir JavaScript sistēma, kuru izmanto, lai izveidotu mērogojamas, uzņēmuma un veiktspējas klienta puses tīmekļa lietojumprogrammas. Tā kā leņķa ietvara pieņemšana ir augsta, lietojumprogrammas veiktspējas pārvaldība netieši veicina labākas darba iespējas. Leņķiskās sertifikācijas apmācības mērķis ir aptvert visus šos jaunos jēdzienus, kas saistīti ar uzņēmuma lietojumprogrammu attīstību.