¿Cómo crear una casilla de verificación en Angular8?



Checkbox en Angular8 facilita la entrada de datos a cualquier plataforma y también facilita la clasificación rápida de datos, ya que viene empaquetado con la función de lista.

Si ha estado creando algún tipo de aplicación hasta ahora, ya es consciente de la enorme importancia que tiene una casilla de verificación. No solo facilita la entrada de datos a cualquier plataforma, sino que también facilita la clasificación rápida de datos, ya que a menudo viene empaquetado con la función de lista. En este artículo, veremos cómo crear una casilla de verificación en angular8 en la siguiente secuencia:

Crear casilla de verificación en Angular8

Para explicar los pasos para crear una casilla de verificación en Angular8, tomemos un ejemplo donde tenemos una lista de pedidos para elegir y se lo debemos al usuario en forma de casilla de verificación. Para ello, siga el código a continuación.





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

En este caso, los datos ya están presentes con nosotros y, por lo tanto, hemos hecho uso del código compartido anteriormente. En un escenario del mundo real, estos datos probablemente se importarían a través de una API.

establecer java classpath windows 7

En este ejemplo, también podemos hacer uso de formas reactivas para que el resultado final sea más limpio y eficiente. Para entender cómo hacer esto, eche un vistazo al siguiente ejemplo.



import {Component} from '@ angular / core' import {FormBuilder, FormGroup} from '@ angular / forms' @Component ({selector: 'my-app', templateUrl: './app.component.html', styleUrls: ['./app.component.css']}) clase de exportación AppComponent {formulario: FormGroup ordersData = [] constructor (formBuilder privado: FormBuilder) {this.form = this.formBuilder.group ({pedidos: []})} enviar() { ... } }

En el código anterior, hemos hecho uso de lo siguiente.

  1. FormGroups: que representa una sola forma.
  2. FormControl: que representa una sola entrada en un solo formulario.
  3. FormArray: que se usa para representar una colección de todos los FormControls.

En el ejemplo anterior también podemos hacer uso del servicio FormBuilder para crear el formulario que se verá así.

enviar

En el ejemplo anterior, hemos enlazado el formulario con el elemento de formulario usando [formGroup] = ”formulario”.



Ahora que se ha creado el formulario básico, agreguemos algo de dinamismo al mismo mediante el uso de FormArray como se muestra a continuación.

cómo analizar xml en java
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 {formulario: FormGroup ordersData = [{id: 100, name:' order 1 '}, {id: 200, name:' orden 2 '}, {id: 300, nombre:' orden 3 '}, {id: 400, nombre:' orden 4 '}] constructor (formBuilder privado: FormBuilder) {this.form = this.formBuilder.group ({ orders: new FormArray ([])}) this.addCheckboxes ()} private addCheckboxes () {this.ordersData.forEach ((o, i) => {control constante = new FormControl (i === 0) // si primer elemento establecido en verdadero, de lo contrario falso (this.form.controls.orders como 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)}}

En el ejemplo anterior, después de cada iteración de bucle, hemos creado un nuevo FormControl y hemos tomado nuestras órdenes de FormArray. Hemos establecido que el primer control sea verdadero y, por lo tanto, el primer orden se ha marcado de la lista de forma predeterminada.

Después de esto, necesitamos vincular el elemento FormArray a esta plantilla para obtener la información específica del pedido que debe mostrarse al usuario.

Enviar {{ordersData [i] .name}}

Salida:

Salida - casilla de verificación en angular8- edureka

Validando la casilla de verificación en Angular8

Eche un vistazo al siguiente ejemplo para aprender a validar una casilla de verificación.

{{ordersData [i] .name}} Se debe seleccionar al menos un pedido enviar ... export class AppComponent {formulario: FormGroup ordersData = [...] constructor (formBuilder privado: FormBuilder) {this.form = this.formBuilder .group ({orders: new FormArray ([], minSelectedCheckboxes (1))}) this.addCheckboxes ()} ...} función minSelectedCheckboxes (min = 1) {const validador: ValidatorFn = (formArray: FormArray) => { const totalSelected = formArray.controls // obtener una lista de valores de casilla de verificación (booleano) .map (control => control.value) // totalizar el número de casillas de verificación marcadas .reduce ((anterior, siguiente) => siguiente? anterior + siguiente: anterior, 0) // si el total no es mayor que el mínimo, devuelve el mensaje de error return totalSelected> = min? nulo: {obligatorio: verdadero}} devolver validador}

Salida:

Adición de controles de formulario ASync

Ahora que sabe cómo agregar casillas de verificación dinámicas, veamos cómo podemos agregar ASync a estos formularios.

importar {Component} de '@ angular / core' importar {FormBuilder, FormGroup, FormArray, FormControl, ValidatorFn} de '@ angular / forms' importar {of} de 'rxjs' @Component ({selector: 'my-app', templateUrl: './app.component.html', styleUrls: ['./app.component.css']}) export class AppComponent {formulario: FormGroup ordersData = [] constructor (formBuilder privado: FormBuilder) {this.form = this.formBuilder.group ({pedidos: new FormArray ([], minSelectedCheckboxes (1))}) // pedidos sincrónicos this.ordersData = this.getOrders () this.addCheckboxes ()} privados addCheckboxes () {this.ordersData. forEach ((o, i) => {const control = new FormControl (i === 0) // si el primer elemento se establece en verdadero, en caso contrario falso (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)}} ... import {of} from 'rxjs' ... constructor (private formBuilder: FormBuilder) {this.form = this. formBuilder.group ({orders: new FormArray ([], minSelectedCheckboxes (1))}) // pedidos asíncronos (podría ser una llamada de servicio http) de (this.getOrders ()). subscribe (orders => {this.ordersData = pedidos this.addCheckboxes ()}) // pedidos síncronos // this.ordersData = this.getOrders () // this.addCheckboxes ()}

Con esto, hemos llegado al final de nuestro artículo. Ahora que sabe cómo agregar una casilla de verificación a su angular8, esperamos que la utilice en su codificación diaria.

Ahora que conoce los componentes básicos de Angular, consulte el por Edureka. Angular es un marco de JavaScript que se utiliza para crear aplicaciones web escalables, empresariales y de rendimiento del lado del cliente. Dado que la adopción del marco Angular es alta, la gestión del rendimiento de la aplicación está impulsada por la comunidad, lo que genera indirectamente mejores oportunidades laborales. La capacitación de certificación angular tiene como objetivo cubrir todos estos nuevos conceptos en torno al desarrollo de aplicaciones empresariales.

print_r ()