Como criar uma caixa de seleção no Angular8?

Se você tem criado qualquer tipo de aplicativo até agora, já está ciente do enorme significado de uma caixa de seleção. Isso não apenas torna a entrada de dados mais fácil para qualquer plataforma, mas também facilita a classificação rápida de dados, uma vez que geralmente vem empacotado com o recurso de lista. Neste artigo, veremos como criar uma caixa de seleção no angular8 na seguinte sequência:

• Criar caixa de seleção no Angular8
• Validando a caixa de seleção
• Adicionando controles de formulário ASync

Criar caixa de seleção no Angular8

Para explicar as etapas de criação de uma caixa de seleção no Angular8, vamos dar um exemplo onde temos uma lista de pedidos para escolher e devemos isso para o usuário na forma de uma caixa de seleção. Para isso, siga o código abaixo.

const ordersData = [{id: 1, nome: 'pedido 1'}, {id: 2, nome: 'pedido 2'}, {id: 3, nome: 'pedido 3'}, {id: 4, nome: 'pedido 4'}]

Neste caso, os dados já estão presentes conosco e, portanto, utilizamos o código compartilhado acima. Em um cenário do mundo real, esses dados provavelmente seriam importados por meio de uma API.

Neste exemplo, também podemos fazer uso de formas reativas para tornar o resultado final mais limpo e eficiente. Para entender como fazer isso, dê uma olhada no exemplo abaixo.

import {Component} de '@ angular / core' import {FormBuilder, FormGroup} de '@ angular / forms' @Component ({selector: 'my-app', templateUrl: './app.component.html', styleUrls: ['./app.component.css']}) export class AppComponent {form: FormGroup ordersData = [] construtor (private formBuilder: FormBuilder) {this.form = this.formBuilder.group ({orders: []})} enviar() { ... } }

No código acima, usamos o seguinte.

1. FormGroups: que representa um único formulário.
2. FormControl: que representa uma única entrada em um único formulário.
3. FormArray: que é usado para representar uma coleção de todos os FormControls.

No exemplo acima, também podemos usar o serviço FormBuilder para criar o formulário que se parecerá com isto.

programa java para conectar ao banco de dados mysql

enviar

No exemplo acima, vinculamos o formulário ao elemento do formulário usando [formGroup] = ”formulário”.

Agora que o formulário básico foi criado, vamos adicionar dinamismo ao mesmo por meio do uso de FormArray, conforme mostrado abaixo.

import {Component} from '@ angular / core' import {FormBuilder, FormGroup, FormArray, FormControl, ValidatorFn} from '@ angular / forms' @Component ({selector: 'my-app', templateUrl: './app.component .html ', styleUrls: [' ./app.component.css ']}) export class AppComponent {form: FormGroup ordersData = [{id: 100, name:' order 1 '}, {id: 200, name:' pedido 2 '}, {id: 300, nome:' pedido 3 '}, {id: 400, nome:' pedido 4 '}] construtor (particular formBuilder: FormBuilder) {this.form = this.formBuilder.group ({ pedidos: new FormArray ([])}) this.addCheckboxes ()} private addCheckboxes () {this.ordersData.forEach ((o, i) => {const control = new FormControl (i === 0) // if primeiro item definido como verdadeiro, caso contrário, falso (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)}}

No exemplo acima, após cada iteração de loop, criamos um novo FormControl e recebemos nossos pedidos do FormArray. Definimos o primeiro controle como verdadeiro e, portanto, a primeira ordem foi retirada da lista por padrão.

Depois disso, precisamos vincular o elemento FormArray a este modelo para obter as informações específicas do pedido que precisam ser exibidas para o usuário.

{{ordersData [i] .name}} enviar

Resultado:

o que é estrutura em selênio

Validando a caixa de seleção no Angular8

Dê uma olhada no exemplo abaixo para aprender como validar uma caixa de seleção.

{{ordersData [i] .name}} Pelo menos um pedido deve ser selecionado submit ... export class 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 // obtém uma lista de valores de caixa de seleção (booleano) .map (control => control.value) // totaliza o número de caixas de seleção marcadas .reduce ((anterior, próximo) => próximo? anterior + next: prev, 0) // se o total não for maior que o mínimo, retorna a mensagem de erro return totalSelected> = min? null: {obrigatório: verdadeiro}} validador de retorno}

Resultado:

Adicionando controles de formulário ASync

Agora que você sabe como adicionar caixas de seleção dinâmicas, vamos ver como podemos adicionar ASync a esses formulários.

import {Component} from '@ angular / core' import {FormBuilder, FormGroup, FormArray, FormControl, ValidatorFn} from '@ angular / forms' import {of} from 'rxjs' @Component ({selector: 'my-app', templateUrl: './app.component.html', styleUrls: ['./app.component.css']}) export class AppComponent {form: FormGroup ordersData = [] construtor (private formBuilder: FormBuilder) {this.form = this.formBuilder.group ({orders: new FormArray ([], minSelectedCheckboxes (1))}) // pedidos síncronos this.ordersData = this.getOrders () this.addCheckboxes ()} private addCheckboxes () {this.ordersData. forEach ((o, i) => {const control = new FormControl (i === 0) // se o primeiro item definido como verdadeiro, senão falso (this.form.controls.orders as FormArray) .push (control)} )} getOrders () {return [{id: 100, nome: 'pedido 1'}, {id: 200, nome: 'pedido 2'}, {id: 300, nome: 'pedido 3'}, {id: 400, nome: 'pedido 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} from 'rxjs' ... construtor (private formBuilder: FormBuilder) {this.form = this. formBuilder.group ({orders: new FormArray ([], minSelectedCheckboxes (1))}) // pedidos assíncronos (pode ser uma chamada de serviço http) de (this.getOrders ()). subscribe (orders => {this.ordersData = pedidos this.addCheckboxes ()}) // pedidos síncronos // this.ordersData = this.getOrders () // this.addCheckboxes ()}

Com isso, chegamos ao final do nosso artigo. Agora que você sabe como adicionar uma caixa de seleção ao angular8, esperamos que a use na sua codificação do dia a dia.

Agora que você conhece os blocos de construção do Angular, verifique o por Edureka. Angular é uma estrutura JavaScript que é usada para criar aplicativos da web escaláveis, corporativos e de desempenho do lado do cliente. Com a alta adoção da estrutura Angular, o gerenciamento de desempenho do aplicativo é orientado pela comunidade, gerando indiretamente melhores oportunidades de trabalho. O Angular Certification Training visa cobrir todos esses novos conceitos em torno do Enterprise Application Development.

como criar uma classe singleton em java