Kako stvoriti potvrdni okvir u Angular8?

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
• Potvrđivanje potvrdnog okvira
• Dodavanje ASync kontrola obrasca

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:

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.