Jak vytvořit zaškrtávací políčko v Angular8?

Pokud jste doposud vytvářeli jakýkoli typ aplikací, jste si již vědomi toho, jak velký význam má zaškrtávací políčko. Nejen, že usnadňuje zadávání dat na jakoukoli platformu, ale také usnadňuje rychlé třídění dat, protože jsou často zabalena s funkcí seznamu. V tomto článku uvidíme, jak vytvořit zaškrtávací políčko v angular8 v následujícím pořadí:

• Vytvořte zaškrtávací políčko v Angular8
• Ověření zaškrtávacího políčka
• Přidání ovládacích prvků formuláře ASync

Vytvořte zaškrtávací políčko v Angular8

Abychom vysvětlili kroky vytváření zaškrtávacího políčka v Angular8, vezměme si příklad, kde máme seznam objednávek, ze kterých si můžeme vybrat, a musíme to uživateli ve formě zaškrtávacího políčka. Postupujte podle níže uvedeného kódu.

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

V tomto případě jsou data již k dispozici, a proto jsme využili výše sdílený kód. Ve scénáři reálného světa by tato data byla s největší pravděpodobností importována prostřednictvím API.

číst xml soubor v java příkladu

V tomto příkladu můžeme také použít reaktivní formy, aby byl konečný výsledek čistší a efektivnější. Abyste pochopili, jak to udělat, podívejte se na níže uvedený příklad.

import {Component} z '@ angular / core' import {FormBuilder, FormGroup} z '@ angular / forms' @Component ({selector: 'my-app', templateUrl: './app.component.html', styleUrls: ['./app.component.css']})) třída exportu AppComponent {form: FormGroup commandsData = [] konstruktor (soukromý formBuilder: FormBuilder) {this.form = this.formBuilder.group ({objednávky: []})} Předložit() { ... } }

Ve výše uvedeném kódu jsme využili následující.

1. Skupiny formulářů: což představuje jedinou formu.
2. FormControl: což představuje jeden záznam do jednoho formuláře.
3. FormArray: který se používá k reprezentaci kolekce všech FormControls.

Ve výše uvedeném příkladu můžeme také využít službu FormBuilder k vytvoření formuláře, který bude vypadat nějak takto.

Předložit

Ve výše uvedeném příkladu jsme formulář svázali s elementem formuláře pomocí [formGroup] = ”form”.

Nyní, když byl vytvořen základní formulář, přidejme do něj trochu dynamiky pomocí FormArray, jak je znázorněno níže.

java vytvoří řadu objektů

import {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 ']}) exportovat třídu AppComponent {form: FormGroup commandsData = [{id: 100, name:' order 1 '}, {id: 200, name:' order 2 '}, {id: 300, name:' order 3 '}, {id: 400, name:' order 4 '}] konstruktor (soukromý formBuilder: FormBuilder) {this.form = this.formBuilder.group ({ order: new FormArray ([])}) this.addCheckboxes ()} private addCheckboxes () {this.ordersData.forEach ((o, i) => {const control = new FormControl (i === 0) // if první položka nastavena na true, else false (this.form.controls.orders jako 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)}}

Ve výše uvedeném příkladu jsme po každé iteraci smyčky vytvořili nový FormControl a převzali naše objednávky z FormArray. První ovládací prvek jsme nastavili na hodnotu true, a proto je ve výchozím nastavení zaškrtnuta první objednávka ze seznamu.

Poté musíme svázat prvek FormArray s touto šablonou, abychom získali konkrétní informace o objednávce, které je třeba uživateli zobrazit.

Odeslat {{commandsData [i] .name}}

Výstup:

Ověření zaškrtávacího políčka v Angular8

Podívejte se na níže uvedený příklad a zjistěte, jak ověřit zaškrtávací políčko.

{{commandsData [i] .name}} Musí být vybrána alespoň jedna objednávka odeslat ... exportovat třídu AppComponent {form: FormGroup commandsData = [...] konstruktor (soukromý 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ískat seznam hodnot zaškrtávacích políček (boolean) .map (control => control.value) // sečíst počet zaškrtnutých políček .reduce ((předchozí, další) => další? předchozí + další: předchozí, 0) // pokud součet není větší než minimum, vrátí chybovou zprávu return totalSelected> = min? null: {required: true}} vrátit validátor}

Výstup:

Přidání ovládacích prvků formuláře ASync

Nyní, když víte, jak přidat dynamická zaškrtávací políčka, podívejme se, jak můžeme do těchto formulářů přidat ASync.

import {Component} z '@ angular / core' import {FormBuilder, FormGroup, FormArray, FormControl, ValidatorFn} z '@ angular / forms' import {of} z 'rxjs' @Component ({selector: 'my-app', templateUrl: './app.component.html', styleUrls: ['./app.component.css']}) třída exportu AppComponent {form: FormGroup commandsData = [] konstruktor (soukromý formBuilder: FormBuilder) {this.form = this.formBuilder.group ({order: new FormArray ([], minSelectedCheckboxes (1))}) // synchronous orders this.ordersData = this.getOrders () this.addCheckboxes ()} private addCheckboxes () {this.ordersData. forEach ((o, i) => {const control = new FormControl (i === 0) // pokud je první položka nastavena na true, else false (this.form.controls.orders jako 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)}} ... import {of} z konstruktoru 'rxjs' ... (private formBuilder: FormBuilder) {this.form = this. formBuilder.group ({order: new FormArray ([], minSelectedCheckboxes (1))}) // asynchronní objednávky (může to být volání služby http) (this.getOrders ()). subscribe (commands => {this.ordersData = objednávky this.addCheckboxes ()}) // synchronní objednávky // this.ordersData = this.getOrders () // this.addCheckboxes ()}

Tím jsme se dostali na konec našeho článku. Nyní, když víte, jak přidat zaškrtávací políčko do vašeho angular8, doufáme, že ho využijete při každodenním kódování.

Nyní, když znáte stavební kameny Angular, podívejte se na podle Edureka. Angular je framework jazyka JavaScript, který se používá k vytváření škálovatelných, podnikových a výkonných webových aplikací na straně klienta. Vzhledem k vysokému přijetí úhlového rámce je správa výkonu aplikace řízena komunitou nepřímo a přináší lepší pracovní příležitosti. Cílem školení Angular Certification Training je pokrýt všechny tyto nové koncepty týkající se vývoje podnikových aplikací.

zdvojnásobte int v java