Afficher les erreurs de validation

Maintenant que vous savez valider le formulaire, il est important d'afficher les erreurs de validation aux utilisateurs.

Dans cette activité, vous allez apprendre à :

• Accéder à l'état des champs grâce aux signals de validation
• Utiliser @if pour afficher les erreurs de manière conditionnelle
• Parcourir les erreurs avec @for
• Afficher les erreurs uniquement après une interaction de l'utilisateur

Affichons les retours de validation !

1. Afficher les erreurs du champ email

   Sous l'input email, ajoutez un affichage conditionnel des erreurs. Les erreurs ne s'afficheront que lorsque le champ est à la fois invalide et touché :

   <label>
     Email
     <input type="email" [formField]="loginForm.email" />
   </label>
   @if (loginForm.email().invalid() && loginForm.email().touched()) {
     <div class="error">
       @for (error of loginForm.email().errors(); track error.kind) {
         <span>{{ error.message }}</span>
       }
     </div>
   }

   L'appel loginForm.email() accède au signal d'état du champ. La méthode invalid() renvoie true quand la validation échoue, touched() renvoie true une fois que l'utilisateur a interagi avec le champ, et errors() fournit un tableau des erreurs de validation avec leurs messages personnalisés.

2. Afficher les erreurs du champ password

   Sous l'input password, ajoutez le même pattern pour les erreurs du mot de passe :

   <label>
     Password
     <input type="password" [formField]="loginForm.password" />
   </label>
   @if (loginForm.password().invalid() && loginForm.password().touched()) {
     <div class="error">
       @for (error of loginForm.password().errors(); track error.kind) {
         <span>{{ error.message }}</span>
       }
     </div>
   }

Excellent ! Vous avez ajouté l'affichage des erreurs à votre formulaire. Les erreurs n'apparaissent qu'après une interaction de l'utilisateur avec un champ : elles apportent un retour utile sans être intrusives.

Ensuite, vous allez apprendre à gérer la soumission du formulaire !