Créer un Reactive Form avec system de gestion de l’upload file est un grand classique des exercices lors des formations Angular. Toute la difficulté réside dans le faite de binder le formulaire avec l’input qui permet de sélectionner le fichier à envoyer sur le serveur.
Gestion de l’upload de fichier avec un Reactive Form
Avant de commencer je vous invite à lire l’article sur les Reactive Form où j’explique le principe de fonctionnement des formulaires réactifs avec Angular: Angular – Démystifier les formulaires Réactifs
Alors pour commencer on plante le décore avec un formulaire basique contenant un champ de type file qu’il va falloir implémenter pour créer le system d’upload File avec Angular
Voici un exemple tout simple avec deux composants dont un qui contient que le champ input du type File:
Rien de bien compliqué si ce n’est le decorateur @HostListener() qui est utilisé dans le composent qui gère le file input. Que fait ce Host Listener? À quoi sert-il? Eh bien le decorateur @HostListener() sert à écouter le changement d’état en provenance du template. Eh oui! Avec en prime un objet retourné par l’évènement.
Tous pourrirait être merveilleux et fonctionner ainsi et bien non… Si vous implémentez cette solution vous aurez une erreur dans votre console qui dit:
ERROR
Error: No value accessor for form control with name: ‘image’
L’Upload File avec un Component Connecté à un control de Reactive Form
En gros cela veut dire qu’Angular ne sait pas comment connecter notre composant à l’API de formulaire. Et oui cela bug avec la propriété « image » de notre formulaire d’upload file. Mais on va remédier à cela en expliquant à Angular comment accéder à la valeur du control « images » créant un accesseur de valeur personnalisé dans le composent « FileUploadComponent » comme ceci:
Avec ces quelques petites modifications, Angular sait maintenant comment accéder à la valeur du champs de notre formulaire.
Conclusion
Rien de bien difficile à implémenter un system de file upload dans Angular. Vous constaterez également qu’avec l’implémentation du ControlValueAccessor il est facile de créer un comportement spécifique connectable avec les controls d’un Reactive Form. Libre à vous donc de créer vos propres customs components connectables avec vos Réactives formes.
Je vous ai aussi mis les sources du rendu final sur Stackblitz:
https://stackblitz.com/edit/angular-ewktgp
Cela permet de mieux comprendre les subtilités d’utilisation dans un projet. Comme par exemple l’import du module « ReaciveFormsModule » dans le fichier « app.module.ts » de l’application pour activer les fonctionnalités des reactive formes d’Angular. Sans cela, rien ne fonctionne.
Tu as besoin de support pour ton projet?
Je t’invite à te rendre sur le lien suivant pour définir ensemble une solution de support qui te convienne.