Manejar el estado de un input en Angular se vuelve mucho más limpio cuando dejas atrás los signals y empiezas a trabajar con formularios reactivos. Aprenderás a usar FormControl desde @angular/forms para leer, escuchar y reaccionar a los cambios de un input de forma profesional, una habilidad clave si trabajas como desarrollador frontend y manejas formularios todos los días.
Por qué usar formularios reactivos en Angular
Los valores de formularios son, sin exagerar, una de las cosas que más vas a ver en tu vida laboral como desarrollador web. Por eso conviene dominar una herramienta diseñada específicamente para ese trabajo.
Angular ofrece el módulo ReactiveFormsModule, que importas desde @angular/forms y declaras dentro del arreglo de imports de tu componente [01:05]. Esta importación habilita características avanzadas como validaciones síncronas y asíncronas, y un control mucho más fino sobre cada input.
¿Qué es un formulario reactivo en Angular? Es un enfoque donde la lógica del formulario vive en el componente, no en el HTML. Usas instancias de FormControl para leer y escuchar los cambios del input de manera reactiva.
La ventaja frente a los signals es que FormControl ya abstrae la lectura, la edición y el cambio del valor. No tienes que asignar manualmente ni escuchar eventos de input.
Cómo crear y enlazar un FormControl a un input
El primer paso es declarar el controlador dentro de la clase del componente. En lugar de un signal, creas una instancia nueva:
typescript
import { FormControl, ReactiveFormsModule } from '@angular/forms';
export class MiComponente {
colorControl = new FormControl();
}
En el HTML conectas ese controlador al input usando property binding con la directiva formControl [01:55]:
html
<input type="color" [formControl]="colorControl" />
El atributo type="color" activa el picker nativo del navegador, lo cual es ideal para ver el comportamiento reactivo en tiempo real.
Cómo imprimir el valor desde el HTML
Para mostrar el valor en pantalla no necesitas funciones extra. Solo lees la propiedad value del control con string interpolation:
html
<p>Color: {{ colorControl.value }}</p>
Cada vez que el usuario elige un color en el picker, el valor se actualiza automáticamente en la vista. Ese es el corazón de la reactividad: el nombre Reactive Forms no es casualidad.
Cómo escuchar los cambios desde la lógica del componente
A veces no basta con mostrar el valor en pantalla. Necesitas reaccionar desde el código, por ejemplo para validar contra una base de datos o disparar otra acción.
Para eso, FormControl expone una propiedad llamada valueChanges, que funciona como un stream de datos al que puedes suscribirte [03:20]:
typescript
constructor() {
this.colorControl.valueChanges.subscribe((value) => {
console.log(value);
});
}
Cada vez que el input cambia, el console.log imprime el nuevo valor. Esto te da control total sobre el flujo de datos sin escribir manejadores de eventos manuales.
¿Cuál es la diferencia entre value y valueChanges? value te da el valor actual en cualquier momento. valueChanges es un observable que emite cada vez que el valor cambia, ideal para reaccionar en tiempo real desde la lógica.
Qué ventajas extra ofrece FormControl
Además de leer y escuchar valores, un FormControl te abre la puerta a funciones que con signals tendrías que construir tú:
- Validaciones síncronas integradas, como campos requeridos o longitud mínima.
- Validaciones asíncronas, por ejemplo para verificar si un correo ya existe en una base de datos.
- Estado del control: saber si fue tocado, modificado o si es válido.
- Suscripción a un stream de cambios reutilizable en toda la lógica del componente.
Esa flexibilidad es la razón por la que los formularios reactivos son el estándar en aplicaciones Angular profesionales.
¿Cuándo conviene usar FormControl en lugar de un signal? Siempre que trabajes con inputs de formularios reales, sobre todo si necesitas validaciones, integración con APIs o lógica compleja sobre los valores ingresados.
La combinación de lectura reactiva en el HTML y suscripción a valueChanges desde el componente cubre prácticamente cualquier escenario que enfrentes con un input. ¿Ya estás listo para aplicarlo en tu próximo formulario? Cuéntame en los comentarios qué tipo de validación quisieras agregar primero.
