La validation de formulaire est un aspect essentiel du développement Web, en particulier lors de la création d’applications avec Angular. Il garantit que l’utilisateur saisit les données dans un format correct, ce qui permet d’éviter les erreurs et d’améliorer l’expérience utilisateur globale.

Lors de la création de formulaires dans Angular, il est important de fournir des commentaires à l’utilisateur sur toute erreur dans le formulaire. Ces commentaires peuvent prendre la forme de messages d’erreur qui s’affichent à côté des contrôles de formulaire lorsque l’utilisateur a saisi des données non valides.

Les avantages de la mise en œuvre d’une solution de message de validation réutilisable

Avoir une solution générique pour afficher les messages de validation est important car cela permet aux développeurs d’écrire du code réutilisable qui peut être appliqué à n’importe quel contrôle de formulaire, au lieu d’avoir à écrire un code séparé pour chaque contrôle de formulaire individuel. Cela permet de réduire la quantité de code à écrire, ce qui rend le processus de développement plus efficace et évolutif. Une solution générique facilite également la maintenance et la mise à jour de la base de code, car les modifications peuvent être apportées à un seul endroit, plutôt que d’avoir à mettre à jour plusieurs composants.

Validation de formulaire simple

Dans cette section, nous allons examiner un exemple simple de formulaire nécessitant une validation. Disons que nous avons un formulaire d’inscription qui demande aux utilisateurs de fournir leur nom, leur adresse e-mail et leur mot de passe. Sans un composant de validation réutilisable, nous ajouterions généralement une validation à ce formulaire de la manière suivante

Nous commençons par déclarer a FormGroupen utilisant l’approche des formulaires réactifs dans Angular (dans cet exemple, nous utilisons un composant autonome)

https://medium.com/media/b97600169ccc09eb9496a1a7630083de

Dans notre exemple, nous importons le module nécessaire [ReactiveFormsModule] à partir @angular/formsde la création d’une FormGroupinstance avec ses contrôles. Le FormGroupest utilisé pour regrouper un ensemble d’ FormControlinstances, chacune représentant une entrée de formulaire.

Pour créer un FormControl, vous transmettez une valeur par défaut comme premier argument et un tableau de validateurs comme deuxième argument. Les validateurs sont utilisés pour valider la valeur d’entrée.

Par exemple, vous pouvez utiliser :

• Validators.requiredvalidateur pour effectuer l’entrée requise
• Validators.emailpour valider la saisie en tant qu’e-mail
• ou vous pouvez créer votre validateur de synchronisation ou asynchrone personnalisé

Dans le modèle du composant, vous liez les entrées à leurs contrôles respectifs à l’aide de la formControlNamedirective. Pour afficher les messages d’erreur, vous pouvez utiliser la ngIfdirective et accéder à la validité des contrôles en utilisant la getméthode de l’ FormGroupinstance.

Dans le modèle, nous utilisons les directives intégrées d’Angular pour afficher les messages d’erreur de validation en fonction des règles de validation déclarées dans le code TypeScript du composant. La formControlNamedirective est utilisée pour lier l’élément d’entrée à un contrôle de formulaire, tandis qu’elle ngIfest utilisée pour afficher ou masquer le message d’erreur en fonction de la validité du contrôle de formulaire.

https://medium.com/media/01ddcaf36299f4164f91caa124c70c98

Dans ce code, nous examinerons un problème courant dans les formulaires réactifs d’Angular, la duplication de la logique de validation dans le modèle. Cette approche peut conduire à un code répétitif et sujet aux erreurs, nous allons donc explorer une meilleure façon d’implémenter la validation de formulaire dans Angular.

cette approche peut rapidement devenir lourde, surtout si le formulaire contient de nombreux champs. De plus, l’implémentation de la validation dans le modèle peut compliquer la gestion des règles de validation et l’affichage des messages d’erreur, ainsi qu’augmenter le risque d’erreurs.

Message de validation de composant réutilisable

Pour résoudre le problème avec la validation classique, nous pouvons centraliser la logique de validation dans un composant réutilisable et le réutiliser pour chaque champ de formulaire. Cette approche facilite la gestion des règles de validation et l’affichage des messages d’erreur, améliore la maintenabilité du code et réduit le risque d’erreurs.

nous commençons par créer un composant autonome (vous ne pouvez utiliser aucun composant autonome) pour gérer les messages de validation de formulaire. Ce composant prend un contrôle de formulaire en entrée et affiche des messages d’erreur basés sur les erreurs existantes dans le contrôle de formulaire.

• Créer un nouveau composant ErrorMessage

ng gc messages d'erreur --standalone

 CREATE src /app/error-message/error-message .component .scss ( 0 octets) 
CREATE src /app/error-message/error-message .component .html ( 28 octets) 
CREATE src /app/error-message/error-message .component .spec .ts ( 637 octets) 
CREATE src /app/error-message/error-message .component .ts ( 398 octets)

• Ce composant nécessite une entrée de type AbstractControlafin de gérer la validation

https://medium.com/media/f33c4149e843b9766923705f53fd0c16

• Créez un fichier TypeScript ( validators-utils.ts ) qui inclut la liste des messages affichés en fonction du type d’erreur et une fonction pour le gérer

https://medium.com/media/1b266a4528051f9505382240becae711validateur-utils.ts

stringFormatest une fonction qui prend un modèle de chaîne comme premier argument et une liste d’arguments variables. La fonction remplace les occurrences de {x}dans le modèle par l’argument correspondant de la liste. Si l’argument à l’index spécifié n’est pas défini, l’original {x}est laissé dans la chaîne.

ValidationErrors : définit la carte des erreurs renvoyées par les vérifications de validation ayant échoué.

messagesest un objet Map constant qui associe les noms des validateurs à leurs messages d’erreur et à la clé des erreurs du validateur. Les messages d’erreur peuvent inclure des espaces réservés sous la forme desquels {x}seront remplacés par les arguments correspondants passés à stringFormat.

validatorErrorsKeyest un tableau d’erreur de validateur. Ces tableaux sont utilisés pour extraire les valeurs nécessaires de l’ validatorErrorsobjet à transmettre en tant qu’arguments à stringFormat.

getValidatorErrorMessageest une fonction qui prend deux arguments, validatorNameet validatorErrors. La fonction récupère d’abord l’objet ( {message : string,validatorErrorsKey? : string[]} ) associé au nom du validateur à partir de la messagescarte.

Ensuite, il récupère les valeurs d’erreurs du validateur , puis les utilise stringFormatpour formater le message d’erreur associé au nom du validateur à partir de la messagescarte. S’il n’y a pas de paramètres associés au nom du validateur, la fonction renvoie simplement le message d’erreur.

Par exemple, si nous avons un validateur Validator.minLength(8)et que nous ne respectons pas cette règle en ne tapant que 5 caractères, alors :

validatorName = minlength 
validatorErrors = { 'actualLength' : 5 , 'requiredLength' : 8 }

• Pour intégrer la fonction exportée getValidatorErrorMessagedans le ErrorMessageComponentpour afficher les messages d’erreur. Pour ce faire, importez simplement la fonction dans le fichier du composant, puis appelez la fonction en lui transmettant les paramètres nécessaires tels que validatorNameet validatorErrors. La chaîne renvoyée peut ensuite être utilisée comme message d’erreur.

https://medium.com/media/ac7bfc3cf91f96badd6b828f641a8e20

• Il est maintenant temps d’utiliser notre composant de validation réutilisable dans nos formulaires, pour utiliser notre composant, nous devons l’importer et simplement l’utiliser dans notre modèle.

https://medium.com/media/a02b1990ab208965140cec4c968bce5a

• et dans le modèle

https://medium.com/media/12b56e1d278dccee3b7b402d99b37806

Maintenant, nous avons notre composant réutilisable et il fournit clairement une solution propre et simple pour la validation des formulaires. Il élimine le potentiel d’erreurs qui sont souvent présentes dans les méthodes de validation traditionnelles, ce qui facilite l’utilisation des développeurs et des mainteneurs.

Message de validation de composant réutilisable avec Angular Material

Maintenant, apprenons à intégrer notre composant avec Angular Material. Nous utiliserons MatFormFieldModuleavec mat-errorpour afficher les messages. Le problème mat-errorest qu’il doit être utilisé directement dans mat-form-field.Pour surmonter cela, nous devons utiliser notre composant réutilisable comme un attribut, pas comme un élément. Ceci est réalisé en l’utilisant comme attribut du mat-error.

• Pour utiliser un sélecteur comme attribut, nous pouvons utiliser des crochets [ ]dans la déclaration du sélecteur

@Component({Composant ({ 
  selector : '[app-error-message]' , 
  standalone : true , 
  imports : [CommonModule], 
  template : `<ng-container *ngIf= "errorMessage !== null" >{{errorMessage}} 
             </ ng-container>`, 
}) classe
 d'exportation ErrorMessageComponent 

• et maintenant nous pouvons utiliser notre composant dans mat-error (n’oubliez pas d’importer MatFormFieldModule et MatInputModule)

https://medium.com/media/a01146d8e0de2a22db998d7b679b0808

Résumé

Dans cet article, nous avons découvert les avantages de l’utilisation de composants réutilisables pour la validation de formulaire dans Angular et comment l’implémenter. Cette approche conduit à un code plus gérable et réduit le risque d’erreurs en réutilisant la logique de validation.

Vous pouvez trouver le code ici , j’utilise une application basée sur des composants autonomes. Vous pouvez en savoir plus à ce sujet dans cet article .

Si vous avez des questions ou des commentaires, faites-le moi savoir dans les commentaires ci-dessous.

Pour en savoir plus sur Angular, JS et Java, vous pouvez me suivre sur Medium ou Twitter .