Sådan oprettes et afkrydsningsfelt i Angular8?



Afkrydsningsfelt i Angular8 gør input af data lettere til enhver platform og letter også hurtig sortering af data, da de leveres pakket med listefunktion.

Hvis du hidtil har oprettet nogen form for applikationer, er du allerede klar over den enorme betydning, som et afkrydsningsfelt har. Ikke alene gør det input af data lettere til enhver platform, men det letter også hurtig sortering af data, da det ofte leveres pakket med listefunktionen. I denne artikel vil vi se, hvordan du opretter et afkrydsningsfelt i vinkel8 i følgende sekvens:

Opret afkrydsningsfelt i Angular8

For at forklare trinnene til oprettelse af et afkrydsningsfelt i Angular8, lad os tage et eksempel, hvor vi har en liste over ordrer at vælge imellem, og vi skal dette til brugeren i form af et afkrydsningsfelt. For at gøre dette skal du følge koden nedenfor.





hvordan man laver tilføjelse i java
const ordersData = [{id: 1, name: 'order 1'}, {id: 2, name: 'order 2'}, {id: 3, name: 'order 3'}, {id: 4, name: 'ordre 4'}]

I dette tilfælde er dataene allerede til stede hos os, og derfor har vi brugt koden, der er delt ovenfor. I et virkeligt verdensscenarie vil disse data sandsynligvis blive importeret via en API.

I dette eksempel kan vi også gøre brug af reaktive former for at gøre slutresultatet renere og effektiv. For at forstå, hvordan du gør dette, skal du kigge på eksemplet nedenfor.



importer {Component} fra '@ angular / core' import {FormBuilder, FormGroup} fra '@ angular / forms' @Component ({selector: 'my-app', templateUrl: './app.component.html', styleUrls: ['./app.component.css']}) eksportklasse AppComponent {form: FormGroup ordersData = [] konstruktør (privat formBuilder: FormBuilder) {this.form = this.formBuilder.group ({ordrer: []})} Indsend() { ... } }

I ovenstående kode har vi brugt følgende.

  1. FormGroups: som repræsenterer en enkelt form.
  2. FormControl: som repræsenterer en enkelt post i en enkelt form.
  3. FormArray: som bruges til at repræsentere en samling af alle FormControls.

I ovenstående eksempel kan vi også gøre brug af FormBuilder-tjenesten til at oprette den form, den vil se sådan ud.

Indsend

I ovenstående eksempel har vi bundet formularen med formelement ved hjælp af [formGroup] = ”form”.



Nu hvor den grundlæggende form er oprettet, lad os tilføje en vis dynamik til det samme ved brug af FormArray som vist nedenfor.

importer {Component} fra '@ angular / core' import {FormBuilder, FormGroup, FormArray, FormControl, ValidatorFn} fra '@ angular / forms' @Component ({selector: 'my-app', templateUrl: './app.component .html ', styleUrls: [' ./app.component.css ']}) eksportklasse AppComponent {form: FormGroup ordersData = [{id: 100, navn:' ordre 1 '}, {id: 200, navn:' rækkefølge 2 '}, {id: 300, navn:' ordre 3 '}, {id: 400, navn:' ordre 4 '}] konstruktør (privat formBuilder: FormBuilder) {this.form = this.formBuilder.group ({ ordrer: ny FormArray ([])}) this.addCheckboxes ()} private addCheckboxes () {this.ordersData.forEach ((o, i) => {const control = new FormControl (i === 0) // if første element indstillet til sandt, ellers falsk (this.form.controls.orders som FormArray). push (kontrol)}}} send () {const selectedOrderIds = this.form.value.orders .map ((v, i) = > v? this.orders [i] .id: null) .filter (v => v! == null) console.log (valgtOrderIds)}}

I ovenstående eksempel har vi efter hver loop-iteration oprettet en ny FormControl og taget vores ordrer fra FormArray. Vi har indstillet den første kontrol til at være sand, og dermed er den første ordre som standard markeret fra listen.

Herefter skal vi binde FormArray-elementet til denne skabelon for at få de specifikke ordreoplysninger, der skal vises for brugeren.

{{ordersData [i] .name}} indsender

Produktion:

Output - afkrydsningsfelt i angular8-edureka

Validering af afkrydsningsfeltet i Angular8

Se eksemplet nedenfor for at lære, hvordan du validerer et afkrydsningsfelt.

{{ordersData [i] .name}} Mindst en ordre skal vælges indsend ... eksportklasse AppComponent {form: FormGroup ordersData = [...] konstruktør (privat formBuilder: FormBuilder) {this.form = this.formBuilder .group ({ordrer: ny FormArray ([], minSelectedCheckboxes (1))}) this.addCheckboxes ()} ...} funktion minSelectedCheckboxes (min = 1) {const validator: ValidatorFn = (formArray: FormArray) => { const totalSelected = formArray.controls // få en liste over afkrydsningsfeltværdier (boolsk). kort (kontrol => kontrol.værdi) // samlet antal afkrydsede afkrydsningsfelter. reducere ((forrige, næste) => næste? forrige næste: prev, 0) // hvis summen ikke er større end minimumet, returneres fejlmeddelelsen return totalSelected> = min? null: {krævet: sand}} returner validator}

Produktion:

Tilføjelse af ASync Form Controls

Nu hvor du ved, hvordan du tilføjer dynamiske afkrydsningsfelter, så lad os se, hvordan vi kan tilføje ASync til disse formularer.

importer {Component} fra '@ angular / core' import {FormBuilder, FormGroup, FormArray, FormControl, ValidatorFn} fra '@ angular / forms' import {of} fra 'rxjs' @Component ({selector: 'my-app', templateUrl: './app.component.html', styleUrls: ['./app.component.css']}) eksportklasse AppComponent {form: FormGroup ordersData = [] konstruktør (privat formBuilder: FormBuilder) {this.form = this.formBuilder.group ({ordrer: ny FormArray ([], minSelectedCheckboxes (1))}) // synkron ordrer this.ordersData = this.getOrders () this.addCheckboxes ()} private addCheckboxes () {this.ordersData. forEach ((o, i) => {const control = new FormControl (i === 0) // hvis første element er sat til true, ellers false (this.form.controls.ordrer som FormArray). push (control)} )} getOrders () {return [{id: 100, name: 'order 1'}, {id: 200, name: 'order 2'}, {id: 300, name: 'order 3'}, {id: 400, navn: 'rækkefølge 4'}]} send () {const selectedOrderIds = this.form.value.orders .map ((v, i) => v? This.ordersData [i]. Id: null) .filter (v => v! == null) console.log (valgtOrderIds)}} ... import {af} fra 'rxjs' ... konstruktør (privat formBuilder: FormBuilder) {this.form = dette. formBuilder.group ({ordrer: ny FormArray ([], minSelectedCheckboxes (1))}) // asynkroniseringsordrer (kan være et http-servicekald) af (this.getOrders ()). abonner (ordrer => {this.ordersData = bestiller this.addCheckboxes ()} // synkron ordrer // this.ordersData = this.getOrders () // this.addCheckboxes ()}

Med dette er vi kommet til slutningen af ​​vores artikel. Nu hvor du ved, hvordan du tilføjer et afkrydsningsfelt til din vinkel8, håber vi, at du vil bruge det i din daglige kodning.

kok vs marionet vs ansible

Nu hvor du kender byggestenene i Angular, skal du tjekke af Edureka. Angular er en JavaScript-ramme, der bruges til at oprette skalerbare, virksomheds- og performance-klientsides webapplikationer. Da vedtagelsen af ​​kantede rammer er høj, styres applikationsstyring af applikationen indirekte og driver bedre jobmuligheder. Angular Certification Training sigter mod at dække alle disse nye koncepter omkring Enterprise Application Development.