Hogyan lehet jelölőnégyzetet létrehozni az Angular8-ban?

Ha eddig bármilyen típusú alkalmazást készített, akkor már tisztában van a jelölőnégyzet hatalmas jelentőségével. Nem csak megkönnyíti az adatok bevitelét bármely platformra, hanem megkönnyíti az adatok gyors rendezését is, mivel gyakran a lista funkcióval együtt jár. Ebben a cikkben megtudhatjuk, hogyan hozhatunk létre jelölőnégyzetet az angular8-ban a következő sorrendben:

• Jelölőnégyzet létrehozása az Angular8 mezőben
• A jelölőnégyzet ellenőrzése
• ASync űrlapvezérlők hozzáadása

Jelölőnégyzet létrehozása az Angular8 mezőben

Az Angular8 jelölőnégyzet létrehozásának lépéseinek elmagyarázásához vegyünk egy példát, ahol van egy listánk a megrendelések közül, amelyek közül választhatunk, és ezt be kell mutatnunk a felhasználónak egy jelölőnégyzet formájában. Ehhez kövesse az alábbi kódot.

const orderData = [{id: 1, név: 'megrendelés 1'}, {id: 2, név: 'megrendelés 2'}, {id: 3, név: 'megrendelés 3'}, {id: 4, név: '4. rend'}]

Ebben az esetben az adatok már vannak nálunk, ezért felhasználtuk a fent megosztott kódot. Valódi helyzetben ezeket az adatokat nagy valószínűséggel API-n keresztül importálnák.

Ebben a példában reaktív formákat is felhasználhatunk, hogy a végeredmény tisztább és hatékonyabb legyen. Ennek megértése érdekében nézze meg az alábbi példát.

importálja a (z) {Component} elemet a '@ angular / core' fájlból a (z) importáláshoz {FormBuilder, FormGroup} a '@ angular / forms' @ Componentből ({selector: 'my-app', templateUrl: './app.component.html', styleUrls: ['./app.component.css']}) exportálási osztály AppComponent {form: FormGroup orderData = [] konstruktor (privát formBuilder: FormBuilder) {this.form = this.formBuilder.group ({rendelések: []})} Beküldés() { ... } }

A fenti kódban a következőket használtuk fel.

1. FormGroups: amely egyetlen formát képvisel.
2. FormControl: amely egyetlen bejegyzést jelent egyetlen formában.
3. FormArray: amely az összes FormControl gyűjteményét jelenti.

A fenti példában a FormBuilder szolgáltatást is felhasználhatjuk az űrlap létrehozásához, amely így fog kinézni.

dobja kettős int az java-ban

Beküldés

A fenti példában az űrlapot a [formGroup] = ”form” használatával form elemhez kötöttük.

Most, hogy elkészült az alap űrlap, adjunk hozzá némi dinamikát ugyanahhoz a FormArray használatával, az alábbiak szerint.

importálja a (z) {Component} elemet a '@ angular / core' fájlból importálva {FormBuilder, FormGroup, FormArray, FormControl, ValidatorFn} a '@ angular / form' @ Componentből ({selector: 'my-app', templateUrl: './app.component .html ', styleUrls: [' ./app.component.css ']}) exportálási osztály AppComponent {form: FormGroup megrendelésekData = [{id: 100, név:' megrendelés 1 '}, {id: 200, név:' rendelés 2 '}, {id: 300, név:' megrendelés 3 '}, {id: 400, név:' 4. megrendelés '}] konstruktor (privát formBuilder: FormBuilder) {this.form = this.formBuilder.group ({ megrendelések: new FormArray ([])}) this.addCheckboxes ()} private addCheckboxes () {this.ordersData.forEach ((o, i) => {const control = new FormControl (i === 0) // if az első elem igaz, másképpen hamis (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)}}

A fenti példában minden ciklusos iteráció után létrehoztunk egy új FormControl-t, és megrendeléseinket a FormArray-től vettük át. Az első vezérlőt igaznak állítottuk be, és így az első sorrendet alapértelmezés szerint kiírtuk a listáról.

Ezek után össze kell kötnünk a FormArray elemet ehhez a sablonhoz, hogy megkapjuk azokat a konkrét megrendelési információkat, amelyeket meg kell jeleníteni a felhasználó számára.

{{megrendelésekData [i] .név}} beküldés

Kimenet:

mi a névtér a c ++ - ban

A jelölőnégyzet ellenőrzése szögben8

Nézze meg az alábbi példát, hogy megtudja, hogyan érvényesítheti a jelölőnégyzetet.

{{megrendelésekData [i] .név}} Legalább egy rendelést ki kell választani beküldés ... export osztály AppComponent {form: FormGroup megrendelésekData = [...] konstruktor (privát formBuilder: FormBuilder) {this.form = this.formBuilder .group ({rendelések: új FormArray ([], minSelectedCheckboxes (1))}) this.addCheckboxes ()} ...} függvény minSelectedCheckboxes (min = 1) {const validator: ValidatorFn = (formArray: FormArray) => { const totalSelected = formArray.controls // a jelölőnégyzet értékeinek felsorolása (logikai érték). map (vezérlő => control.value) // összesíti a bejelölt jelölőnégyzetek számát .reduce ((előző, következő) => következő? prev + következő: prev, 0) // ha az összeg nem nagyobb, mint a minimum, adja vissza a hibaüzenetet return totalSelected> = min? null: {kötelező: true}} visszaigazoló}

Kimenet:

ASync űrlapvezérlők hozzáadása

Most, hogy tudja, hogyan kell dinamikus jelölőnégyzeteket hozzáadni, nézze meg, hogyan adhatjuk hozzá az ASync alkalmazást ezekhez az űrlapokhoz.

importálja a (z) {Component} elemet a '@ angular / core' fájlból importálva {FormBuilder, FormGroup, FormArray, FormControl, ValidatorFn} a '@ angular / form' import {of} fájlból az 'rxjs' @Component ({selector: 'my-app', templateUrl: './app.component.html', styleUrls: ['./app.component.css']}) exportálási osztály AppComponent {form: FormGroup megrendelésekData = [] konstruktor (privát formBuilder: FormBuilder) {this.form = this.formBuilder.group ({rendelések: új FormArray ([], minSelectedCheckboxes (1))}) // szinkron megrendelések this.ordersData = this.getOrders () this.addCheckboxes ()} private addCheckboxes () {this.ordersData. forEach ((o, i) => {const control = new FormControl (i === 0) // ha az első elem true értékre van állítva, akkor másképpen false (this.form.controls.orders as FormArray) .push (control)} )} getOrders () {return [{id: 100, név: 'megrendelés 1'}, {id: 200, név: 'megrendelés 2'}, {id: 300, név: 'megrendelés 3'}, {id: 400, név: '4. megrendelés'}]} subm () {const selectedOrderIds = this.form.value.orders .map ((v, i) => v? This.ordersData [i] .id: null) .filter (v => v! == null) console.log (selectedOrderIds)}} ... importálás {of} -ból az 'rxjs' ... konstruktorból (privát formBuilder: FormBuilder) {this.form = this. formBuilder.group ({rendelések: új FormArray ([], minSelectedCheckboxes (1))}) // async rendelések (lehetnek http-szolgáltatáshívások) a (this.getOrders ()) -ból. előfizetés (megrendelések => {this.ordersData = megrendeli ezt.addCheckboxes ()}) // szinkron megrendelések // this.ordersData = this.getOrders () // this.addCheckboxes ()}

Ezzel a cikkünk végére értünk. Most, hogy tudod, hogyan adhatsz hozzá egy jelölőnégyzetet az angular8-hoz, reméljük, hogy használni fogod azt a mindennapi kódolás során.

Most, hogy ismeri az Angular építőköveit, nézze meg a írta Edureka. Az Angular egy JavaScript keretrendszer, amelyet méretezhető, vállalati és teljesítményű kliensoldali webalkalmazások létrehozására használnak. Mivel az Angular framework elfogadása magas, az alkalmazás teljesítménymenedzsmentje a közösség által vezérelt, közvetett módon jobb munkalehetőségeket eredményez. Az Angular Certification Training célja ezeknek az új koncepcióknak az áttekintése az Enterprise Application Development körül.

mi a jelképes java