La interfaz ControlValueAccessor
Conectar un widget personalizado a los formularios de Angular
La interfaz ControlValueAccessor es una lección gratuita de Angular Academy en CoddyKit. Esta es la lección 1 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.
Por qué crear controles personalizados
Los formularios de Angular funcionan con entradas nativas desde el principio. Para que su propio componente (un widget de valoración, un selector de color o un interruptor) se pueda utilizar con ngModel y formControlName, debe implementar ControlValueAccessor.
El puente
ControlValueAccessor (CVA) es el puente entre el modelo de formulario de Angular y la vista de su componente. Define cómo el modelo escribe valores en el componente y cómo los cambios del usuario regresan al modelo.
La interfaz
CVA requiere cuatro métodos: writeValue, registerOnChange, registerOnTouched y el método opcional setDisabledState.
interface ControlValueAccessor {
writeValue(value: any): void;
registerOnChange(fn: (v: any) => void): void;
registerOnTouched(fn: () => void): void;
setDisabledState?(isDisabled: boolean): void;
}Registrar el proveedor
Indique a Angular que su componente es un accesor de valores proporcionando NG_VALUE_ACCESSOR con multi: true y useExisting apuntando al componente.
import { NG_VALUE_ACCESSOR } from '@angular/forms';
import { forwardRef } from '@angular/core';
providers: [{
provide: NG_VALUE_ACCESSOR,
useExisting: forwardRef(() => RatingComponent),
multi: true
}]Por qué forwardRef
forwardRef es necesario porque la clase se referencia a sí misma en sus propios metadatos antes de estar definida. Aplaza la resolución hasta que la clase existe.
Estructura básica del componente
Un control personalizado declara el proveedor e implementa los métodos de la interfaz. La clase mantiene internamente el valor actual.
@Component({
selector: 'app-rating',
providers: [/* NG_VALUE_ACCESSOR ... */]
})
export class RatingComponent implements ControlValueAccessor {
value = 0;
// writeValue, registerOnChange, registerOnTouched ...
}Usarlo como uno nativo
Una vez implementado CVA, su componente se integra en los formularios basados en plantillas y reactivos exactamente igual que una entrada nativa.
<app-rating formControlName="stars"></app-rating>
<!-- or -->
<app-rating [(ngModel)]="stars"></app-rating>Dos direcciones de los datos
El flujo del modelo a la vista pasa por writeValue (Angular introduce el valor del formulario). El flujo de la vista al modelo pasa por la función de retorno registrada en registerOnChange (su componente envía los cambios del usuario).
Seguimiento del estado touched
La experiencia de usuario de la validación del formulario depende del estado touched. Notifique a Angular mediante la función de retorno de registerOnTouched, normalmente al perder el foco.
Estado deshabilitado
Cuando el formulario deshabilita el control (control.disable()), Angular llama a setDisabledState para que su componente pueda reflejarlo visualmente e ignorar la entrada.
Hoja de ruta
En las próximas lecciones se implementará cada pieza: escribir y registrar valores, gestionar los estados deshabilitado y touched, y añadir validación. En conjunto, permiten crear un control personalizado completamente integrado.
Comprobación rápida
Compruebe sus conocimientos básicos de CVA.
Resumen
Aprendió que ControlValueAccessor conecta los componentes personalizados con los formularios de Angular mediante cuatro métodos, registrados a través de NG_VALUE_ACCESSOR con forwardRef y multi: true. A continuación, implementará la escritura y el registro de valores.
Preguntas frecuentes
¿La lección «La interfaz ControlValueAccessor» es gratis?
Sí — el texto completo de «La interfaz ControlValueAccessor» 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 «La interfaz ControlValueAccessor»?
Conectar un widget personalizado a los formularios de Angular 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 1 de 4.
¿Cuánto tiempo toma la lección «La interfaz ControlValueAccessor»?
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