Cum se creează o casetă de selectare în Angular8?

Dacă ați creat până acum orice tip de aplicație, sunteți deja conștient de importanța imensă pe care o deține o casetă de selectare. Nu numai că facilitează introducerea datelor pentru orice platformă, dar facilitează și sortarea rapidă a datelor, deoarece de multe ori vine însoțită de caracteristica listă. În acest articol, vom vedea cum să creați o casetă de selectare în angular8 în următoarea secvență:

cum se găsește palindromul în Java

• Creați casetă de selectare în Angular8
• Validarea casetei de selectare
• Adăugarea comenzilor ASync Form

Creați casetă de selectare în Angular8

Pentru a explica pașii de creare a unei casete de selectare în Angular8, să luăm un exemplu în care avem o listă de comenzi din care să alegem și trebuie să facem acest lucru utilizatorului sub forma unei casete de selectare. Pentru aceasta, urmați codul de mai jos.

const ordersData = [{id: 1, nume: 'comanda 1'}, {id: 2, nume: 'comanda 2'}, {id: 3, nume: 'comanda 3'}, {id: 4, nume: „comanda 4”}]

În acest caz, datele sunt deja prezente la noi și, prin urmare, am folosit codul partajat mai sus. Într-un scenariu din lumea reală, aceste date ar fi cel mai probabil importate printr-un API.

În acest exemplu, putem folosi și forme reactive pentru a face rezultatul final mai curat și eficient. Pentru a înțelege cum se face acest lucru, aruncați o privire la exemplul de mai jos.

importați {Component} din „@ angular / core” importați {FormBuilder, FormGroup} din „@ angular / forms” @Component ({selector: „aplicația mea”, templateUrl: „./app.component.html”, styleUrls: ['./app.component.css']}) clasa de export AppComponent {formular: FormGroup ordersData = [] constructor (private formBuilder: FormBuilder) {this.form = this.formBuilder.group ({ordine: []})} Trimite() { ... } }

În codul de mai sus, am folosit următoarele.

1. FormGroups: care reprezintă o singură formă.
2. FormControl: care reprezintă o singură intrare într-o singură formă.
3. FormArray: care este folosit pentru a reprezenta o colecție de toate FormControls.

În exemplul de mai sus putem folosi, de asemenea, serviciul FormBuilder pentru a crea formularul, acesta va arăta cam așa.

Trimite

În exemplul de mai sus, am legat formularul cu elementul formular utilizând [formGroup] = ”formular”.

Acum că a fost creat formularul de bază, să adăugăm o anumită dinamică aceluiași prin utilizarea FormArray așa cum se arată mai jos.

importați {Component} din „@ angular / core” importați {FormBuilder, FormGroup, FormArray, FormControl, ValidatorFn} din „@ angular / forms” @Component ({selector: 'my-app', templateUrl: './app.component .html ', styleUrls: [' ./app.component.css ']}) clasa de export AppComponent {formular: FormGroup ordersData = [{id: 100, name:' order 1 '}, {id: 200, name:' comanda 2 '}, {id: 300, nume:' comanda 3 '}, {id: 400, nume:' comanda 4 '}] constructor (private formBuilder: FormBuilder) {this.form = this.formBuilder.group ({ comenzi: new FormArray ([])}) this.addCheckboxes ()} private addCheckboxes () {this.ordersData.forEach ((o, i) => {const control = new FormControl (i === 0) // if primul articol setat la true, altfel 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)}}

În exemplul de mai sus, după fiecare iterație de buclă am creat un nou FormControl și ne-am luat comenzile de la FormArray. Am setat primul control să fie adevărat și, astfel, prima comandă a fost eliminată din listă în mod implicit.

După aceasta, trebuie să legăm elementul FormArray de acest șablon pentru a obține informațiile specifice de comandă care trebuie afișate utilizatorului.

{{ordersData [i] .name}} trimiteți

Ieșire:

Validarea casetei de selectare în Angular8

Aruncați o privire la exemplul de mai jos pentru a afla cum să validați o casetă de selectare.

{{ordersData [i] .name}} Cel puțin o comandă trebuie selectată trimite ... clasa de export AppComponent {formular: FormGroup ordersData = [...] constructor (private formBuilder: FormBuilder) {this.form = this.formBuilder .group ({comenzi: new FormArray ([], minSelectedCheckboxes (1))}) this.addCheckboxes ()} ...} funcție minSelectedCheckboxes (min = 1) {const validator: ValidatorFn = (formArray: FormArray) => { const totalSelected = formArray. următor: prev, 0) // dacă totalul nu este mai mare decât minimul, returnați mesajul de eroare return totalSelected> = min? nul: {required: true}} return validator}

Ieșire:

Adăugarea comenzilor ASync Form

Acum, că știți cum să adăugați casete de selectare dinamice, permiteți-ne să vedem cum putem adăuga ASync la aceste formulare.

importați {Component} din „@ angular / core” import {FormBuilder, FormGroup, FormArray, FormControl, ValidatorFn} din „@ angular / forms” import {of} din „rxjs” @Component ({selector: „aplicația mea”, templateUrl: './app.component.html', styleUrls: ['./app.component.css']}) clasa de export AppComponent {formular: FormGroup ordersData = [] constructor (private formBuilder: FormBuilder) {this.form = this.formBuilder.group ({comenzi: new FormArray ([], minSelectedCheckboxes (1))}) // comenzi sincrone this.ordersData = this.getOrders () this.addCheckboxes ()} private addCheckboxes () {this.ordersData. forEach ((o, i) => {const control = new FormControl (i === 0) // dacă primul element este setat la true, altfel false (this.form.controls.orders as FormArray) .push (control)} )} getOrders () {return [{id: 100, name: 'order 1'}, {id: 200, name: 'order 2'}, {id: 300, name: 'order 3'}, {id: 400, nume: 'comanda 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 {of} din 'rxjs' ... constructor (private formBuilder: FormBuilder) {this.form = this. formBuilder.group ({comenzi: new FormArray ([], minSelectedCheckboxes (1))}) // comenzi asincronizate (ar putea fi un apel de serviciu http) din (this.getOrders ()). subscribe (orders => {this.ordersData = comenzi this.addCheckboxes ()}) // comenzi sincrone // this.ordersData = this.getOrders () // this.addCheckboxes ()}

Cu aceasta, am ajuns la sfârșitul articolului nostru. Acum, că știi cum să adaugi o casetă de selectare la angular8, sperăm că o vei folosi în codarea ta de zi cu zi.

Acum că cunoașteți elementele de bază ale Angular, verificați de Edureka. Angular este un cadru JavaScript care este utilizat pentru a crea aplicații web scalabile, de întreprindere și de performanță din partea clientului. Adoptarea cadrului angular fiind ridicată, managementul performanței aplicației este condus indirect de comunitate, oferind oportunități de muncă mai bune. Instruirea privind certificarea angulară urmărește să acopere toate aceste concepte noi legate de dezvoltarea aplicațiilor pentru întreprinderi.