Ajouter de la validation à votre formulaire

Ajouter de la validation à votre formulaire est essentiel pour garantir que les utilisateurs saisissent des données valides. Les Signal Forms utilisent des validateurs dans une fonction de schéma que vous passez à la fonction form().

Dans cette activité, vous allez apprendre à :

• Importer les validateurs intégrés
• Définir une fonction de schéma pour votre formulaire
• Appliquer des validateurs à des champs précis avec des messages d'erreur personnalisés

Ajoutons de la validation !

1. Importer les validateurs

   Importez les validateurs required et email depuis @angular/forms/signals :

   import {form, FormField, required, email} from '@angular/forms/signals';

2. Ajouter une fonction de schéma à votre formulaire

   Modifiez votre appel à form() pour inclure une fonction de schéma en second paramètre. La fonction de schéma reçoit un paramètre fieldPath qui vous permet d'accéder à chaque champ :

   loginForm = form(this.loginModel, (fieldPath) => {
     // Validators will go here
   });

3. Ajouter de la validation au champ email

   Dans la fonction de schéma, ajoutez la validation du champ email. Utilisez les deux validateurs required() et email() :

   loginForm = form(this.loginModel, (fieldPath) => {
     required(fieldPath.email, {message: 'Email is required'});
     email(fieldPath.email, {message: 'Enter a valid email address'});
   });

   L'option message fournit des messages d'erreur personnalisés aux utilisateurs.

4. Ajouter de la validation au champ password

   Ajoutez la validation du champ password avec le validateur required() :

   loginForm = form(this.loginModel, (fieldPath) => {
     required(fieldPath.email, {message: 'Email is required'});
     email(fieldPath.email, {message: 'Enter a valid email address'});
     required(fieldPath.password, {message: 'Password is required'});
   });

Parfait ! Vous avez ajouté de la validation à votre formulaire. Les validateurs s'exécutent automatiquement à mesure que les utilisateurs interagissent avec le formulaire. Quand la validation échoue, l'état du champ reflète les erreurs.

Ensuite, vous allez apprendre à afficher les erreurs de validation dans le template !