Les formulaires

Introduction

Les formulaires sont un élément central de nombreuses applications web, permettant aux utilisateurs d’interagir avec l’interface en saisissant et en soumettant des données. Dans Angular, le framework offre une prise en charge puissante et flexible des formulaires, permettant aux développeurs de choisir parmi deux approches principales : les formulaires orientés template et les formulaires réactifs. Chaque approche possède ses propres avantages, limitations et cas d’utilisation spécifiques, offrant ainsi la possibilité de choisir celle qui convient le mieux au contexte de l’application.

Dans ce chapitre, nous allons explorer en détail ces deux types de formulaires, en commençant par une présentation des concepts fondamentaux. Nous aborderons les différences entre les formulaires orientés template, qui s’appuient sur la liaison des données directement dans le HTML, et les formulaires réactifs, qui privilégient une approche déclarative plus adaptée aux applications complexes. Nous examinerons également comment les validateurs permettent de garantir l’intégrité des données saisies par les utilisateurs et comment créer des validateurs personnalisés pour répondre aux exigences spécifiques de l’application.

Ce chapitre a pour objectif...

Les formulaires orientés template

import { Component } from '@angular/core'; 
 
@Component({ 
  selector: 'app-one', 
  standalone: true, 
  template: ` 
    <form> 
      <div> 
        <label>Email</label> 
        <input type="text" name="email" /> 
      </div> 
      <div> 
        <label>Password</label> 
        <input type="password" name="password" /> 
      </div> 
    </form> 
  `, 
}) 
export class OneComponent { 
} 

import { Component } from '@angular/core'; 
import { FormsModule } from '@angular/forms'; 
 
@Component({ 
  selector: 'app-one', 
  standalone: true, 
  imports: [FormsModule], 
  template:...

Les formulaires réactifs

Contrairement aux formulaires orientés template, qui reposent principalement sur le HTML pour la définition et la gestion des formulaires, les formulaires réactifs adoptent une approche déclarative en définissant la structure du formulaire directement dans le code TypeScript du composant. Cette méthode permet une meilleure séparation des préoccupations, où la logique métier et les validations sont définies de manière claire dans le composant, tandis que le template reste concentré sur l’affichage.

Les formulaires réactifs sont particulièrement bien adaptés aux scénarios où la structure du formulaire peut changer dynamiquement ou bien où les formulaires sont complexes, avec des règles de validation élaborées. En s’appuyant de manière explicite sur des classes qui implémentent AbstractControl comme FormGroup, FormControl et FormArray, Angular permet de créer, organiser et manipuler facilement les formulaires dans le code, tout en offrant un contrôle total sur les données et l’état du formulaire.

L’approche réactive repose sur l’utilisation du module ReactiveFormsModule, qui fournit les outils nécessaires pour créer des formulaires basés sur des flux de données et des événements. Elle s’inspire des principes de la programmation réactive, permettant de réagir aux changements dans les données du formulaire de manière déclarative. Par exemple, il est possible de valider un champ en temps réel ou de déclencher des actions spécifiques lorsque certaines conditions sont remplies.

Dans cette section, nous allons explorer en profondeur les concepts des formulaires réactifs, en commençant par la création de formulaires simples, avant de passer à des cas plus avancés comme les formulaires dynamiques, les validations complexes, et l’utilisation du FormArray pour gérer des listes de contrôle.

Projet fil rouge

À cette étape, nous allons ajouter les deux formulaires qui nous manquent. Un premier de connexion, qui s’affichera dans un style semblable à une pop-in (ou modale) au milieu de l’écran. Le second formulaire est celui destiné à la création/édition d’un ticket du tableau Kanban. Cependant, il y aura une spécificité : nous allons créer un composant hybride pour pouvoir visualiser une valeur et basculer sur un formulaire d’édition. Le but est de créer un composant légèrement plus complexe, mais assez agréable pour les utilisateurs. Celui-ci sera finalisé dans le prochain chapitre portant sur le routage, Naviguer entre les pages, car le but est d’avoir cette logique sur une page distincte.

.modal-wrapper { 
  display: flex; 
  justify-content: center; 
  align-items: center; 
  position: fixed; 
  top: 0; 
  left: 0; 
  width: 100%; 
  height: 100%; 
  background-color: rgba(0, 0, 0, 0.5); 
} 
 
.modal-wrapper .modal-body { 
  background-color: white; 
  padding: 20px; 
  border-radius: 5px; 
  margin: auto; 
} 

export class LoginFormComponent { 
  private fb = inject(FormBuilder); 
 
  form:...

Conclusion

Dans ce chapitre, nous avons exploré deux approches essentielles pour la gestion des formulaires dans Angular : les formulaires orientés template et les formulaires réactifs. À travers les objets FormControl, FormGroup, FormArray et FormBuilder, nous avons appris à créer des formulaires structurés, à ajouter des validations et à interagir dynamiquement avec leur contenu. Ces outils offrent un contrôle total sur la structure et le comportement des formulaires, permettant d’ajouter ou de supprimer des validations, de modifier, activer, désactiver des champs selon les besoins de l’application, avec des validations moins intrusives grâce aux options comme updateOn: ’blur’ pour différer la validation, ainsi que les propriétés touched et dirty pour conditionner l’affichage des messages d’erreur et améliorer la fluidité des interactions.

Dans la section pratique, nous avons mis en œuvre ces concepts en ajoutant deux formulaires principaux à notre application Kanban : un formulaire de connexion pour gérer l’authentification de l’utilisateur, et un composant hybride complexe de consultation, édition et création pour les tickets.

Le code final est disponible sur GitHub à l’URL suivante :...