Com es crea una casella de selecció a Angular8?

Si heu estat creant qualsevol tipus d’aplicació fins ara, ja sou conscients de la gran importància que té una casella de selecció. No només facilita l’entrada de dades a qualsevol plataforma, sinó que també facilita l’ordenació ràpida de les dades, ja que sovint inclou la funció de llista. En aquest article, veurem com crear una casella de selecció a angular8 en la següent seqüència:

aplicació web ruby ​​on rails

• Crea una casella de selecció a Angular8
• Validació de la casella de selecció
• Addició de controls de formulari ASync

Crea una casella de selecció a Angular8

Per explicar els passos per crear una casella de selecció a Angular8, posem un exemple en què tinguem una llista d’ordres per triar i ho haurem de fer a l’usuari en forma de casella de selecció. Per fer-ho, seguiu el codi següent.

const ordresDades = [{id: 1, nom: 'ordre 1'}, {id: 2, nom: 'ordre 2'}, {id: 3, nom: 'ordre 3'}, {id: 4, nom: 'ordre 4'}]

En aquest cas, les dades ja estan presents amb nosaltres i, per tant, hem fet ús del codi compartit anteriorment. En un escenari del món real, és probable que aquestes dades s’importin mitjançant una API.

En aquest exemple, també podem fer ús de formes reactives per fer el resultat final més net i eficient. Per entendre com fer-ho, mireu l'exemple següent.

importa {Component} des de '@ angular / core' importa {FormBuilder, FormGroup} des de '@ angular / forms' @Component ({selector: 'my-app', templateUrl: './app.component.html', styleUrls: ['./app.component.css']}) classe d'exportació AppComponent {formulari: FormGroup ordersData = [] constructor (private formBuilder: FormBuilder) {this.form = this.formBuilder.group ({ordres: []})} Presentar() { ... } }

Al codi anterior, hem fet ús del següent.

1. FormGroups: que representa una forma única.
2. FormControl: que representa una única entrada en un sol formulari.
3. FormArray: que s’utilitza per representar una col·lecció de tots els FormControls.

A l'exemple anterior també podem fer ús del servei FormBuilder per crear el formulari que tindrà un aspecte semblant.

Presentar

A l'exemple anterior, hem unit el formulari amb l'element de formulari mitjançant [formGroup] = ”form”.

Ara que s'ha creat el formulari bàsic, afegim una mica de dinamitat al mateix mitjançant l'ús de FormArray com es mostra a continuació.

importar {Component} des de '@ angular / core' importar {FormBuilder, FormGroup, FormArray, FormControl, ValidatorFn} des de '@ angular / forms' @Component ({selector: 'my-app', templateUrl: './app.component .html ', styleUrls: [' ./app.component.css ']}) classe d'exportació AppComponent {formulari: FormGroup ordersData = [{id: 100, name:' order 1 '}, {id: 200, name:' ordre 2 '}, {id: 300, nom:' ordre 3 '}, {id: 400, nom:' ordre 4 '}] constructor (private formBuilder: FormBuilder) {this.form = this.formBuilder.group ({ ordres: nou FormArray ([])}) this.addCheckboxes ()} private addCheckboxes () {this.ordersData.forEach ((o, i) => {const control = new FormControl (i === 0) // if primer element definit a true, else 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)}}

A l'exemple anterior, després de cada iteració de bucle, hem creat un FormControl nou i hem pres les nostres comandes de FormArray. Hem establert que el primer control és cert i, per tant, el primer ordre s'ha eliminat de la llista per defecte.

Després d'això, hem de vincular l'element FormArray a aquesta plantilla per tal d'obtenir la informació específica de l'ordre que ha de mostrar-se a l'usuari.

{{ordersData [i] .name}} envia

Sortida:

Validació de la casella de selecció a Angular8

Mireu l'exemple següent per obtenir informació sobre com validar una casella de selecció.

{{ordersData [i] .name}} Cal seleccionar almenys una comanda envia ... exporta la classe AppComponent {formulari: FormGroup ordersData = [...] constructor (private formBuilder: FormBuilder) {this.form = this.formBuilder .group ({ordres: new FormArray ([], minSelectedCheckboxes (1))}) this.addCheckboxes ()} ...} funció minSelectedCheckboxes (min = 1) {validador de const: ValidatorFn = (formArray: FormArray) => { const totalSelected = formArray.controls // obtenir una llista de valors de casella de selecció (booleà) .map (control => control.value) // sumar el nombre de caselles de selecció marcades. reduir ((anterior, següent) => següent? prev + següent: prev, 0) // si el total no és superior al mínim, torneu a enviar el missatge d'error return totalSelected> = min? null: {required: true}} validador de retorn}

Sortida:

Addició de controls de formulari ASync

Ara que ja sabeu com afegir caselles de selecció dinàmiques, vegem com podem afegir ASync a aquests formularis.

importar {Component} des de '@ angular / core' importar {FormBuilder, FormGroup, FormArray, FormControl, ValidatorFn} des de '@ angular / forms' importar {de} de 'rxjs' @Component ({selector: 'my-app', templateUrl: './app.component.html', styleUrls: ['./app.component.css']}) classe d'exportació AppComponent {formulari: FormGroup ordersData = [] constructor (private formBuilder: FormBuilder) {this.form = this.formBuilder.group ({ordres: new FormArray ([], minSelectedCheckboxes (1))}) // ordres sincròniques this.ordersData = this.getOrders () this.addCheckboxes ()} private addCheckboxes () {this.ordersData. forEach ((o, i) => {const control = new FormControl (i === 0) // si el primer element s'estableix en true, en cas contrari false (this.form.controls.orders com FormArray) .push (control)} )} getOrders () {return [{id: 100, name: 'order 1'}, {id: 200, name: 'order 2'}, {id: 300, name: 'order 3'}, {id: 400, nom: 'ordre 4'}]} submit () {const selectedOrderIds = this.form.value.orders .map ((v, i) => v? This.ordersData [i] .id: null) .filter (v => v! == null) console.log (selectedOrderIds)}} ... importació {de} de 'rxjs' ... constructor (private formBuilder: FormBuilder) {this.form = this. formBuilder.group ({orders: new FormArray ([], minSelectedCheckboxes (1))}) // ordres asíncrones (pot ser una trucada de servei http) de (this.getOrders ()). subscribe (orders => {this.ordersData = ordres this.addCheckboxes ()}) // ordres síncrones // this.ordersData = this.getOrders () // this.addCheckboxes ()}

Amb això, hem arribat al final del nostre article. Ara que ja sabeu com afegir una casella de selecció al vostre angular8, esperem que en feu ús en la vostra codificació diària.

Ara que ja coneixeu els elements bàsics d'Angular, consulteu el fitxer per Edureka. Angular és un marc JavaScript que s’utilitza per crear aplicacions web escalables, empresarials i de rendiment del client. Com que l’adopció de marc angular és elevada, la gestió del rendiment de l’aplicació es basa en la comunitat de manera indirecta i genera millors oportunitats laborals. La formació sobre certificació angular té com a objectiu cobrir tots aquests nous conceptes entorn del desenvolupament d'aplicacions empresarials.