Ako vytvoriť začiarkavacie políčko v Angular8?

Ak ste doteraz vytvárali akýkoľvek typ aplikácií, ste si už vedomí toho, aký veľký význam má začiarkavacie políčko. Nielenže uľahčuje zadávanie údajov na ľubovoľnú platformu, ale tiež umožňuje rýchle triedenie údajov, ktoré sú často zabalené s funkciou zoznamu. V tomto článku uvidíme, ako vytvoriť začiarkavacie políčko v angular8 v nasledujúcom poradí:

• Vytvorte začiarkavacie políčko v Angular8
• Overuje sa začiarkavacie políčko
• Pridanie ovládacích prvkov formulára ASync

Vytvorte začiarkavacie políčko v Angular8

Aby sme vysvetlili kroky vytvárania začiarkavacieho políčka v Angular8, vezmime si príklad, keď máme na výber zoznam príkazov, ktoré musíme používateľovi urobiť vo forme začiarkavacieho políčka. Postupujte podľa pokynov uvedených nižšie.

const commandsData = [{id: 1, name: 'order 1'}, {id: 2, name: 'order 2'}, {id: 3, name: 'order 3'}, {id: 4, name: 'objednávka 4'}]

V tomto prípade sú údaje už k dispozícii, a preto sme využili vyššie zdieľaný kód. V scenári zo skutočného sveta by sa tieto údaje s najväčšou pravdepodobnosťou importovali pomocou rozhrania API.

kód série fibonacci v jave

V tomto príklade môžeme tiež použiť reaktívne formy, aby bol konečný výsledok čistejší a efektívnejší. Aby ste pochopili, ako to urobiť, pozrite si príklad uvedený nižšie.

importovať {Component} z '@ angular / core' import {FormBuilder, FormGroup} z '@ angular / forms' @Component ({selector: 'my-app', templateUrl: './app.component.html', styleUrls: ['./app.component.css']})) exportná trieda AppComponent {form: FormGroup commandsData = [] konštruktor (súkromný formBuilder: FormBuilder) {this.form = this.formBuilder.group ({objednávky: []})} Predložiť() { ... } }

Vo vyššie uvedenom kóde sme využili nasledujúce možnosti.

1. Skupiny formulárov: čo predstavuje jednotnú formu.
2. FormControl: čo predstavuje jeden záznam do jednej formy.
3. FormArray: ktorý sa používa na predstavenie kolekcie všetkých ovládacích prvkov FormControls.

V uvedenom príklade môžeme tiež využiť službu FormBuilder na vytvorenie formulára, ktorý bude vyzerať asi takto.

Predložiť

Vo vyššie uvedenom príklade sme formulár spojili s elementom formulára pomocou [formGroup] = ”form”.

Teraz, keď je vytvorený základný formulár, pridajme k nemu určitú dynamiku pomocou FormArray, ako je uvedené nižšie.

ako používať iterátor v jave

importovať {Component} z '@ angular / core' import {FormBuilder, FormGroup, FormArray, FormControl, ValidatorFn} z '@ angular / forms' @Component ({selector: 'my-app', templateUrl: './app.component .html ', styleUrls: [' ./app.component.css ']})) exportná trieda AppComponent {form: FormGroup commandsData = [{id: 100, name:' order 1 '}, {id: 200, name:' order 2 '}, {id: 300, name:' order 3 '}, {id: 400, name:' order 4 '}] constructor (private formBuilder: FormBuilder) {this.form = this.formBuilder.group ({ objednávky: new FormArray ([])}) this.addCheckboxes ()} private addCheckboxes () {this.ordersData.forEach ((o, i) => {const control = new FormControl (i === 0) // if prvá položka nastavená na true, else false (this.form.controls.orders ako 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)}}

Vo vyššie uvedenom príklade sme po každej iterácii slučky vytvorili nový FormControl a prijali naše objednávky z FormArray. Prvý ovládací prvok sme nastavili na hodnotu true, a teda je prvý príkaz predvolene odškrtnutý zo zoznamu.

Potom musíme na túto šablónu naviazať prvok FormArray, aby sme získali konkrétne informácie o objednávke, ktoré sa musia používateľovi zobraziť.

{{ordersData [i] .name}} odoslať

Výkon:

Overenie začiarkavacieho políčka v Angular8

V nasledujúcom príklade sa dozviete, ako overiť začiarkavacie políčko.

{{ordersData [i] .name}} Musí byť vybraná aspoň jedna objednávka odoslať ... exportovať triedu AppComponent {form: FormGroup commandsData = [...] konštruktor (súkromný formBuilder: FormBuilder) {this.form = this.formBuilder .group ({order: new FormArray ([], minSelectedCheckboxes (1))}) this.addCheckboxes ()} ...} function minSelectedCheckboxes (min = 1) {const validator: ValidatorFn = (formArray: FormArray) => { const totalSelected = formArray.controls // získať zoznam hodnôt začiarkavacích políčok (boolean). mapa (control => control.value) // sčítať počet začiarknutých políčok .reduce ((predchádzajúci, nasledujúci) => ďalší? predchádzajúci + next: prev, 0) // ak súčet nie je väčší ako minimum, vráti chybové hlásenie return totalSelected> = min? null: {required: true}} návratový validátor}

Výkon:

Pridanie ovládacích prvkov formulára ASync

Teraz, keď viete, ako pridať dynamické začiarkavacie políčka, pozrime sa, ako môžeme do týchto formulárov pridať ASync.

import {Component} z '@ angular / core' import {FormBuilder, FormGroup, FormArray, FormControl, ValidatorFn} z '@ angular / forms' import {of} z 'rxjs' @Component ({selektor: 'my-app', templateUrl: './app.component.html', styleUrls: ['./app.component.css']})) exportná trieda AppComponent {form: FormGroup commandsData = [] konštruktor (súkromný formBuilder: FormBuilder) {this.form = this.formBuilder.group ({order: new FormArray ([], minSelectedCheckboxes (1))}) // synchrónne objednávky this.ordersData = this.getOrders () this.addCheckboxes ()} súkromné ​​addCheckboxes () {this.ordersData. forEach ((o, i) => {const control = new FormControl (i === 0) // ak je prvá položka nastavená na true, else false (this.form.controls.orders ako FormArray) .push (control)} )} getOrders () {return [{id: 100, name: 'order 1'}, {id: 200, name: 'order 2'}, {id: 300, name: 'order 3'}, {id: 400, name: 'order 4'}]} submit () {const selectedOrderIds = this.form.value.orders .map ((v, i) => v? This.ordersData [i] .id: null) .filter (v => v! == null) console.log (selectedOrderIds)}} ... importovať {of} z 'rxjs' ... konštruktora (private formBuilder: FormBuilder) {this.form = this. formBuilder.group ({objednávky: new FormArray ([], minSelectedCheckboxes (1))}) // asynchronné objednávky (môže to byť volanie služby http) z (this.getOrders ()). subscribe (commands => {this.ordersData = objednávky this.addCheckboxes ()}) // synchrónne objednávky // this.ordersData = this.getOrders () // this.addCheckboxes ()}

Týmto sme sa dostali na koniec nášho článku. Teraz, keď viete, ako pridať začiarkavacie políčko do vášho angular8, dúfame, že ho využijete pri každodennom programovaní.

Teraz, keď poznáte stavebné bloky Angular, pozrite sa na od Edureka. Angular je rámec JavaScript, ktorý sa používa na vytváranie škálovateľných, podnikových a výkonných webových aplikácií na strane klienta. Pretože je prijatie uhlového rámca vysoké, riadenie výkonu aplikácie je riadené komunitou a nepriamo poháňa lepšie pracovné príležitosti. Cieľom školenia Angular Certification Training je pokryť všetky tieto nové koncepty vývoja podnikových aplikácií.

rozdiel medzi hodmi a hodmi java