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.
![](https://miro.medium.com/v2/resize:fit:700/1*RAERVJnl_-ulgbAPGIWjsQ.png)
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 FormGroup
en utilisant l’approche des formulaires réactifs dans Angular (dans cet exemple, nous utilisons un composant autonome)
Dans notre exemple, nous importons le module nécessaire [ReactiveFormsModule] à partir @angular/forms
de la création d’une FormGroup
instance avec ses contrôles. Le FormGroup
est utilisé pour regrouper un ensemble d’ FormControl
instances, 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.required
validateur pour effectuer l’entrée requiseValidators.email
pour 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 formControlName
directive. Pour afficher les messages d’erreur, vous pouvez utiliser la ngIf
directive et accéder à la validité des contrôles en utilisant la get
méthode de l’ FormGroup
instance.
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 formControlName
directive est utilisée pour lier l’élément d’entrée à un contrôle de formulaire, tandis qu’elle ngIf
est utilisée pour afficher ou masquer le message d’erreur en fonction de la validité du contrôle de formulaire.
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
AbstractControl
afin de gérer la validation
- 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
stringFormat
est 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é.
messages
est 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
.
validatorErrorsKey
est un tableau d’erreur de validateur. Ces tableaux sont utilisés pour extraire les valeurs nécessaires de l’validatorErrors
objet à transmettre en tant qu’arguments àstringFormat
.
getValidatorErrorMessage
est une fonction qui prend deux arguments,validatorName
etvalidatorErrors
. La fonction récupère d’abord l’objet ( {message : string,validatorErrorsKey? : string[]} ) associé au nom du validateur à partir de lamessages
carte.Ensuite, il récupère les valeurs d’erreurs du validateur , puis les utilise
stringFormat
pour formater le message d’erreur associé au nom du validateur à partir de lamessages
carte. 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
getValidatorErrorMessage
dans leErrorMessageComponent
pour 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 quevalidatorName
etvalidatorErrors
. La chaîne renvoyée peut ensuite être utilisée comme message d’erreur.
- 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.
- et dans le modèle
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.
![](https://miro.medium.com/v2/resize:fit:700/1*WWRQl6ONu-UmV6nwn_DCjg.png)
![](https://miro.medium.com/v2/resize:fit:700/1*awRr8O9ZiQ0_TitXycfOtQ.png)
Message de validation de composant réutilisable avec Angular Material
Maintenant, apprenons à intégrer notre composant avec Angular Material. Nous utiliserons MatFormFieldModule
avec mat-error
pour afficher les messages. Le problème mat-error
est 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)
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 .