Как создать флажок в 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 = [] constructor (private formBuilder: FormBuilder) {this.form = this.formBuilder.group ({orders: []})} Разместить() { ... } }

В приведенном выше коде мы использовали следующее.

1. FormGroups: который представляет собой единую форму.
2. FormControl: который представляет собой единственную запись в единой форме.
3. FormArray: который используется для представления коллекции всех FormControls.

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

Разместить

В приведенном выше примере мы связали форму с элементом формы с помощью [formGroup] = ”form”.

Теперь, когда основная форма создана, давайте добавим ей динамичности с помощью FormArray, как показано ниже.

Java-код для подключения к mysql

импортировать {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 ({ orders: new FormArray ([])}) this.addCheckboxes ()} private addCheckboxes () {this.ordersData.forEach ((o, i) => {const control = new FormControl (i === 0) // если для первого элемента установлено значение true, иначе - false (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)}}

В приведенном выше примере после каждой итерации цикла мы создали новый FormControl и приняли наши заказы из FormArray. Мы установили для первого элемента управления значение true, и поэтому по умолчанию первый заказ был исключен из списка.

После этого нам нужно привязать элемент FormArray к этому шаблону, чтобы получить конкретную информацию о заказе, которая должна отображаться пользователю.

{{ordersData [i] .name}} отправить

Вывод:

Проверка флажка в Angular8

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

{{ordersData [i] .name}} Должен быть выбран хотя бы один заказ отправить ... экспортный класс AppComponent {form: FormGroup ordersData = [...] constructor (private formBuilder: FormBuilder) {this.form = this.formBuilder .group ({orders: new FormArray ([], minSelectedCheckboxes (1))}) this.addCheckboxes ()} ...} function minSelectedCheckboxes (min = 1) {const validator: ValidatorFn = (formArray: FormArray) => { const totalSelected = formArray.controls // получаем список значений флажков (логический) .map (control => control.value) // подсчитываем количество отмеченных флажков .reduce ((prev, next) => next? prev + next: prev, 0) // если сумма не больше минимума, вернуть сообщение об ошибке return totalSelected> = min? null: {обязательно: true}} валидатор возврата}

Вывод:

Добавление элементов управления формы ASync

Теперь, когда вы знаете, как добавлять динамические флажки, давайте посмотрим, как мы можем добавить ASync в эти формы.

импортировать {Component} из '@ angular / core' import {FormBuilder, FormGroup, FormArray, FormControl, ValidatorFn} из '@ angular / forms' import {of} from 'rxjs' @Component ({selector: 'my-app', templateUrl: './app.component.html', styleUrls: ['./app.component.css']}) класс экспорта AppComponent {form: FormGroup ordersData = [] конструктор (частный formBuilder: FormBuilder) {this.form = this.formBuilder.group ({orders: new 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 as 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)}} ... импорт {of} из 'rxjs' ... конструктора (закрытый formBuilder: FormBuilder) {this.form = this. formBuilder.group ({orders: new FormArray ([], minSelectedCheckboxes (1))}) // асинхронные заказы (может быть вызов службы http) для (this.getOrders ()). subscribe (orders => {this.ordersData = orders this.addCheckboxes ()}) // синхронные заказы // this.ordersData = this.getOrders () // this.addCheckboxes ()}

На этом мы подошли к концу нашей статьи. Теперь, когда вы знаете, как добавить флажок в свой angular8, мы надеемся, что вы будете использовать его в повседневном кодировании.

мелкая копия и глубокая копия в java

Теперь, когда вы знаете строительные блоки Angular, ознакомьтесь с пользователя Edureka. Angular - это платформа JavaScript, которая используется для создания масштабируемых, корпоративных и высокопроизводительных клиентских веб-приложений. Благодаря широкому распространению фреймворка Angular управление производительностью приложения осуществляется сообществом, что косвенно способствует улучшению возможностей трудоустройства. Тренинг по сертификации Angular направлен на охват всех этих новых концепций разработки корпоративных приложений.