Hur skapar jag en kryssruta i Angular8?

Om du har skapat någon typ av applikationer fram till nu är du redan medveten om den enorma betydelse som en kryssruta har. Inte bara gör det inmatning av data enklare för alla plattformar, men det underlättar också snabb sortering av data eftersom det ofta levereras med listfunktionen. I den här artikeln kommer vi att se hur du skapar en kryssruta i vinkel8 i följande sekvens:

• Skapa kryssruta i Angular8
• Validera kryssrutan
• Lägga till ASync Form Controls

Skapa kryssruta i Angular8

För att förklara stegen för att skapa en kryssruta i Angular8, låt oss ta ett exempel där vi har en lista med order att välja mellan och vi måste detta till användaren i form av en kryssruta. För att följa koden nedan.

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

I det här fallet finns uppgifterna redan hos oss och därför har vi använt koden som delas ovan. I ett verkligt scenario skulle dessa data sannolikt importeras via ett API.

I det här exemplet kan vi också använda reaktiva former för att göra slutresultatet renare och effektivare. För att förstå hur du gör detta, ta en titt på exemplet nedan.

importera {Component} från '@ angular / core' importera {FormBuilder, FormGroup} från '@ angular / forms' @Component ({selector: 'my-app', templateUrl: './app.component.html', styleUrls: ['./app.component.css']}) exportklass AppComponent {form: FormGroup ordersData = [] konstruktör (privat formBuilder: FormBuilder) {this.form = this.formBuilder.group ({orders: []})} Skicka in() { ... } }

I ovanstående kod har vi använt oss av följande.

1. FormGroups: som representerar en enda form.
2. FormControl: vilket representerar en enda post i en enda form.
3. FormArray: som används för att representera en samling av alla FormControls.

I exemplet ovan kan vi också använda FormBuilder-tjänsten för att skapa formuläret det ser ut ungefär så här.

Skicka in

I exemplet ovan har vi bundit formuläret med formelement med hjälp av [formGroup] = ”form”.

kasta dubbelt till int i Java

Nu när grundformuläret har skapats, låt oss lägga till lite dynamik i detsamma via FormArray som visas nedan.

importera {Component} från '@ angular / core' importera {FormBuilder, FormGroup, FormArray, FormControl, ValidatorFn} från '@ angular / forms' @Component ({selector: 'my-app', templateUrl: './app.component .html ', styleUrls: [' ./app.component.css ']}) exportklass AppComponent {form: FormGroup ordersData = [{id: 100, namn:' order 1 '}, {id: 200, namn:' ordning 2 '}, {id: 300, namn:' ordning 3 '}, {id: 400, namn:' ordning 4 '}] konstruktör (privat formBuilder: FormBuilder) {this.form = this.formBuilder.group ({ order: new FormArray ([])}) this.addCheckboxes ()} private addCheckboxes () {this.ordersData.forEach ((o, i) => {const control = new FormControl (i === 0) // if första objektet satt till true, annars false (this.form.controls.orders som FormArray) .push (control)}}} skicka () {const selectedOrderIds = this.form.value.orders .map ((v, i) = > v? this.orders [i] .id: null) .filter (v => v! == null) console.log (selectedOrderIds)}}

I ovanstående exempel har vi efter varje loop iteration skapat en ny FormControl och tagit våra beställningar från FormArray. Vi har ställt in den första kontrollen för att vara sant och därmed har den första ordern som standard markerats ur listan.

Efter detta måste vi binda FormArray-elementet till den här mallen för att få den specifika orderinformation som måste visas för användaren.

{{ordersData [i] .name}} skickar in

Produktion:

Validera kryssrutan i Angular8

Ta en titt på exemplet nedan för att lära dig hur du validerar en kryssruta.

{{ordersData [i] .name}} Minst en order måste väljas skicka ... exportklass 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 lista med kryssrutans värden (booleska) .map (control => control.value) // totalt upp antalet markerade kryssrutor. reducera ((föregående, nästa) => nästa? prev + nästa: föregående, 0) // om summan inte är större än lägsta, returnera felmeddelandet return totalSelected> = min? null: {required: true}} return validator}

Produktion:

Lägga till ASync Form Controls

Nu när du vet hur du lägger till dynamiska kryssrutor, låt oss se hur vi kan lägga till ASync i dessa formulär.

importera {Component} från '@ angular / core' importera {FormBuilder, FormGroup, FormArray, FormControl, ValidatorFn} från '@ angular / forms' import {of} från 'rxjs' @Component ({selector: 'my-app', templateUrl: './app.component.html', styleUrls: ['./app.component.css']}) exportklass AppComponent {form: FormGroup ordersData = [] konstruktör (privat formBuilder: FormBuilder) {this.form = this.formBuilder.group ({orders: new FormArray ([], minSelectedCheckboxes (1))}) // synkron beställningar this.ordersData = this.getOrders () this.addCheckboxes ()} private addCheckboxes () {this.ordersData. forEach ((o, i) => {const control = new FormControl (i === 0) // om det första objektet är satt till true, annars falskt (this.form.controls.orders som FormArray) .push (control)} )} getOrders () {return [{id: 100, name: 'order 1'}, {id: 200, name: 'order 2'}, {id: 300, name: 'order 3'}, {id: 400, namn: 'order 4'}]} skicka () {const selectedOrderIds = this.form.value.orders .map ((v, i) => v? This.ordersData [i]. Id: null) .filter (v => v! == null) console.log (selectedOrderIds)}} ... importera {of} från 'rxjs' ... konstruktör (privat formBuilder: FormBuilder) {this.form = detta. formBuilder.group ({orders: new FormArray ([], minSelectedCheckboxes (1))}) // async orders (kan vara ett http-service-samtal) av (this.getOrders ()). prenumerera (orders => {this.ordersData = beställer this.addCheckboxes ()} // synkrona orders // this.ordersData = this.getOrders () // this.addCheckboxes ()}

Med detta har vi kommit till slutet av vår artikel. Nu när du vet hur du lägger till en kryssruta i din vinkel8 hoppas vi att du kommer att använda den i din dagliga kodning.

Nu när du känner till byggformarna i Angular, kolla in av Edureka. Angular är ett JavaScript-ramverk som används för att skapa skalbara webbapplikationer på klientsidan för företag och prestanda. Eftersom antagandet av kantiga ramar är högt, är prestationshantering av applikationen samhällsstyrd indirekt och driver bättre jobbmöjligheter. Angular Certification Training syftar till att täcka alla dessa nya koncept kring utveckling av Enterprise Application.