Casilla de verificación enlace de datos bidireccional en Angular

Este artículo angular analizará diferentes métodos para llevar a cabo un enlace de datos bidireccional de casilla de verificación.

Usaremos el atributo ngModelOptions para el enlace de datos bidireccional. Esta solución funciona mejor cuando hay un atributo name.

También introduciremos el atributo ngModel que habilita el checkboxFlag para almacenar el estado real de la casilla de verificación cuando se cambia. Luego usaremos el atributo change para el enlace de datos, de modo que cuando se cambia el valor en el componente, la casilla de verificación también obtiene un nuevo valor.

Cuando se utiliza ngModel en formularios, la mayoría de las veces no funciona, por lo que es mejor utilizar el atributo ngModelOptions para garantizar que el valor de la casilla de verificación cambie a medida que se modifican los datos del componente.

<input
	type="checkbox"
	[(ngModel)]="itemChange"
	[ngModelOptions]="{standalone: true}"/>

En algunos casos, el código no funcionará si la entrada no está dentro de un formulario, sino que forma parte del bucle ngFor. Además, el atributo name debe incluirse en la configuración del código para que el código funcione bien.

Mientras que el código de ejemplo anterior maneja el enlace de datos bidireccional en la parte del frontend, esta solución realiza cambios en el backend, haciendo un uso adecuado de ngModel.

<input
	[(ngModel)]="itemOne">
	type="checkbox"/>

Para que este código funcione perfectamente, importe { FormsModule } de @angular/forms a app.module.ts y agréguelo a el array de importaciones con este aspecto:

import { FormsModule } from'@angular/forms';

[...]

@NgModule({
imports: [
	[...]
	FormsModule
],
[...]
})

El atributo name tiene que ser único para que el estado marcado por defecto funcione como se esperaba, y debe estar dentro de la etiqueta input. Pero este código no funcionará si usa la casilla de verificación dentro de un ngFor mientras repite un array de objetos, así:

[{"checked":true},{"checked":false}]

Entonces también podemos usar el atributo change para hacer que los datos sean vinculantes en las casillas de verificación. Con este enfoque, creamos los códigos de una manera más detallada.

El componente html se verá así:

<input #saveCheckboxOne
	id="saveCheckboxOne"
	type="checkbox"
	[checked]="saveCheckbox"
	(change)="onSaveCheckboxChange(saveUserNameCheckBox.checked)" />

Entonces el component.js se escribirá como se muestra a continuación.

public saveCheckbox:boolean;

public onSaveCheckboxChange(value:boolean){
this.saveUsername = value;
}