Hoe maak je een checkbox aan in Angular8?

Als u tot nu toe een type applicatie hebt gemaakt, bent u zich al bewust van de enorme betekenis die een selectievakje heeft. Het maakt niet alleen de invoer van gegevens gemakkelijker op elk platform, maar het vergemakkelijkt ook het snel sorteren van gegevens, aangezien het vaak wordt geleverd met de lijstfunctie. In dit artikel zullen we zien hoe je een checkbox in angular8 kunt maken in de volgende volgorde:

• Maak een selectievakje in Angular8
• Het selectievakje valideren
• ASync-formulierbesturingselementen toevoegen

Maak een selectievakje in Angular8

Om de stappen voor het maken van een selectievakje in Angular8 uit te leggen, nemen we een voorbeeld waarbij we een lijst met bestellingen hebben waaruit we kunnen kiezen en we moeten dit aan de gebruiker in de vorm van een selectievakje. Volg hiervoor de onderstaande code.

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

In dit geval zijn de gegevens al bij ons aanwezig en daarom hebben we gebruik gemaakt van de bovenstaande gedeelde code. In een echt scenario zouden deze gegevens hoogstwaarschijnlijk via een API worden geïmporteerd.

In dit voorbeeld kunnen we ook gebruik maken van reactieve vormen om het eindresultaat schoner en efficiënter te maken. Bekijk het onderstaande voorbeeld om te begrijpen hoe u dit moet doen.

importeer {Component} vanuit '@ angular / core' importeer {FormBuilder, FormGroup} vanuit '@ angular / formulieren' @Component ({selector: 'my-app', templateUrl: './app.component.html', styleUrls: ['./app.component.css']}) exportklasse AppComponent {form: FormGroup ordersData = [] constructor (private formBuilder: FormBuilder) {this.form = this.formBuilder.group ({orders: []})} indienen () {...}}

In bovenstaande code hebben we gebruik gemaakt van het volgende.

1. FormGroups: die een enkel formulier vertegenwoordigt.
2. FormControl: die een enkele vermelding in een enkel formulier vertegenwoordigt.
3. FormArray: die wordt gebruikt om een ​​verzameling van alle FormControls weer te geven.

In het bovenstaande voorbeeld kunnen we ook gebruik maken van de FormBuilder-service om het formulier te maken dat er ongeveer zo uitziet.

indienen

In het bovenstaande voorbeeld hebben we het formulier aan het formulierelement gebonden door [formGroup] = ”form” te gebruiken.

Nu het basisformulier is gemaakt, kunnen we er wat dynamiek aan toevoegen door FormArray te gebruiken, zoals hieronder wordt weergegeven.

hoe XML-bestand in java te ontleden

importeer {Component} vanuit '@ angular / core' importeer {FormBuilder, FormGroup, FormArray, FormControl, ValidatorFn} vanuit '@ angular / formulieren' @Component ({selector: 'my-app', templateUrl: './app.component .html ', styleUrls: [' ./app.component.css ']}) exportklasse AppComponent {form: FormGroup ordersData = [{id: 100, naam:' order 1 '}, {id: 200, naam:' order 2 '}, {id: 300, naam:' order 3 '}, {id: 400, naam:' order 4 '}] constructor (private formBuilder: FormBuilder) {this.form = this.formBuilder.group ({ orders: new FormArray ([])}) this.addCheckboxes ()} private addCheckboxes () {this.ordersData.forEach ((o, i) => {const control = new FormControl (i === 0) // if eerste item ingesteld op true, anders 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)}}

In het bovenstaande voorbeeld hebben we na elke herhalingsherhaling een nieuwe FormControl gemaakt en onze orders overgenomen van FormArray. We hebben ingesteld dat de eerste controle waar is en dus is de eerste bestelling standaard van de lijst afgevinkt.

Hierna moeten we het FormArray-element aan deze sjabloon binden om de specifieke bestelinformatie te krijgen die aan de gebruiker moet worden weergegeven.

{{ordersData [i] .name}} verzenden

Uitgang:

Validatie van het selectievakje in Angular8

Bekijk het onderstaande voorbeeld om te zien hoe u een selectievakje valideert.

{{ordersData [i] .name}} Er moet ten minste één order worden geselecteerd submit ... export class AppComponent {form: FormGroup ordersData = [...] constructor (private formBuilder: FormBuilder) {this.form = this.formBuilder .group ({orders: new FormArray ([], minSelectedCheckboxes (1))}) this.addCheckboxes ()} ...} functie minSelectedCheckboxes (min = 1) {const validator: ValidatorFn = (formArray: FormArray) => { const totalSelected = formArray.controls // verkrijg een lijst met checkbox-waarden (boolean) .map (control => control.value) // som het aantal aangevinkte selectievakjes op .reduce ((prev, next) => next? prev + next: prev, 0) // als het totaal niet groter is dan het minimum, retourneer dan de foutmelding return totalSelected> = min? null: {required: true}} return validator}

Uitgang:

ASync-formulierbesturingselementen toevoegen

Nu u weet hoe u dynamische selectievakjes kunt toevoegen, laten we eens kijken hoe we ASync aan deze formulieren kunnen toevoegen.

importeer {Component} uit '@ angular / core' importeer {FormBuilder, FormGroup, FormArray, FormControl, ValidatorFn} uit '@ angular / Forms' import {of} uit 'rxjs' @Component ({selector: 'my-app', templateUrl: './app.component.html', styleUrls: ['./app.component.css']}) exportklasse AppComponent {form: FormGroup ordersData = [] constructor (private formBuilder: FormBuilder) {this.form = this.formBuilder.group ({orders: new FormArray ([], minSelectedCheckboxes (1))}) // synchrone orders this.ordersData = this.getOrders () this.addCheckboxes ()} private addCheckboxes () {this.ordersData. forEach ((o, i) => {const control = new FormControl (i === 0) // als het eerste item is ingesteld op true, anders false (this.form.controls.orders as FormArray) .push (control)} )} getOrders () {retourneer [{id: 100, naam: 'order 1'}, {id: 200, naam: 'order 2'}, {id: 300, naam: 'order 3'}, {id: 400, naam: '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} van 'rxjs' ... constructor (private formBuilder: FormBuilder) {this.form = this. formBuilder.group ({orders: new FormArray ([], minSelectedCheckboxes (1))}) // async-orders (kan een http-serviceaanroep zijn) van (this.getOrders ()). subscribe (orders => {this.ordersData = orders this.addCheckboxes ()}) // synchrone orders // this.ordersData = this.getOrders () // this.addCheckboxes ()}

Hiermee zijn we aan het einde van ons artikel gekomen. Nu u weet hoe u een selectievakje aan uw angular8 kunt toevoegen, hopen we dat u er gebruik van zult maken bij uw dagelijkse codering.

javascript verkrijg lengte van array

Nu je de bouwstenen van Angular kent, kun je het door Edureka. Angular is een JavaScript-framework dat wordt gebruikt om schaalbare, zakelijke en performante webtoepassingen aan de clientzijde te maken. Omdat Angular framework-acceptatie hoog is, wordt het prestatiebeheer van de applicatie indirect gestuurd door de gemeenschap, wat leidt tot betere kansen op werk. De Angular Certification Training is bedoeld om al deze nieuwe concepten rond Enterprise Application Development te behandelen.