Escribir y registrar valores
Implementar writeValue y las callbacks de cambio
Escribir y registrar valores es una lección gratuita de Angular Academy en CoddyKit. Esta es la lección 2 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de Angular Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de Angular Academy incluye 4 lecciones en total.
Dos métodos fundamentales
La esencia de un accesor de valores consiste en mover los datos en ambas direcciones: writeValue introduce en la vista el valor del modelo, y la función de retorno de registerOnChange envía las ediciones del usuario al modelo.
writeValue
Angular llama a writeValue cuando el formulario establece o restablece el valor del control. Guárdelo en el estado del componente para que la vista lo refleje.
value = 0;
writeValue(value: number): void {
this.value = value ?? 0;
}Gestionar null
writeValue puede recibir null al restablecerse. Normalícelo a un valor predeterminado seguro para que la plantilla no falle.
writeValue(value: string | null): void {
this.text = value ?? '';
}registerOnChange
Angular le proporciona una función de retorno que debe llamar cada vez que cambie el valor. Guárdela; la invocará cuando el usuario interactúe.
private onChange: (v: number) => void = () => {};
registerOnChange(fn: (v: number) => void): void {
this.onChange = fn;
}Emitir cambios
Cuando el usuario interactúe, actualice el estado interno y llame a la función de retorno onChange almacenada con el nuevo valor para actualizar el modelo del formulario.
select(rating: number): void {
this.value = rating;
this.onChange(rating);
}Conectar la plantilla
La plantilla muestra el estado actual y activa su controlador cuando el usuario realiza acciones; este, a su vez, llama a onChange.
template: '<button *ngFor="let s of stars" (click)="select(s)" [class.on]="s <= value">star</button>'Mantener la vista sincronizada
Como writeValue actualiza el estado interno y la plantilla se enlaza a él, los cambios programáticos del formulario (como patchValue) se reflejan inmediatamente en el componente.
Compatible con OnPush
Con la detección de cambios OnPush, actualice el estado mediante los campos del componente y deje que reaccionen los enlaces. Si realiza modificaciones desde fuentes asíncronas, marque el componente para comprobación o utilice signals para mantener actualizada la vista.
No llame a onChange en writeValue
Importante: no invoque nunca onChange desde dentro de writeValue. Esto devolvería las actualizaciones programáticas al modelo y podría provocar bucles. onChange solo debe utilizarse para cambios iniciados por el usuario.
Tipar el valor
Asigne a su control un tipo de valor concreto (número, cadena o una interfaz personalizada) y tipifique los métodos en consecuencia para lograr una integración más segura con los formularios reactivos.
export class RatingComponent implements ControlValueAccessor {
value = 0;
writeValue(v: number) { this.value = v ?? 0; }
registerOnChange(fn: (v: number) => void) { this.onChange = fn; }
}Resultado hasta ahora
Con writeValue y registerOnChange implementados, el control lee del modelo del formulario y escribe en él. A continuación, añadirá la gestión de estados deshabilitado y tocado para completar la experiencia de usuario.
Comprobación rápida
Compruebe sus conocimientos sobre la escritura de valores.
Resumen
Implementó writeValue (del modelo a la vista, gestionando null) y utilizó la devolución de llamada registerOnChange para emitir los cambios del usuario (de la vista al modelo), conectó la plantilla y aprendió que nunca debe llamar a onChange desde writeValue.
Preguntas frecuentes
¿La lección «Escribir y registrar valores» es gratis?
Sí — el texto completo de «Escribir y registrar valores» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de Angular Academy, actualiza a CoddyKit PRO. El curso de Angular Academy incluye 4 lecciones en total.
¿Qué aprenderé en «Escribir y registrar valores»?
Implementar writeValue y las callbacks de cambio Practicas Angular Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.
¿Necesito experiencia previa para empezar Angular Academy?
No se requiere experiencia previa. Angular Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 2 de 4.
¿Cuánto tiempo toma la lección «Escribir y registrar valores»?
La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.
¿Puedo escribir y ejecutar código en esta lección de Angular Academy?
Sí. Cada lección de Angular Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.
Todas las lecciones de este curso
- La interfaz ControlValueAccessor
- Escribir y registrar valores
- Gestionar los estados deshabilitado y tocado
- Validación en controles personalizados