Angulaire: créer un composant à cases à cocher multiples pouvant être réutilisé

Créons un composant angulaire pour créer un ensemble de cases à cocher à partir d'un groupe logique spécifique. Le composant sera écrit avec des idées de réutilisation. Qu'est-ce que cela signifie? Voici un exemple ci-dessous:

Imaginez que vous ayez la tâche de modifier les utilisateurs. Lors de la modification, un formulaire avec tous les champs s'ouvre généralement. Un utilisateur peut avoir un ou plusieurs rôles dans la liste "Adimin", "Directeur", "Professeur", "Etudiant".

Pour implémenter le choix multiple des rôles, il a été décidé de tirer sur le formulaire une case à cocher pour chaque rôle. En cochant ou décochant les rôles des utilisateurs, cela changera.

Tout d'abord, créons un composant parent (c'est-à-dire une page pour le formulaire) qui contiendra déjà notre composant de groupe de cases à cocher .

export class AppComponent implements OnInit { private userRoles = [ { id: 1, name: 'Admin' }, { id: 2, name: 'Director' }, { id: 3, name: 'Professor' }, { id: 4, name: 'Student' } ]; public userModel = { id: 0, name: "", roles: [] }; constructor() { } ngOnInit(): void { } } 

Comme vous pouvez le voir ici, j'ai fait un code dur de tous les rôles possibles, mais dans une application réelle, les rôles seront très probablement demandés à la base de données. Afin de simuler notre HTTP au serveur, j'ai assigné les mêmes valeurs à une autre variable avec un léger retard.

 //app.component.ts userRolesOptions = new Array<any>(); ngOnInit(): void { setTimeout(() => { this.userRolesOptions = this.userRoles; }, 1000); //     1  } 

Commençons maintenant à créer un composant de groupe de cases à cocher généralisé, qui peut être réutilisé sans aucun problème dans tous les cas lorsqu'un groupe de cases à cocher est nécessaire.

Nous avons d'abord besoin d'une telle classe CheckboxItem.ts

 export class CheckboxItem { value: string; label: string; checked: boolean; constructor(value: any, label: any, checked?: boolean) { this.value = value; this.label = label; this.checked = checked ? checked : false; } } 

Il sera utilisé par CheckboxComponent pour rendre tous les choix possibles (dans notre cas, ce sont des rôles) et enregistrer l'état (l'option est sélectionnée ou non). Notez que la propriété «vérifié» est un paramètre facultatif dans le constructeur et sera définie par défaut sur false, c'est-à-dire que toutes les valeurs ne seront pas sélectionnées en premier. Cela convient lorsque nous créons un nouvel utilisateur sans un seul rôle.

Ensuite, nous allons légèrement modifier notre fonction de simulation de demande de serveur, afin de pouvoir mapper entre la réponse JSON et Array

 userRolesOptions = new Array<CheckboxItem>(); ngOnInit(): void { setTimeout(() => { this.userRolesOptions = this.userRoles.map(x => new CheckboxItem(x.id, x.name)); }, 1000); } 

Peu importe la structure JSON que le serveur nous renvoie. Chaque case à cocher HTML a toujours une valeur et une description. Dans notre cas, nous mappons «id» avec «valeur» et «nom» avec «étiquette». La valeur sera utilisée comme clé ou identifiant pour l'option, et l' étiquette n'est qu'une chaîne de description que l'utilisateur lit.

L'étape suivante consiste à créer un CheckboxGroupComponent. Il ressemble à ceci:

 @Component({ selector: 'checkbox-group', templateUrl: './checkbox-group.component.html', styleUrls: ['./checkbox-group.component.css'] }) export class CheckboxGroupComponent implements OnInit { @Input() options = Array<CheckboxItem>(); constructor() { } ngOnInit() {} } 

Ce n'est pas un tutoriel angulaire, donc je n'expliquerai pas les spécificités du framework. Qui a besoin de lire dans la documentation officielle.

La propriété @Input appelée options contiendra une liste de toutes les valeurs possibles qui ne sont pas sélectionnées par défaut. Notre modèle de composant HTML affichera autant de cases à cocher que cette liste contient.

Voici le code HTML pour CheckboxGroupComponent:

 <div *ngFor=”let item of options”> <input type=”checkbox” [(ngModel)]=”item.checked”>{{item.label}} </div> 

Notez que j'ai utilisé ngModel pour lier chaque propriété d' élément «cochée» de la liste d' options .

La dernière étape consiste à ajouter notre composant nouvellement créé au modèle parent AppComponent.

 // somewhere in AppComponent html template <checkbox-group [options]=”userRolesOptions”></checkbox-group> 

Le résultat devrait être comme ceci:



Pour obtenir toutes les options actuellement sélectionnées, nous créerons un événement de sortie qui, en cliquant sur l'une des cases à cocher, renverra notre liste des options sélectionnées. Quelque chose comme ça: [1,2,4]

Dans le modèle CheckboxGroupComponent, nous associons l' événement change à la nouvelle fonction.

 <div *ngFor=”let item of options”> <input type=”checkbox” [(ngModel)]=”item.checked” (change)=”onToggle()”>{{item.label}} </div> 

Il est temps de mettre en œuvre cette fonction même:

 export class CheckboxGroupComponent implements OnInit { @Input() options = Array<CheckboxItem>(); @Output() toggle = new EventEmitter<any[]>(); constructor() {} ngOnInit(){} onToggle() { const checkedOptions = this.options.filter(x => x.checked); this.selectedValues = checkedOptions.map(x => x.value); this.toggle.emit(checkedOptions.map(x => x.value)); } } 

Abonnez-vous à cet événement (propriété Output avec le nom bascule ) dans le modèle AppComponent.

 <checkbox-group [options]=”userRolesOptions” (toggle)=”onRolesChange($event)”></checkbox-group> 

Et attribuez le résultat de retour (rôles sélectionnés) dans userModel.

 export class CheckboxGroupComponent implements OnInit { //..  onRolesChange(value) { this.userModel.roles = value; console.log('Model role:' , this.userModel.roles); } } 

Maintenant, à chaque clic sur la case à cocher, vous verrez une liste des rôles sélectionnés dans la console. Plus précisément, leur id. Par exemple, si je choisis les rôles Administrateur et Professeur , j'obtiens «Rôles modèles: (2) [1, 3]».

Le composant est presque complet et prêt à être réutilisé. La dernière chose qui reste à faire est de prendre en charge l'initialisation des groupes de cases à cocher. Cela sera nécessaire dans le cas où nous ferons l'édition des utilisateurs. Avant cela, nous devons faire une demande au serveur pour obtenir la liste actuelle des rôles utilisateur et initialiser CheckboxGroupComponent.

Nous avons deux façons de procéder. La première consiste à utiliser le constructeur de la classe CheckboxItem et à utiliser le paramètre facultatif «vérifié». À l'endroit où nous avons fait la cartographie.

 //AppComponent.ts setTimeout(() => { this.userRolesOptions = this.userRoles.map(x => new CheckboxItem(x.id, x.name, true)); }, 1000); //          

La deuxième façon consiste à ajouter une autre liste de selectedValues pour initialiser notre composant.

 <checkbox-group [options]=”userRolesOptions” [selectedValues]=”userModel.roles” (toggle)=”onRolesChange($event)”></checkbox-group> 

Imaginons que nous ayons déjà fait une demande pour l'utilisateur actuel et qu'un modèle à trois rôles provienne de la base de données.

 //AppComponent.ts public userModel = { id: 1, name: 'Vlad', roles: [1,2,3] }; constructor() { } //rest of the code 

Dans CheckboxGroupComponent, nous initialisons toutes les propriétés «vérifiées» de chaque case à cocher à true si l'ID de rôle est contenu dans la liste selectedValues .

 //CheckboxGroupComponent.ts ngOnInit() { this.selectedValues.forEach(value => { const element = this.options.find(x => x.value === value); if (element) { element.checked = true; } }); } 

Par conséquent, vous devriez obtenir le résultat suivant:


Ici, j'ai utilisé des styles de matériau angulaire

Au démarrage, il y aura un délai d'une seconde avant qu'Angular ne dessine toutes les cases à cocher de la page. Cela simule le temps passé à charger des rôles à partir de la base de données.

Il est important de noter que vous pouvez obtenir tous les rôles sélectionnés en vous abonnant à un événement (basculer) ou simplement utiliser la propriété «vérifié» dans chaque objet élément de la liste userRolesOptions située dans le composant parent . En effet, le lien vers la liste est transmis via @Input (liaison) et toutes les modifications au sein de l'objet seront synchronisées.

 const checkedOptions = this.userRolesOptions.filter(x => x.checked); 

Un tel composant peut être stylisé comme vous le souhaitez et utilisé pour toute tâche nécessitant une sélection multiple.

Merci d'avoir lu cet article! J'espère que vous avez aimé créer le composant Angular avec des idées de réutilisation.

PS: Si l'article sera populaire, je publierai la deuxième petite partie, où le même exemple est écrit en utilisant des formulaires réactifs angulaires.