Kuidas luua ruut Angular8-s?

Kui olete siiani loonud mis tahes tüüpi rakendusi, olete juba teadlik tohutust olulisusest, mida märkeruut omab. See mitte ainult ei hõlbusta andmete sisestamist mis tahes platvormile, vaid hõlbustab ka andmete kiiret sorteerimist, kuna need on sageli pakendatud loendifunktsiooniga. Selles artiklis näeme, kuidas nurga 8 märkeruut luua järgmises järjestuses:

• Looge märkeruut nurgas8
• Märkekasti kinnitamine
• ASynci vormikontrollide lisamine

Looge märkeruut nurgas8

Angular8-s märkeruudu loomise sammude selgitamiseks võtame näite, kus meil on nimekiri tellimustest, mille vahel valida ja peame selle märkeruudu kujul kasutajale tegema. Selleks järgige allolevat koodi.

const orderData = [{id: 1, nimi: 'tellimus 1'}, {id: 2, nimi: 'tellimus 2'}, {id: 3, nimi: 'tellimus 3'}, {id: 4, nimi: 'tellimus 4'}]

Sel juhul on andmed juba meie juures ja seetõttu oleme kasutanud ülaltoodud koodi. Reaalses maailmas stsenaariumi korral imporditakse need andmed tõenäoliselt API kaudu.

Selles näites saame lõpptulemuse puhtamaks ja tõhusamaks muutmiseks kasutada ka reaktiivseid vorme. Selle mõistmiseks vaadake allolevat näidet.

import {Component} kaustast '@ nurk / tuum' import {FormBuilder, FormGroup} kaustast '@ angular / forms' @ Component ({selector: 'my-app', templateUrl: './app.component.html', styleUrls: ['./app.component.css']}) ekspordiklass AppComponent {vorm: FormGroup orderData = [] konstruktor (privaatne formBuilder: FormBuilder) {this.form = this.formBuilder.group ({tellimused: []})} Esita() { ... } }

Ülaltoodud koodis oleme kasutanud järgmist.

sügavõpe vs masinõpe vs mustrituvastus

1. FormGroups: mis tähistab ühte vormi.
2. FormControl: mis tähistab ühte vormi ühte kirjet.
3. FormArray: mida kasutatakse kõigi FormControlsi kogude esindamiseks.

Ülaltoodud näites saame vormi loomiseks kasutada ka teenust FormBuilder, see näeb välja umbes selline.

Esita

Ülaltoodud näites oleme vormi vormielemendiga sidunud, kasutades [formGroup] = ”vorm”.

Nüüd, kui põhivorm on loodud, lisagem FormArray abil samale dünaamikat, nagu allpool näidatud.

importige {Component} kaustast '@ angular / core' importige {FormBuilder, FormGroup, FormArray, FormControl, ValidatorFn} kaustast '@ angular / forms' @Component ({selector: 'my-app', templateUrl: './app.component .html ', styleUrls: [' ./app.component.css ']}) ekspordiklassi AppComponent {vorm: FormGroup orderData = [{id: 100, nimi:' order 1 '}, {id: 200, name:' tellimus 2 '}, {id: 300, nimi:' tellimus 3 '}, {id: 400, nimi:' tellimus 4 '}] konstruktor (privaatne formBuilder: FormBuilder) {this.form = this.formBuilder.group ({ tellimused: uus FormArray ([])}) this.addCheckboxes ()} private addCheckboxes () {this.ordersData.forEach ((o, i) => {const control = new FormControl (i === 0) // kui esimene üksus on seatud väärtusele true, muul juhul vale (this.form.controls.orders as FormArray) .push (kontroll)})} submit () {const selectedOrderIds = this.form.value.orders .map ((v, i) = > v? this.orders [i] .id: null) .filter (v => v! == null) console.log (selectedOrderIds)}}

Ülaltoodud näites oleme pärast igat tsükli iteratsiooni loonud uue FormControli ja võtnud oma tellimused vormingust FormArray. Oleme seadistanud esimese juhtelemendi tõeseks ja seega on esimene järjekord vaikimisi loendist välja märgitud.

Pärast seda peame selle malliga siduma elemendi FormArray, et saada konkreetne tellimusteave, mida tuleb kasutajale kuvada.

{{orderData [i] .nimi}} esitage

Väljund:

Märkekasti kinnitamine nurgas8

Vaadake allolevat näidet, et teada saada, kuidas märkeruuti kinnitada.

{{orderData [i] .name}} Tuleb valida vähemalt üks tellimus esita ... ekspordi klass AppComponent {vorm: FormGroup orderData = [...] konstruktor (privaatne formBuilder: FormBuilder) {this.form = this.formBuilder .group ({tellimused: uus FormArray ([], minSelectedCheckboxes (1))}) see.addCheckboxes ()} ...} funktsioon minSelectedCheckboxes (min = 1) {const valideerija: ValidatorFn = (formArray: FormArray) => { const totalSelected = formArray.controls // saab nimekirja märkeruutude väärtustest (boolean). map (kontroll => control.value) // kokku märgitud ruutude arv .reduce ((prev, next) => next? prev + järgmine: eelmine, 0) // kui summa ei ole suurem kui miinimum, tagastage tõrketeade return totalSelected> = min? null: {kohustuslik: tõene}} tagasta valideerija}

Väljund:

ASynci vormikontrollide lisamine

Nüüd, kui teate, kuidas dünaamilisi märkeruute lisada, vaadake, kuidas saaksime neile vormidele ASynci lisada.

impordi {Component} seadmest '@ angular / core' import {FormBuilder, FormGroup, FormArray, FormControl, ValidatorFn} kaustast '@ angular / forms' import {of} kaustast 'rxjs' @Component ({selector: 'my-app', templateUrl: './app.component.html', styleUrls: ['./app.component.css']}) ekspordiklassi AppComponent {vorm: FormGroup orderData = [] konstruktor (privaatne vormiehitaja: FormBuilder) {this.form = this.formBuilder.group ({orderid: uus FormArray ([], minSelectedCheckboxes (1))}) // sünkroonsed tellimused this.ordersData = this.getOrders () this.addCheckboxes ()} private addCheckboxes () {this.ordersData. forEach ((o, i) => {const control = new FormControl (i === 0) // kui esimene üksus on seatud väärtusele true, muul juhul false (this.form.controls.orders as FormArray) .push (control)} )} getOrders () {return [{id: 100, nimi: 'tellimus 1'}, {id: 200, nimi: 'tellimus 2'}, {id: 300, nimi: 'tellimus 3'}, {id: 400, nimi: 'tellimus 4'}]} esita () {const selectedOrderIds = this.form.value.orders .map ((v, i) => v? This.ordersData [i] .id: null) .filter (v => v! == null) console.log (selectedOrderIds)}} ... importige {of} failist 'rxjs' ... konstruktor (private formBuilder: FormBuilder) {this.form = this. formBuilder.group ({orderid: uus FormArray ([], minSelectedCheckboxes (1))}) // async-tellimused (võivad olla http-teenuse kõned) saidile (this.getOrders ()). tellige (order => {this.ordersData = tellib this.addCheckboxes ()}) // sünkroonsed tellimused // this.ordersData = this.getOrders () // this.addCheckboxes ()}

Sellega oleme jõudnud oma artikli lõppu. Nüüd, kui teate, kuidas oma Angular8-le märkeruut lisada, loodame, et kasutate seda oma igapäevases kodeerimisel.

kuidas Java-s tostringi kasutada

Nüüd, kui teate nurkade ehitusmaterjale, vaadake järgmist autor Edureka. Angular on JavaScripti raamistik, mida kasutatakse skaleeritavate, ettevõtte ja jõudlusega kliendipoolsete veebirakenduste loomiseks. Kuna nurgaraamistiku kasutuselevõtt on kõrge, on rakenduse jõudlusjuhtimine kogukonnapõhine, parandades ka paremaid töövõimalusi. Nurgasertifitseerimise koolituse eesmärk on hõlmata kõiki neid uusi kontseptsioone ettevõtte rakenduste arendamise ümber.