Kako stvoriti potvrdni okvir u Angular8?

Potvrdni okvir u Angular8 olakšava unos podataka na bilo koju platformu, a omogućuje i brzo sortiranje podataka jer su u paketu s značajkom popisa.

Ako ste do sada stvarali bilo koju vrstu aplikacija, već ste svjesni velikog značaja koji ima potvrdni okvir. Ne samo da olakšava unos podataka na bilo koju platformu, već i olakšava brzo sortiranje podataka jer se često isporučuju sa značajkom popisa. U ovom ćemo članku vidjeti kako stvoriti potvrdni okvir u angular8 u sljedećem slijedu:

Stvorite potvrdni okvir u Angular8

Da bismo objasnili korake stvaranja potvrdnog okvira u Angular8, uzmimo primjer gdje imamo popis narudžbi na izbor i to moramo korisniku u obliku potvrdnog okvira. Da biste to učinili, slijedite donji kod.





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

U ovom su slučaju podaci već prisutni kod nas i stoga smo iskoristili gore podijeljeni kôd. U stvarnom scenariju ovi bi se podaci najvjerojatnije uvozili putem API-ja.

U ovom primjeru također možemo koristiti reaktivne oblike kako bismo krajnji rezultat učinili čišćim i učinkovitijim. Da biste razumjeli kako to učiniti, pogledajte primjer u nastavku.



import {Component} iz '@ angular / core' import {FormBuilder, FormGroup} iz '@ angular / forms' @Component ({selector: 'my-app', templateUrl: './app.component.html', styleUrls: ['./app.component.css']}) klasa izvoza AppComponent {obrazac: FormGroup ordersData = [] konstruktor (privatni formBuilder: FormBuilder) {this.form = this.formBuilder.group ({naloga: []})}} podnijeti() { ... } }

U gornjem kodu koristili smo sljedeće.

  1. Grupe obrazaca: koji predstavlja jedan oblik.
  2. FormControl: što predstavlja jedan ulazak u jedan oblik.
  3. Niz obrazaca: koja se koristi za predstavljanje zbirke svih FormControlsa.

U gornjem primjeru također možemo koristiti uslugu FormBuilder za stvaranje obrasca koji će izgledati otprilike ovako.

podnijeti

U gornjem primjeru povezali smo obrazac s elementom obrasca pomoću [formGroup] = ”obrazac”.



Sad kad je stvoren osnovni obrazac, dodamo mu malo dinamičnosti upotrebom FormArray kao što je prikazano dolje.

uvoz {Komponenta} iz '@ angular / core' import {FormBuilder, FormGroup, FormArray, FormControl, ValidatorFn} iz '@ angular / forms' @Component ({selector: 'my-app', templateUrl: './app.component .html ', styleUrls: [' ./app.component.css ']}) klasa izvoza AppComponent {obrazac: FormGroup ordersData = [{id: 100, name:' order 1 '}, {id: 200, name:' nalog 2 '}, {id: 300, name:' order 3 '}, {id: 400, name:' order 4 '}] konstruktor (privatni formBuilder: FormBuilder) {this.form = this.formBuilder.group ({ narudžbe: novi FormArray ([])}) this.addCheckboxes ()} privatni addCheckboxes () {this.ordersData.forEach ((o, i) => {const control = new FormControl (i === 0) // if prva stavka postavljena na true, inače 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)}}

U gornjem primjeru, nakon svake iteracije petlje stvorili smo novi FormControl i preuzeli svoje narudžbe iz FormArray. Prvu smo kontrolu postavili istinitom i stoga je prva narudžba prema zadanim postavkama provjerena s popisa.

Nakon toga moramo povezati element FormArray s ovim predloškom kako bismo dobili određene informacije o narudžbi koje trebaju biti prikazane korisniku.

kako ispisati git zapisnik
{{ordersData [i] .name}} pošalji

Izlaz:

Izlaz - potvrdni okvir u angular8- edureka

Potvrđivanje potvrdnog okvira u Angular8

Pogledajte donji primjer da biste saznali kako potvrditi potvrdni okvir.

{{ordersData [i] .name}} Najmanje jedna narudžba mora biti odabrana submit ... export class AppComponent {form: FormGroup ordersData = [...] konstruktor (privatni formBuilder: FormBuilder) {this.form = this.formBuilder .group ({naloga: novi FormArray ([], minSelectedCheckboxes (1))}) this.addCheckboxes ()} ...} funkcija minSelectedCheckboxes (min = 1) {const validator: ValidatorFn = (formArray: FormArray) => { const totalSelected = formArray.controls // dobivamo popis vrijednosti potvrdnih okvira (boolean) .map (control => control.value) // ukupan broj provjerenih potvrdnih okvira .reduce ((prethodni, sljedeći) => sljedeći? prev + next: prev, 0) // ako zbroj nije veći od minimuma, vratite poruku o pogrešci return totalSelected> = min? null: {required: true}} return validator}

Izlaz:

Dodavanje ASync kontrola obrasca

Sad kad znate kako dodati dinamičke potvrdne okvire, pogledajmo kako možemo dodati ASync u ove obrasce.

uvoz {Komponenta} iz '@ angular / core' uvoz {FormBuilder, FormGroup, FormArray, FormControl, ValidatorFn} iz '@ angular / forms' import {of} iz 'rxjs' @Component ({selektor: 'my-app', templateUrl: './app.component.html', styleUrls: ['./app.component.css']}) klasa izvoza AppComponent {obrazac: FormGroup ordersData = [] konstruktor (privatni formBuilder: FormBuilder) {this.form = this.formBuilder.group ({narudžbe: novi FormArray ([], minSelectedCheckboxes (1))}) // sinkroni nalozi this.ordersData = this.getOrders () this.addCheckboxes ()} private addCheckboxes () {this.ordersData. forEach ((o, i) => {const control = new FormControl (i === 0) // ako je prva stavka postavljena na true, inače 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, naziv: 'narudžba 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 ({naloga: novi FormArray ([], minSelectedCheckboxes (1))}) // asinkronizirani nalozi (može biti poziv usluge http) od (this.getOrders ()). pretplatite se (nalozi => {this.ordersData = naručuje this.addCheckboxes ()}) // sinkroni nalozi // this.ordersData = this.getOrders () // this.addCheckboxes ()}

Ovime smo došli do kraja našeg članka. Sad kad znate kako dodati kvačicu u svoj kutni8, nadamo se da ćete ga koristiti u svakodnevnom kodiranju.

Sad kad znate blokove Angulala, pogledajte od Edureke. Angular je JavaScript okvir koji se koristi za stvaranje skalabilnih, poslovnih i izvedbenih web aplikacija na strani klijenta. S obzirom da je usvajanje Angular framework-a visoko, upravljanje izvedbom aplikacije neizravno potiče bolju priliku za posao. Trening kutne certifikacije ima za cilj obuhvatiti sve ove nove koncepte oko razvoja poslovnih aplikacija.