Angular: 35. Formularios. Select menu, Radios y Checkboxes

Vamos a ver cómo utilizar los componentes select menu, radios y checkboxes.

Partiendo de la aplicación de la entrada anterior, vamos a realizar la siguiente modificación en el componente:

Como se puede ver, hemos añadido los atributos país, sexo y acepta al objeto usuario. Además hemos creado un array de objetos llamado países y un array de strings llamado sexos. De éstos arrays cogeremos los datos para cargarlos en el select menu y los radios.

Ahora nos vamos a la página de Bootstrap y comprobamos que existe documentación sobre el select menu:

Así que nos creamos un select menu en nuestro componente:

Como se puede ver, hemos añadido una primera opción en blanco y las demás opciones las cargamos del array de objetos países mediante la directiva ngFor.

Ahora volvemos a la documentación de Bootstrap y le echamos un vistazo a la documentación de los radios:

Así que insertamos radios en nuestro componente:

Como se puede ver, ponemos un solo radio, pero con la directiva ngFor conseguimos que cree uno por cada elemento del array de strings sexos.

Volvemos a Bootstrap y entramos en la documentación de los checkboxes:

Y creamos uno en nuestro componente:

Como se puede ver, éste componente es más simple, ya que simplemente mapeamos su valor con el atributo "acepta" del objeto "usuario" mediante la directiva ngModel, como con los otros dos componentes anteriores, pero a éste sin embargo no hace falta cargarle ningún valor, ya que es booleano, o verdadero o falso.

Por último, añadimos la siguiente línea de código al final, fuera del formulario:

Esto nos permitirá comprobar en tiempo real el valor de los atributos del objeto usuario.

Arrancamos la aplicación y debería verse de este modo:

Ahora, si modificamos los valores del select menu, de los radios y del checkbox, comprobaremos en el código del final que los valores de los atributos se van modificando en consecuencia.

Y eso es todo.