Search for a command to run...
No comments yet. Be the first to comment.
Depuis l'arrivée des Signals dans Angular, une question revient sans cesse dans les équipes : comment continuer à profiter de la puissance de RxJS, de ses opérateurs, de sa gestion fine des flux async
Si vous suivez l'actualité d'Angular avec la sortie de la version 20 du framework, vous avez probablement entendu de plus en plus ce terme. Mais au-delà du jargon, qu'est-ce que le Zoneless concrètement pour vos applications Angular ? Pourquoi est-il...
Si vous avez l’habitude de manipuler des formulaires réactifs (Reactive Forms) dans un projet Angular, vous connaissez certainement la méthode patchValue(…). Cette méthode, permet de mettre à jour les valeurs de votre formulaire. Cependant, son utili...
Depuis la sortie de la version 17 du framework Angular, on parle de la renaissance de Angular. Il y a eu beaucoup de changements majeurs depuis la version 16 du framework pour préparer le terrain à cette renaissance. Ces changements majeurs ont rendu...
Dans notre précédent article, nous avons vu ensemble ce qu'est un Signal Input et comment l'utiliser. Nous avons particulièrement remarqué sa similarité avec le décorateur @Input(). Dans ce nouvel article, nous verrons ensemble un nouveau type de inp...
L'une des problématiques majeures en Angular est de créer des composants réutilisables ce qui constitue l'essence même du framework. Souvent, nous sommes amenés à créer des composants input pour les utiliser un peu partout dans nos projets suivant le besoin. Ces composants input doivent être fonctionnels lorsque nous mettons en place un formulaire piloté par un Template-Driven Form ou un Reactive Form.
Le but de cet article est de mettre la lumière sur comment créer facilement un composant input réutilisable que nous pourrions utiliser dans nos formulaires réactifs.
Etape 1 : Création du composant app-input
Commençons par générer un nouveau composant avec la commande Angular CLI :
ng generate component input
Nous modifierons le template de notre composant pour avoir ceci de façon très basique :
<input type="text" [formControl]="control"/>
Etape 2: Implémentation de ControlValueAccessor
Pour que notre composant puisse être utilisé dans un formulaire réactif ou un formulaire basé sur des modèles, nous devons implémenter l'interface ControlValueAccessor.
Nous avons besoin de l'interface ControlValueAccessor parce que lorsqu'on crée le composant et qu'on désire l'utiliser dans un composant parent, nous ne devons pas oublier qu'il sera encapsulé dans son sélecteur app-input (dans notre cas ici). Ainsi, tous les attributs auxquels l'on avait accès directement sur un input ne seront plus disponibles. C'est davantage plus difficile si l'on veut avoir le contrôle sur notre composant via un formulaire réactif ou un formulaire basé sur des modèles.
Cette interface fournit une série de méthodes que nous pouvons utiliser pour synchroniser la valeur de notre composant avec un FormControl.
Nous pouvons le faire en ajoutant les méthodes suivantes à notre composant :
onChange: any = () => {};
onTouched = () => {};
writeValue(value: any): void {
// mettre à jour la valeur de votre composant
}
registerOnChange(fn: any): void {
// enregistrer une fonction qui sera appelée lorsque la valeur du composant change
this.onChange = fn;
}
registerOnTouched(fn: any): void {
// enregistrer une fonction qui sera appelée lorsque le composant est touché
this.onTouched = fn;
}
Lorsqu'on implémente l'interface ControlValueAccessor, ces trois méthodes sont automatiquement redéfinies dans notre composant. Ces méthodes permettront à notre composant d'écouter les changements et de les enregistrer suivant le besoin.
Il faut aussi penser à rendre accessible l'objet AbstractControl afin de pouvoir effectuer des manipulations dans le template HTML de notre composant pour soit afficher des messages d'erreur ou gérer des scénarios. Voici ce qu'il faut faire :
...
public control: AbstractControl;
...
constructor(private injector: Injector) {}
ngAfterViewInit(): void {
const ngControl = this.injector.get(NgControl, null);
if (ngControl) {
setTimeout(() => {
this.control = Object.assign(new FormControl(), ngControl.control) as FormControl;
});
}
}
Cette initialisation dans la méthode ngAfterViewInit nous permet d'accéder facilement à l'objet AbstractControl de notre composant input et de prévenir un problème lié à l'appel de notre composant dans un composant parent. En effet, le setTimeout est utilisé pour s'assurer que le DOM a été bien initialisé par le parent pour permettre l'utilisation de notre composant enfant.
Nous devons également fournir un provider pour notre composant qui indique à Angular d'utiliser notre composant comme un ControlValueAccessor :
providers: [
{
provide: NG_VALUE_ACCESSOR,
useExisting: forwardRef(() => InputComponent),
multi: true
}
]
Etape 3 : Utilisation du composant dans un formulaire
Maintenant que notre composant est un ControlValueAccessor, nous pouvons l'utiliser dans un formulaire réactif. Voici un exemple :
<form [formGroup]="form">
<app-input formControlName="firstname"></app-input>
</form>
Nous pouvons obtenir la valeur du composant en utilisant form.get('firstname').value et nous pouvons définir la valeur du composant en utilisant form.get('firstname').setValue(value).
Est-ce que ça fonctionne aussi avec
[(ngModel)]?
La question de savoir si ngModel est pris en compte par le ControlValueAccessor est très récurrente !
La réponse est OUI. Nous pouvons utiliser ngModel sur un composant piloté par ControlValueAccessor et ça fonctionne parfaitement :
<app-input [(ngModel)]="value"></app-input>
En somme, lorsque nous décidons de créer des composants réutilisables de type input, pensons toujours à implémenter l'interface ControlValueAccessor pour avoir cette flexibilité à pouvoir l'utiliser dans un formulaire réactif (Reactive Form) ou un formulaire basé sur des modèles (Template-Driven Form).
Pour plus d'informations :