Как да създам отметка в Angular8?

Ако досега сте създавали някакъв тип приложения, вече сте наясно с огромното значение, което притежава квадратчето за отметка. Това не само улеснява въвеждането на данни за всяка платформа, но също така улеснява бързото сортиране на данните, тъй като често се предлага в пакета с функцията за списък. В тази статия ще видим как да създадем отметка в angular8 в следната последователност:

• Създайте отметка в Angular8
• Потвърждаване на квадратчето за отметка
• Добавяне на ASync формуляри за контрол

Създайте отметка в Angular8

За да обясним стъпките за създаване на квадратче за отметка в Angular8, нека вземем пример, където имаме списък с поръчки, от които да избираме и трябва да го направим на потребителя под формата на квадратче за отметка. За целта следвайте кода по-долу.

const ordersData = [{id: 1, name: 'order 1'}, {id: 2, name: 'order 2'}, {id: 3, name: 'order 3'}, {id: 4, name: „поръчка 4“}]

В този случай данните вече са налице при нас и затова сме използвали кода, споделен по-горе. В реален сценарий тези данни най-вероятно ще бъдат импортирани чрез API.

В този пример можем да използваме и реактивни форми, за да направим крайния резултат по-чист и ефективен. За да разберете как да направите това, разгледайте примера по-долу.

импортиране на {Component} от '@ angular / core' импортиране {FormBuilder, FormGroup} от '@ angular / forms' @Component ({selector: 'my-app', templateUrl: './app.component.html', styleUrls: ['./app.component.css']}) клас за експортиране AppComponent {form: FormGroup ordersData = [] конструктор (частен formBuilder: FormBuilder) {this.form = this.formBuilder.group ({поръчки: []})}} Изпращане() { ... } }

В горния код използвахме следното.

1. Групи от формуляри: което представлява една форма.
2. FormControl: което представлява единичен запис в единна форма.
3. FormArray: който се използва за представяне на колекция от всички FormControls.

В горния пример можем също да използваме услугата FormBuilder, за да създадем формуляра, който ще изглежда подобно на това.

хвърли двойно към int в java

Изпращане

В горния пример сме обвързали формуляра с елемент на формуляра, като използваме [formGroup] = ”form”.

Сега, когато основният формуляр е създаден, нека добавим малко динамичност към него чрез използването на FormArray, както е показано по-долу.

импортиране на {Component} от '@ angular / core' импортиране {FormBuilder, FormGroup, FormArray, FormControl, ValidatorFn} от '@ angular / forms' @Component ({selector: 'my-app', templateUrl: './app.component .html ', styleUrls: [' ./app.component.css ']}) клас за експортиране AppComponent {form: FormGroup ordersData = [{id: 100, name:' order 1 '}, {id: 200, name:' поръчка 2 '}, {id: 300, name:' order 3 '}, {id: 400, name:' order 4 '}] конструктор (частен formBuilder: FormBuilder) {this.form = this.formBuilder.group ({ поръчки: нов FormArray ([])}) this.addCheckboxes ()} private addCheckboxes () {this.ordersData.forEach ((o, i) => {const control = new FormControl (i === 0) // ако първият елемент е зададен на true, в противен случай е false (this.form.controls.orders като 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)}}

В горния пример, след всяка итерация на цикъл, ние създадохме нов FormControl и взехме нашите поръчки от FormArray. Поставихме първия контрол да е истина и по този начин първата поръчка е отметната от списъка по подразбиране.

След това трябва да свържем елемента FormArray към този шаблон, за да получим конкретната информация за поръчката, която трябва да се покаже на потребителя.

{{ordersData [i] .name}} изпрати

Изход:

пространство от имена в c ++

Потвърждаване на квадратчето за отметка в Angular8

Разгледайте примера по-долу, за да научите как да проверите отметката.

{{ordersData [i] .name}} Поне една поръчка трябва да бъде избрана submit ... export class AppComponent {form: FormGroup ordersData = [...] конструктор (частен formBuilder: FormBuilder) {this.form = this.formBuilder .group ({поръчки: нов FormArray ([], minSelectedCheckboxes (1))}) this.addCheckboxes ()} ...} функция minSelectedCheckboxes (min = 1) {const validator: ValidatorFn = (formArray: FormArray) => { const totalSelected = formArray.controls // получаваме списък със стойности на квадратчетата за отметка (boolean) .map (control => control.value) // общ брой на отметките .reduce ((предишна, следваща) => следваща? пред + следващ: prev, 0) // ако общата сума не е по-голяма от минималната, върнете съобщението за грешка return totalSelected> = min? null: {задължително: true}} return validator}

Изход:

Добавяне на ASync формуляри за контрол

Сега, когато знаете как да добавяте динамични квадратчета за отметка, нека видим как можем да добавим ASync към тези формуляри.

импортиране на {Component} от '@ angular / core' импортиране {FormBuilder, FormGroup, FormArray, FormControl, ValidatorFn} от '@ angular / forms' import {of} от 'rxjs' @Component ({selector: 'my-app', templateUrl: './app.component.html', styleUrls: ['./app.component.css']}) клас за експортиране AppComponent {form: FormGroup ordersData = [] конструктор (частен formBuilder: FormBuilder) {this.form = this.formBuilder.group ({поръчки: нов FormArray ([], minSelectedCheckboxes (1))}) // синхронни поръчки this.ordersData = this.getOrders () this.addCheckboxes ()} private addCheckboxes () {this.ordersData. forEach ((o, i) => {const control = new FormControl (i === 0) // ако първият елемент е зададен на true, иначе false (this.form.controls.orders като FormArray) .push (control)} )} getOrders () {return [{id: 100, name: 'order 1'}, {id: 200, name: 'order 2'}, {id: 300, name: 'order 3'}, {id: 400, име: 'поръчка 4'}]} submit () {const selectedOrderIds = this.form.value.orders .map ((v, i) => v? This.ordersData [i] .id: null) .filter (v => v! == null) console.log (selectedOrderIds)}} ... импортиране {на} от 'rxjs' ... конструктор (частен formBuilder: FormBuilder) {this.form = this. formBuilder.group ({поръчки: нов FormArray ([], minSelectedCheckboxes (1))}) // асинхронни поръчки (може да бъде извикване на услуга http) на (this.getOrders ()). абонирайте (поръчки => {this.ordersData = поръчва this.addCheckboxes ()}) // синхронни поръчки // this.ordersData = this.getOrders () // this.addCheckboxes ()}

С това стигнахме до края на нашата статия. Сега, след като знаете как да добавите отметка към вашия angular8, надяваме се, че ще го използвате при ежедневното си кодиране.

Сега, след като познавате градивните елементи на Angular, разгледайте от Edureka. Angular е JavaScript рамка, която се използва за създаване на мащабируеми, корпоративни и ефективни уеб приложения от страна на клиента. Тъй като приемането на Angular framework е високо, управлението на изпълнението на приложението се ръководи от общността, индиректно стимулирайки по-добри възможности за работа. Обучението за ъглово сертифициране има за цел да обхване всички тези нови концепции около разработването на корпоративни приложения.

защо трябва да научите python