Angular Academy · Leçon

L’interface ControlValueAccessor

Connectez un composant personnalisé aux formulaires Angular

L’interface ControlValueAccessor est une leçon Angular Academy gratuite sur CoddyKit. Ceci est la leçon 1 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage Angular Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours Angular Academy comprend 4 leçons au total.

Pourquoi créer des contrôles personnalisés

Les formulaires Angular fonctionnent directement avec les champs natifs. Pour rendre votre propre composant (composant de notation, sélecteur de couleur, bouton bascule) utilisable avec ngModel et formControlName, celui-ci doit implémenter ControlValueAccessor.

Le pont

ControlValueAccessor (CVA) fait le lien entre le modèle de formulaire d’Angular et la vue de votre composant. Il définit la manière dont le modèle écrit les valeurs dans la vue et dont les modifications de l’utilisateur lui sont renvoyées.

L’interface

CVA exige quatre méthodes : writeValue, registerOnChange, registerOnTouched et, facultativement, setDisabledState.

interface ControlValueAccessor {
  writeValue(value: any): void;
  registerOnChange(fn: (v: any) => void): void;
  registerOnTouched(fn: () => void): void;
  setDisabledState?(isDisabled: boolean): void;
}

Enregistrer le fournisseur

Indiquez à Angular que votre composant est un accesseur de valeur en fournissant NG_VALUE_ACCESSOR avec multi: true et useExisting pointant vers le composant.

import { NG_VALUE_ACCESSOR } from '@angular/forms';
import { forwardRef } from '@angular/core';

providers: [{
  provide: NG_VALUE_ACCESSOR,
  useExisting: forwardRef(() => RatingComponent),
  multi: true
}]

Pourquoi utiliser forwardRef

forwardRef est nécessaire, car la classe se référence elle-même dans ses propres métadonnées avant d’être définie. Il diffère la résolution jusqu’à ce que la classe existe.

Squelette du composant

Un contrôle personnalisé déclare le fournisseur et implémente les méthodes de l’interface. La classe conserve la valeur actuelle en interne.

@Component({
  selector: 'app-rating',
  providers: [/* NG_VALUE_ACCESSOR ... */]
})
export class RatingComponent implements ControlValueAccessor {
  value = 0;
  // writeValue, registerOnChange, registerOnTouched ...
}

L’utiliser comme un contrôle natif

Une fois CVA implémenté, votre composant s’intègre aux formulaires pilotés par le modèle et aux formulaires réactifs exactement comme un champ natif.

<app-rating formControlName="stars"></app-rating>
<!-- or -->
<app-rating [(ngModel)]="stars"></app-rating>

Les deux sens de circulation des données

Le flux du modèle vers la vue passe par writeValue (Angular transmet la valeur du formulaire). Le flux de la vue vers le modèle passe par la fonction de rappel enregistrée dans registerOnChange (vous transmettez les modifications de l’utilisateur).

Suivre l’état modifié

L’expérience utilisateur de la validation des formulaires dépend de l’état modifié. Vous en informez Angular via la fonction de rappel fournie par registerOnTouched, généralement lors de la perte de focus.

État désactivé

Lorsque le formulaire désactive le contrôle (control.disable()), Angular appelle setDisabledState afin que votre composant puisse le refléter visuellement et ignorer les entrées.

Feuille de route

Les prochaines leçons implémentent chaque élément : écrire et enregistrer les valeurs, gérer les états désactivé et modifié, puis ajouter la validation. Ensemble, ces éléments forment un contrôle personnalisé entièrement intégré.

Vérification rapide

Vérifiez vos connaissances de base sur CVA.

Récapitulatif

Vous avez appris que ControlValueAccessor relie les composants personnalisés aux formulaires Angular au moyen de quatre méthodes, enregistrées via NG_VALUE_ACCESSOR avec forwardRef et multi: true. Vous allez maintenant implémenter l’écriture et l’enregistrement des valeurs.

Questions Fréquemment Posées

La leçon « L’interface ControlValueAccessor » est-elle gratuite ?

Oui — le texte complet de « L’interface ControlValueAccessor » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours Angular Academy, passe à CoddyKit PRO. Le cours Angular Academy comprend 4 leçons au total.

Qu'est-ce que j'apprendrai dans « L’interface ControlValueAccessor » ?

Connectez un composant personnalisé aux formulaires Angular Tu pratiques Angular Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.

Dois-je avoir de l'expérience pour commencer Angular Academy ?

Aucune expérience préalable n'est requise. Angular Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 1 sur 4.

Combien de temps prend la leçon « L’interface ControlValueAccessor » ?

La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.

Peux-tu écrire et exécuter du code dans cette leçon Angular Academy ?

Oui. Chaque leçon Angular Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.

Toutes les leçons de ce cours

← Retour à Angular Academy