Case à cocher liaison de données bidirectionnelle en Angular

Cet article Angular examinera différentes méthodes pour effectuer une liaison de données bidirectionnelle de case à cocher.

Nous utiliserons l’attribut ngModelOptions pour la liaison de données bidirectionnelle. Cette solution fonctionne mieux lorsqu’il y a un attribut name.

Nous introduirons également l’attribut ngModel qui permet au checkboxFlag de stocker l’état réel de la case à cocher lorsqu’il est modifié. Ensuite, nous utiliserons l’attribut change pour la liaison de données, de sorte que lorsque la valeur dans le composant est modifiée, la case à cocher obtient également une nouvelle valeur.

Lorsque ngModel est utilisé dans des formulaires, cela ne fonctionne généralement pas, de sorte que l’attribut ngModelOptions est mieux utilisé pour garantir que la valeur de la case à cocher change à mesure que les données du composant sont modifiées.

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

Dans certains cas, le code ne fonctionnera pas si l’entrée n’est pas à l’intérieur d’un formulaire mais fait partie de la boucle ngFor. De plus, l’attribut name doit être inclus dans la configuration du code pour que le code fonctionne correctement.

Alors que l’exemple de code ci-dessus gère la liaison de données bidirectionnelle sur la partie frontale, cette solution effectue des modifications sur le backend, en utilisant correctement ngModel.

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

Pour que ce code fonctionne parfaitement, importez { FormsModule } de @angular/forms dans app.module.ts et ajoutez au tableau des importations ressemblant à ceci :

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

[...]

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

L’attribut name doit être unique pour que l’état vérifié par défaut fonctionne comme prévu, et il doit être à l’intérieur de la balise input. Mais ce code ne fonctionnera pas si vous utilisez la case à cocher à l’intérieur d’un ngFor tout en répétant un tableau d’objets, comme ceci :

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

Ensuite, nous pouvons également utiliser l’attribut change pour effectuer une liaison de données sur les cases à cocher. Avec cette approche, nous créons les codes de manière plus détaillée.

Le composant html ressemblera à ceci :

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

Ensuite, le component.js sera écrit comme ci-dessous.

public saveCheckbox:boolean;

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