Uso de Selects y Selectores Múltiples en Formularios HTML

Dominar los campos de selección en formularios reactivos es una habilidad esencial para construir interfaces dinámicas y funcionales. Aquí aprenderás cómo enlazar un select y un select múltiple con un FormControl en Angular, entendiendo las diferencias entre ambos y cómo manejar sus valores de forma reactiva.

¿Cómo enlazar un select con FormControl?

Para crear un campo de selección en un formulario reactivo, el primer paso es definir un nuevo FormControl en el componente. En este caso, se crea una propiedad llamada categoryField [01:00]:

typescript categoryField = new FormControl();

En el HTML, se utiliza la etiqueta <select> estándar de HTML5 con sus respectivas <option>. La diferencia clave frente a un formulario tradicional es que no necesitas agregar atributos name ni id. En su lugar, enlazas directamente el FormControl al elemento <select> [01:30]:

html

<p> Category: {{ categoryField.value }} <select [formControl]="categoryField"> <option value="category-1">Category 1</option> <option value="category-2">Category 2</option> <option value="category-3">Category 3</option> </select> </p>

¿Por qué separar el value del texto visible?

Cada <option> tiene dos partes importantes. El texto entre las etiquetas es lo que el usuario ve en pantalla. El atributo value es el dato que realmente se almacena y envía. Esto simula el comportamiento típico de bases de datos, donde se trabaja con un label visible y un ID representativo que identifica el registro [02:05].

Es fundamental que cada opción tenga un valor diferente. Si olvidas asignar valores distintos, el formulario no reflejará los cambios correctamente al seleccionar opciones.

¿Cómo establecer un valor por defecto en el select?

Cuando el formulario se carga, el FormControl inicia vacío. Para que una categoría aparezca seleccionada desde el inicio, debes pasar el valor correspondiente al constructor del FormControl [03:15]:

typescript categoryField = new FormControl('category-2');

Este valor debe coincidir exactamente con el atributo value de alguna de las opciones del <select>. Así, al recargar la página, la categoría dos aparecerá preseleccionada y el valor reactivo estará disponible de inmediato.

¿Cómo implementar un select de opción múltiple?

Además del select simple, Angular permite trabajar con selects donde el usuario puede elegir varias opciones simultáneamente. Para esto, se crea un nuevo FormControl independiente [04:00]:

typescript tagField = new FormControl();

La estructura HTML es prácticamente idéntica a la del select anterior. La única diferencia es agregar el atributo multiple al elemento <select> [04:50]:

html

<p> Tags: {{ tagField.value }} <select [formControl]="tagField" multiple> <option value="tag-1">Tag 1</option> <option value="tag-2">Tag 2</option> <option value="tag-3">Tag 3</option> <option value="tag-4">Tag 4</option> </select> </p>

¿Cómo se comporta el valor en un select múltiple?

Visualmente, el select múltiple muestra todas las opciones disponibles en una lista. El usuario puede seleccionar varias manteniendo presionada la tecla Shift [05:15]. Los valores seleccionados quedan almacenados separados por comas en el FormControl.

• Si seleccionas solo una opción, el valor contiene un único elemento.
• Si seleccionas varias, se genera una lista con todos los valores elegidos.

Este comportamiento es útil para representar relaciones múltiples en una base de datos, como asignar varios tags a un registro. La API de backend se encarga de procesar esa lista y crear las relaciones correspondientes.

¿Cuándo conviene usar selects dinámicos?

En los ejemplos mostrados, las opciones están escritas directamente en el HTML. Sin embargo, en aplicaciones reales las opciones suelen provenir de fuentes de datos externas, como una API o un servicio. En ese caso, se utiliza una directiva como *ngFor para iterar sobre un arreglo y renderizar las opciones de forma dinámica [04:35].

Esta técnica permite que el formulario se adapte automáticamente cuando los datos cambian, sin necesidad de modificar el template manualmente.

Ahora que comprendes cómo funcionan los selects simples y múltiples con FormControl, ¿qué tipo de formulario planeas construir? Comparte tu experiencia en los comentarios.