Come creare una casella di controllo in Angular8?



La casella di controllo in Angular8 semplifica l'inserimento dei dati su qualsiasi piattaforma e facilita anche l'ordinamento rapido dei dati poiché viene fornito con la funzione di elenco.

Se hai creato qualsiasi tipo di applicazione fino ad ora, sei già consapevole dell'enorme significato che una casella di controllo ha. Non solo rende più facile l'inserimento dei dati su qualsiasi piattaforma, ma facilita anche l'ordinamento rapido dei dati poiché spesso vengono forniti con la funzione di elenco. In questo articolo vedremo come creare una checkbox in angular8 nella seguente sequenza:

Crea casella di controllo in Angular8

Per spiegare i passaggi per creare una casella di controllo in Angular8, prendiamo un esempio in cui abbiamo un elenco di ordini tra cui scegliere e dobbiamo farlo all'utente sotto forma di casella di controllo. Per fare ciò, segui il codice sottostante.





const ordersData = [{id: 1, name: 'order 1'}, {id: 2, name: 'order 2'}, {id: 3, name: 'order 3'}, {id: 4, name: 'ordine 4'}]

In questo caso i dati sono già presenti presso di noi e quindi abbiamo fatto uso del codice condiviso sopra. In uno scenario reale, questi dati verrebbero probabilmente importati tramite un'API.

In questo esempio, possiamo anche fare uso di forme reattive per rendere il risultato finale più pulito ed efficiente. Per capire come farlo, dai un'occhiata all'esempio qui sotto.



importa {Component} da '@ angular / core' importa {FormBuilder, FormGroup} da '@ angular / forms' @Component ({selector: 'my-app', templateUrl: './app.component.html', styleUrls: ['./app.component.css']}) export class AppComponent {form: FormGroup ordersData = [] constructor (private formBuilder: FormBuilder) {this.form = this.formBuilder.group ({orders: []})} Invia() { ... } }

Nel codice sopra, abbiamo fatto uso di quanto segue.

  1. FormGroups: che rappresenta una singola forma.
  2. FormControl: che rappresenta una singola voce in una singola forma.
  3. FormArray: che viene utilizzato per rappresentare una raccolta di tutti i FormControls.

Nell'esempio sopra possiamo anche utilizzare il servizio FormBuilder per creare il modulo che avrà un aspetto simile a questo.

trasferire i file all'istanza linux ec2
Invia

Nell'esempio precedente, abbiamo associato il form con l'elemento form utilizzando [formGroup] = 'form'.



Ora che il modulo di base è stato creato, aggiungiamo un po 'di dinamicità allo stesso tramite l'uso di FormArray come mostrato di seguito.

importa {Component} da '@ angular / core' importa {FormBuilder, FormGroup, FormArray, FormControl, ValidatorFn} da '@ angular / forms' @Component ({selector: 'my-app', templateUrl: './app.component .html ', styleUrls: [' ./app.component.css ']}) export class AppComponent {form: FormGroup ordersData = [{id: 100, name:' order 1 '}, {id: 200, name:' order 2 '}, {id: 300, name:' order 3 '}, {id: 400, name:' order 4 '}] costruttore (private formBuilder: FormBuilder) {this.form = this.formBuilder.group ({ ordini: new FormArray ([])}) this.addCheckboxes ()} private addCheckboxes () {this.ordersData.forEach ((o, i) => {const control = new FormControl (i === 0) // if primo elemento impostato su true, altrimenti 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)}}

Nell'esempio sopra, dopo ogni iterazione del ciclo abbiamo creato un nuovo FormControl e abbiamo preso i nostri ordini da FormArray. Abbiamo impostato il primo controllo su true e quindi il primo ordine è stato escluso dall'elenco per impostazione predefinita.

Dopodiché, dobbiamo associare l'elemento FormArray a questo modello per ottenere le informazioni sull'ordine specifiche che devono essere visualizzate all'utente.

{{ordersData [i] .name}} invia

Produzione:

quali sono le istanze in java

Output - casella di controllo in angular8- edureka

Convalida della casella di controllo in Angular8

Dai un'occhiata all'esempio seguente per imparare a convalidare una casella di controllo.

{{ordersData [i] .name}} Deve essere selezionato almeno un ordine submit ... export class AppComponent {form: FormGroup ordersData = [...] constructor (private formBuilder: FormBuilder) {this.form = this.formBuilder .group ({orders: new FormArray ([], minSelectedCheckboxes (1))}) this.addCheckboxes ()} ...} function minSelectedCheckboxes (min = 1) {const validator: ValidatorFn = (formArray: FormArray) => { const totalSelected = formArray.controls // ottiene un elenco di valori della casella di controllo (booleano) .map (control => control.value) // totalizza il numero di caselle di controllo selezionate .reduce ((prev, next) => next? prev + next: prev, 0) // se il totale non è maggiore del minimo, restituisce il messaggio di errore return totalSelected> = min? null: {required: true}} return validator}

Produzione:

Aggiunta di controlli del modulo ASync

Ora che sai come aggiungere caselle di controllo dinamiche, vediamo come aggiungere ASync a questi moduli.

import {Component} from '@ angular / core' import {FormBuilder, FormGroup, FormArray, FormControl, ValidatorFn} from '@ angular / forms' import {of} from 'rxjs' @Component ({selector: 'my-app', templateUrl: './app.component.html', styleUrls: ['./app.component.css']}) export class AppComponent {form: FormGroup ordersData = [] costruttore (private formBuilder: FormBuilder) {this.form = this.formBuilder.group ({orders: new FormArray ([], minSelectedCheckboxes (1))}) // ordini sincroni this.ordersData = this.getOrders () this.addCheckboxes ()} private addCheckboxes () {this.ordersData. forEach ((o, i) => {const control = new FormControl (i === 0) // se il primo elemento è impostato su true, altrimenti 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, nome: '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 {of} da 'rxjs' ... costruttore (private formBuilder: FormBuilder) {this.form = this. formBuilder.group ({orders: new FormArray ([], minSelectedCheckboxes (1))}) // ordini asincroni (potrebbe essere una chiamata di servizio http) di (this.getOrders ()). subscribe (orders => {this.ordersData = ordina this.addCheckboxes ()}) // ordini sincroni // this.ordersData = this.getOrders () // this.addCheckboxes ()}

Con questo siamo giunti alla fine del nostro articolo. Ora che sai come aggiungere una casella di controllo al tuo angular8, speriamo che ne farai uso nella tua programmazione quotidiana.

Ora che conosci gli elementi costitutivi di Angular, controlla il file di Edureka. Angular è un framework JavaScript utilizzato per creare applicazioni web lato client scalabili, aziendali e ad alte prestazioni. Poiché l'adozione del framework Angular è elevata, la gestione delle prestazioni dell'applicazione è guidata dalla comunità indirettamente e favorisce migliori opportunità di lavoro. L'Angular Certification Training mira a coprire tutti questi nuovi concetti sullo sviluppo di applicazioni aziendali.

un array di oggetti java