Angular Academy · Leçon

Écrire et enregistrer des valeurs

Implémentez writeValue et les fonctions de rappel de changement

Écrire et enregistrer des valeurs est une leçon Angular Academy gratuite sur CoddyKit. Ceci est la leçon 2 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.

Deux méthodes fondamentales

Le rôle central d’un accesseur de valeur est de faire circuler les données dans les deux sens : writeValue transmet la valeur du modèle à votre vue, tandis que la fonction de rappel de registerOnChange renvoie les modifications de l’utilisateur au modèle.

writeValue

Angular appelle writeValue lorsque le formulaire définit ou réinitialise la valeur du contrôle. Stockez cette valeur dans l’état de votre composant afin que la vue la reflète.

value = 0;

writeValue(value: number): void {
  this.value = value ?? 0;
}

Gérer la valeur null

writeValue peut recevoir null lors d’une réinitialisation. Normalisez cette valeur vers une valeur par défaut sûre afin que votre modèle ne provoque pas d’erreur.

writeValue(value: string | null): void {
  this.text = value ?? '';
}

registerOnChange

Angular vous transmet une fonction de rappel à appeler chaque fois que la valeur change. Enregistrez-la ; vous l’appellerez lors d’une interaction de l’utilisateur.

private onChange: (v: number) => void = () => {};

registerOnChange(fn: (v: number) => void): void {
  this.onChange = fn;
}

Émettre les modifications

Lorsque l’utilisateur interagit, mettez à jour l’état interne et appelez la fonction de rappel onChange enregistrée avec la nouvelle valeur afin de mettre à jour le modèle du formulaire.

select(rating: number): void {
  this.value = rating;
  this.onChange(rating);
}

Relier le modèle

Le modèle affiche l’état actuel et déclenche votre gestionnaire lors des actions de l’utilisateur ; celui-ci appelle ensuite onChange.

template: '<button *ngFor="let s of stars" (click)="select(s)" [class.on]="s <= value">star</button>'

Garder la vue synchronisée

Comme writeValue met à jour l’état interne et que le modèle s’y lie, les modifications programmatiques du formulaire (comme patchValue) sont immédiatement reflétées dans votre composant.

Compatible avec OnPush

Avec la détection des changements OnPush, mettez à jour l’état par l’intermédiaire des champs du composant et laissez les liaisons réagir. Si vous le modifiez depuis des sources asynchrones, demandez une nouvelle vérification ou utilisez des signaux pour maintenir la vue à jour.

N’appelez pas onChange dans writeValue

Important : n’appelez jamais onChange depuis writeValue. Cela renverrait les mises à jour programmatiques vers le modèle et pourrait provoquer des boucles. onChange sert uniquement aux modifications déclenchées par l’utilisateur.

Typage de la valeur

Donnez à votre contrôle un type de valeur concret (nombre, chaîne de caractères ou interface personnalisée) et tapez les méthodes en conséquence pour une intégration plus sûre avec les formulaires réactifs.

export class RatingComponent implements ControlValueAccessor {
  value = 0;
  writeValue(v: number) { this.value = v ?? 0; }
  registerOnChange(fn: (v: number) => void) { this.onChange = fn; }
}

Résultat jusqu’à présent

Avec writeValue et registerOnChange implémentés, le contrôle lit les données du modèle de formulaire et y écrit des données. Vous allez maintenant ajouter la gestion de la désactivation et de l’état touché pour une expérience utilisateur complète.

Vérification rapide

Vérifiez vos connaissances sur l’écriture des valeurs.

Récapitulatif

Vous avez implémenté writeValue (du modèle vers la vue, avec gestion de null) et utilisé la fonction de rappel registerOnChange pour émettre les modifications de l’utilisateur (de la vue vers le modèle), relié le modèle, et appris qu’il ne faut jamais appeler onChange depuis writeValue.

Questions Fréquemment Posées

La leçon « Écrire et enregistrer des valeurs » est-elle gratuite ?

Oui — le texte complet de « Écrire et enregistrer des valeurs » 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 « Écrire et enregistrer des valeurs » ?

Implémentez writeValue et les fonctions de rappel de changement 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 2 sur 4.

Combien de temps prend la leçon « Écrire et enregistrer des valeurs » ?

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