Kako ustvariti potrditveno polje v Angular8?

Če ste do zdaj ustvarjali kakršno koli aplikacijo, se že zavedate velikega pomena, ki ga ima potrditveno polje. Ne samo, da olajša vnos podatkov na katero koli platformo, ampak tudi olajša hitro razvrščanje podatkov, saj so pogosto v paketu s funkcijo seznama. V tem članku bomo videli, kako ustvarimo potrditveno polje v angular8 v naslednjem zaporedju:

• Ustvarite potrditveno polje v Angular8
• Potrditev potrditvenega polja
• Dodajanje kontrolnikov obrazca ASync

Ustvarite potrditveno polje v Angular8

Za razlago korakov ustvarjanja potrditvenega polja v Angular8 si vzemimo primer, kjer imamo na izbiro seznam naročil, ki jih moramo uporabniku podati v obliki potrditvenega polja. Za to sledite spodnji kodi.

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

V tem primeru so podatki že prisotni pri nas, zato smo uporabili zgoraj navedeno kodo. V resničnem scenariju bi bili ti podatki najverjetneje uvoženi prek API-ja.

V tem primeru lahko uporabimo tudi reaktivne oblike, da bo končni rezultat čistejši in učinkovitejši. Če želite razumeti, kako to storiti, si oglejte spodnji primer.

uvoz {Component} iz '@ angular / core' import {FormBuilder, FormGroup} iz '@ angular / forms' @Component ({selector: 'my-app', templateUrl: './app.component.html', styleUrls: ['./app.component.css']}) izvozni razred AppComponent {form: FormGroup ordersData = [] konstruktor (zasebni formBuilder: FormBuilder) {this.form = this.formBuilder.group ({naročila: []})}} submit () {...}}

V zgornji kodi smo uporabili naslednje.

1. Skupine obrazcev: ki predstavlja eno samo obliko.
2. FormControl: ki predstavlja en vnos v eno samo obliko.
3. ArrayArray: ki se uporablja za predstavitev zbirke vseh FormControls.

V zgornjem primeru lahko uporabimo tudi storitev FormBuilder za ustvarjanje obrazca, ki bo videti nekako tako.

oddajte

V zgornjem primeru smo obrazec povezali z elementom obrazca z uporabo [formGroup] = ”obrazec”.

Zdaj, ko je bil ustvarjen osnovni obrazec, mu dodamo nekaj dinamičnosti z uporabo FormArray, kot je prikazano spodaj.

razvrščanje polja v programu c ++

uvozi {Component} iz '@ angular / core' import {FormBuilder, FormGroup, FormArray, FormControl, ValidatorFn} iz '@ angular / forms' @Component ({selector: 'my-app', templateUrl: './app.component .html ', styleUrls: [' ./app.component.css ']}) izvozni razred AppComponent {obrazec: FormGroup ordersData = [{id: 100, name:' order 1 '}, {id: 200, name:' naročilo 2 '}, {id: 300, name:' order 3 '}, {id: 400, name:' order 4 '}] konstruktor (zasebni formBuilder: FormBuilder) {this.form = this.formBuilder.group ({ naročila: nov FormArray ([])}) this.addCheckboxes ()} zasebni addCheckboxes () {this.ordersData.forEach ((o, i) => {const control = new FormControl (i === 0) // if prvi element nastavljen na true, sicer false (this.form.controls.orders kot 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)}}

V zgornjem primeru smo po vsaki ponovitvi zanke ustvarili nov FormControl in naročila prevzeli iz FormArray. Prvo kontrolo smo nastavili kot resnico, zato je bilo prvo naročilo privzeto preverjeno s seznama.

Po tem moramo element FormArray vezati na to predlogo, da dobimo posebne informacije o naročilu, ki jih je treba prikazati uporabniku.

{{ordersData [i] .name}} odda

Izhod:

Preverjanje potrditvenega polja v Angular8

Oglejte si spodnji primer, če želite izvedeti, kako potrditi potrditveno polje.

{{ordersData [i] .name}} Izbrati je treba vsaj eno naročilo submit ... export class AppComponent {form: FormGroup ordersData = [...] konstruktor (zasebni formBuilder: FormBuilder) {this.form = this.formBuilder .group ({naročila: nov FormArray ([], minSelectedCheckboxes (1))}) this.addCheckboxes ()} ...} funkcija minSelectedCheckboxes (min = 1) {const validator: ValidatorFn = (formArray: FormArray) => { const totalSelected = formArray.controls // dobimo seznam vrednosti potrditvenih polj (logično) .map (control => control.value) // seštejemo število označenih potrditvenih polj .reduce ((prejšnja, naslednja) => naslednja? prejšnja + naprej: prev, 0) // če vsota ni večja od najmanjše vrednosti, vrnite sporočilo o napaki vrnite totalSelected> = min? null: {required: true}} return validator}

Izhod:

Dodajanje kontrolnikov obrazca ASync

Zdaj, ko veste, kako dodati dinamična potrditvena polja, poglejmo, kako lahko tem obrazcem dodamo ASync.

uvoz {Komponenta} iz '@ angular / core' uvoz {FormBuilder, FormGroup, FormArray, FormControl, ValidatorFn} iz '@ angular / forms' import {of} iz 'rxjs' @Component ({selector: 'my-app', templateUrl: './app.component.html', styleUrls: ['./app.component.css']}) izvozni razred AppComponent {form: FormGroup ordersData = [] konstruktor (zasebni formBuilder: FormBuilder) {this.form = this.formBuilder.group ({order: new FormArray ([], minSelectedCheckboxes (1))}) // sinhrono naroča this.ordersData = this.getOrders () this.addCheckboxes ()} private addCheckboxes () {this.ordersData. forEach ((o, i) => {const control = new FormControl (i === 0) // če je prvi element nastavljen na true, sicer false (this.form.controls.orders kot FormArray) .push (control)} )} getOrders () {return [{id: 100, name: 'order 1'}, {id: 200, name: 'order 2'}, {id: 300, name: 'order 3'}, {id: 400, ime: 'naročilo 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} from 'rxjs' ... constructor (private formBuilder: FormBuilder) {this.form = this. formBuilder.group ({orders: new FormArray ([], minSelectedCheckboxes (1))}) // asinhronska naročila (lahko je klic storitve http) od (this.getOrders ()). naročite se (naročila => {this.ordersData = naroči this.addCheckboxes ()}) // sinhroni nalogi // this.ordersData = this.getOrders () // this.addCheckboxes ()}

S tem smo prišli do konca našega članka. Zdaj, ko veste, kako dodati potrditveno polje v svoj kotni8, upamo, da ga boste uporabili pri vsakodnevnem kodiranju.

pretvori dvojno v celo število

Zdaj, ko poznate gradnike Angularja, si oglejte avtor Edureka. Angular je ogrodje JavaScript, ki se uporablja za ustvarjanje razširljivih, poslovnih in zmogljivih spletnih aplikacij na strani odjemalca. Ker je sprejemanje ogrodja ogrodja visoko, upravljanje uspešnosti aplikacije posredno spodbuja boljše zaposlitvene možnosti. Namen usposabljanja za certificirano certificiranje je zajeti vse te nove koncepte o razvoju aplikacij v podjetju.