This content originally appeared on DEV Community and was authored by Joseph Donovan BIBANG BEFENE
đź’¬ Introduction
En Angular, afficher les erreurs de validation dans un formulaire peut vite devenir répétitif et verbeux. C’est pour simplifier cette partie que j’ai développé une petite librairie : ng-input-validation, qui centralise et automatise l’affichage des messages d’erreur de manière élégante et réutilisable.
Dans ce post, je te montre comment je faisais avant et comment je le fais aujourd’hui 👇
❌ Avant : une gestion répétitive dans chaque champ
Avant, pour chaque champ de formulaire, il fallait écrire plusieurs conditions pour afficher les messages d’erreur :
👉 Résultat : beaucoup de code répétitif à maintenir, surtout quand on a plusieurs champs.
✅ Maintenant : une seule ligne grâce à ng-input-validation
Avec ng-input-validation, tout est géré automatiquement à partir du FormControl.
Voici à quoi ressemble le même champ aujourd’hui :
Et ton FormGroup :
Là où avant il fallait écrire plusieurs @if, aujourd’hui une seule ligne suffit. Le composant affiche automatiquement le bon message d’erreur selon le type de validation (required, email, minLength, etc.).
⚙️ Bonus :
Tu peux aussi gérer les erreurs backend ou ajouter des messages personnalisés pour chaque type d’erreur.
📦 Installation
npm i ng-input-validation
Et n’oublie pas de l’importer dans composant Angular.
đź’ˇ Conclusion
Cette librairie m’a permis de :
- Gagner du temps sur la gestion des formulaires ;
- Garder un code plus propre et maintenable ;
- Uniformiser les messages d’erreur dans toutes mes applications Angular.
👉 Le projet est open-source sur npm :
đź”— https://www.npmjs.com/package/ng-input-validation
This content originally appeared on DEV Community and was authored by Joseph Donovan BIBANG BEFENE
Joseph Donovan BIBANG BEFENE | Sciencx (2025-11-06T09:11:25+00:00) Simplifier la gestion des erreurs de validation dans Angular avec `ng-input-validation`. Retrieved from https://www.scien.cx/2025/11/06/simplifier-la-gestion-des-erreurs-de-validation-dans-angular-avec-ng-input-validation/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.