Dynamic Checkbox & Radio avec Angular Reactive Form

Les Checkbox et Radio sont une fonctionnalité essentielle de l’interface utilisateur de nombreuses applications Angular. Pourtant, aussi simple qu’elles paraissent, il n’est pas toujours facile d’implémenter un système dynamic et réactif de case à cocher avec une liste d’options en provenance d’une base de données par exemple. Je vais te montrer dans cet article comment faire cela facilement avec un exemple concret que tu pourras réutiliser.

C’est presque dans toutes les applications que l’on retrouve des systèmes de case à cocher. Souvent cela est utilisé pour définir les options ou préférence d’un utilisateur. Avec Angular, tu peux créer un formulaire réactif et binder les valeurs en provenance d’une base de données avec chaque option pour pouvoir les piloter individuellement.

Dans les exemples qui suivent, je te montre comment binder une liste de fruits à sélectionner, avec un formulaire réactif Angular.

const LIST_FROM_DATABASE = [
  { name: '🍏', checked: false },
  { name: '🍋', checked: false },
  { name: '🍓', checked: true },
  { name: '🍌', checked: false },
  { name: '🍉', checked: false },
  { name: '🥝', checked: false },
];

Voici les étapes pour mettre en place une tel formulaire.

Configurer une liste de Checkbox

En premier il faut que tu récupères la liste de fruits en provenance de la base de données. Avec cette liste, tu pourras générer le formulaire et le HTML de case à cocher qui va avec. Une fois que tu as mis en place un service pour récupérer la liste de la base de données, tu peux commencer à mettre en place l’architecture du formulaire sur ce modèle:

    this.form = new FormGroup({
      fruits: new FormArray([])
    });

Ensuite, nous allons regarder comment faire pour générer les controls du formulaire en utilisant les éléments de la liste de fruits.

Création dynamique des controls du formulaire

Ici on s’occupe de générer pour chaque case à cocher, un FormGroup avec les controls que l’on souhaite. En l’occurrence nous allons créér pour chaque propriété de chaque option, un FormControl afin de récupérer la totalité de l’objet. Voici comment faire:

    // get array control
    const formArray = this.form.get('fruits') as FormArray;
    // loop each existing value options from database
    this.fruits.forEach(fruit => {
      // generate control Group for each option and push to formArray
      formArray.push(new FormGroup({
        name: new FormControl(fruit.name),
        checked: new FormControl(fruit.checked)
      }))
    })

Cela va créé dynamiquement un group de contrôle pour chaque option (fruit sélectionnable). C’est tout. Rien de plus à faire. On regard donc comment générer le HTML dynamiquement.

Création dynamique du HTML du formulaire

Comme nous l’avons fait pour les options du formulaire, on peut aussi créer dynamiquement le HTML du formulaire avec les cases à cocher bindé avec le formulaire réactif de notre composant Angular.

Voici comment cela fonctionne:

<form [formGroup]="form" >
  <p><b>Reactive Checkbox</b></p>

  <ul formArrayName="fruits">

    <li [formGroupName]="i" *ngFor="let item of form.controls?.fruits?.controls; let i = index">
      <input type="checkbox" formControlName="checked" />  {{fruits[i].name}}
    </li>

  </ul>
</form>

Rien de bien compliqué hormis une syntaxe un peut tordue… J’explique!

1. Binder le formArray

On remarque que je bind la balise UL avec le formArray fruits du reactive form. C’est le premier point.

2. Générer les options et binder avec les formGroup

Ensuite je fais une boucle avec la balise LI, pour chaque element contenu dans le formArray fruits du reactive form. Je n’oublie pas de binder chaque LI avec le formGroupName correspondant. Ici on utilise l’index du formArray parcourus. C’est l’étape deux.

3. Binder les cases à cocher avec le formControlName

Pour finir, je bind mon input Checkbox avec le formControlName checked et affiche le nom du fruit parcouru.

Envoyer les valeurs du formulaire

Maintenant, toutes les options sont binder avec le formulaire et il ne reste plus qu’a récupérer les valeur du formulaire.

Cela ce fait simplement avec la propriété value de l’objet reactive form. Vous récupérez ainsi automatiquement la liste complète avec les valeurs mises à jour. Il ne te reste plus qu’à envoyer tout cela à ton backend pour qu’il sauvegarde cela dans une base de données.

Exemple / Live demo

Conclusion

L’utilisation de la réactive forme permet de mettre en place un contrôle complet facilement. On peut aussi aisément ajouter une méthode de validation selon les principes d’Angular et ainsi renforcer le contrôle du formulaire.

Je t’encourage donc à utiliser un maximum les formulaires réactifs Angular!

Je te montrerai dans les prochains articles quelques autres astuces que je connais pour faciliter l’utilisation des Réactives formes Angular.

En attendant, je vous laisse consulter les autres articles traitant du même sujet dans la section Angular.

Tu as besoin de support pour ton projet?
Je t’invite à te rendre sur le lien suivant pour définir ensemble une solution de support qui te convienne.