Hvordan lage en avkrysningsrute i Angular8?

Hvis du har opprettet noen type applikasjoner til nå, er du allerede klar over den enorme betydningen som en avkrysningsrute har. Ikke bare gjør det innspillingen av data enklere til enhver plattform, men det letter også rask sortering av data, da de ofte leveres med listefunksjonen. I denne artikkelen vil vi se hvordan du oppretter en avkrysningsrute i vinkel8 i følgende sekvens:

• Opprett avkrysningsrute i Angular8
• Validerer avkrysningsruten
• Legge til ASync Form Controls

Opprett avkrysningsrute i Angular8

For å forklare trinnene for å lage en avkrysningsrute i Angular8, la oss ta et eksempel der vi har en liste over ordrer å velge mellom, og vi må dette til brukeren i form av en avkrysningsrute. For å gjøre dette, følg koden nedenfor.

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

I dette tilfellet er dataene allerede til stede hos oss, og derfor har vi brukt koden som er delt ovenfor. I et virkelig verdensscenario vil disse dataene sannsynligvis importeres via et API.

flette sortering beslutningstreet 4 elementer

I dette eksemplet kan vi også bruke reaktive former for å gjøre sluttresultatet renere og effektiv. For å forstå hvordan du gjør dette, ta en titt på eksemplet nedenfor.

importer {Component} fra '@ angular / core' importer {FormBuilder, FormGroup} fra '@ angular / forms' @Component ({selector: 'my-app', templateUrl: './app.component.html', styleUrls: ['./app.component.css']}) eksportklasse AppComponent {form: FormGroup ordersData = [] constructor (privat formBuilder: FormBuilder) {this.form = this.formBuilder.group ({orders: []})} sende inn() { ... } }

I koden ovenfor har vi benyttet oss av følgende.

1. FormGroups: som representerer en enkelt form.
2. FormControl: som representerer en enkelt oppføring i en enkelt form.
3. FormArray: som brukes til å representere en samling av alle FormControls.

I eksemplet ovenfor kan vi også bruke FormBuilder-tjenesten for å lage skjemaet det vil se ut som dette.

sende inn

I eksemplet ovenfor har vi bundet skjemaet med skjemaelement ved å bruke [formGroup] = ”form”.

Nå som det grunnleggende skjemaet er opprettet, la oss legge til litt dynamikk i det samme ved bruk av FormArray som vist nedenfor.

sorter matrise c ++

importer {Component} fra '@ angular / core' importer {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:' ordre 2 '}, {id: 300, navn:' ordre 3 '}, {id: 400, navn:' ordre 4 '}] konstruktør (privat formBuilder: FormBuilder) {this.form = this.formBuilder.group ({ ordrer: nye FormArray ([])}) this.addCheckboxes ()} private addCheckboxes () {this.ordersData.forEach ((o, i) => {const control = new FormControl (i === 0) // if første element satt til true, ellers false (this.form.controls.orders som FormArray) .push (control)}}} send inn () {const selectedOrderIds = this.form.value.orders .map ((v, i) = > v? this.orders [i] .id: null) .filter (v => v! == null) console.log (valgtOrderIds)}}

I eksemplet ovenfor har vi etter hver loop-iterasjon opprettet en ny FormControl og tatt våre bestillinger fra FormArray. Vi har satt den første kontrollen til å være sann, og dermed er den første ordren sjekket ut av listen som standard.

Etter dette må vi binde FormArray-elementet til denne malen for å få spesifikk ordreinformasjon som må vises for brukeren.

{{ordersData [i] .name}} sender inn

Produksjon:

Validerer avkrysningsruten i Angular8

Ta en titt på eksemplet nedenfor for å lære hvordan du validerer en avkrysningsrute.

{{ordersData [i] .name}} Minst én ordre må velges send inn ... eksportklasse AppComponent {form: FormGroup ordersData = [...] constructor (privat 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 // få en liste over avmerkingsverdier (boolsk) .map (control => control.value) // total opp antall avmerkede avmerkingsbokser. redusere ((forrige, neste) => neste? forrige + neste: forrige, 0) // hvis summen ikke er større enn minimumet, returner feilmeldingen retur totaltVelgt> = min? null: {required: true}} return validator}

Produksjon:

Legge til ASync Form Controls

Nå som du vet hvordan du legger til dynamiske avkrysningsruter, la oss se hvordan vi kan legge til ASync i disse skjemaene.

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 ({orders: new 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 satt til true, ellers 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, navn: 'ordre 4'}]} send inn () {const selectedOrderIds = this.form.value.orders .map ((v, i) => v? This.ordersData [i] .id: null) .filter (v => v! == null) console.log (valgtOrderIds)}} ... importer {av} fra 'rxjs' ... konstruktør (privat formBuilder: FormBuilder) {this.form = dette. formBuilder.group ({orders: new FormArray ([], minSelectedCheckboxes (1))}) // async orders (kan være et http-serviceanrop) av (this.getOrders ()). abonner (orders => {this.ordersData = bestiller this.addCheckboxes ()} // synkron ordrer // this.ordersData = this.getOrders () // this.addCheckboxes ()}

Med dette har vi kommet til slutten av artikkelen vår. Nå som du vet hvordan du legger til en avkrysningsrute i angular8, håper vi at du vil bruke den i din daglige koding.

Nå som du kjenner byggesteinene til Angular, sjekk ut av Edureka. Angular er et JavaScript-rammeverk som brukes til å lage skalerbare, applikasjons- og ytelsesprogrammer på klientsiden. Med adopsjon av kantete rammeverk er ytelsesstyring av applikasjonen indirekte drevet for bedre jobbmuligheter. Angular Certification Training tar sikte på å dekke alle disse nye konseptene rundt Enterprise Application Development.

hvordan dynamisk tildeles en matrise i java