Angular: 32. Formularios. Obteniendo la información del formulario

Vamos a ver cómo obtener la información se un formulario.

Siguiendo la aplicación de la entrada anterior, lo primero que tenemos que hacer es importar  el "FormsModule" en el "app.module.ts":

Después, tenemos que modificar el formulario añadiéndole lo siguiente:

Como se puede ver, a la función "ngSubmit" le añadimos el parámetro "formulario", que es una variable que añadimos luego con la almohadilla y le decimos que es de tipo "ngForm".

Todo esto significa que, cuando pulsemos el botón del formulario, pasaremos todos los datos de éste a la función "guardar" del componente.

A continuación modificamos el TypeScript del formulario, añadiendo a la función guardar el parámetro "formulario" de tipo "NgForm":

Como se puede ver, también hemos añadido en la función guardar dos líneas para el log.
En la primera mostramos en el log el atributo "valid" del objeto "formulario". Este atributo nos indica si el formulario ha cumplido todas las validaciones cuando hemos pulsado en el botón.
En la segunda línea mostramos el atributo "value" del objeto "formulario". Este atributo contiene un objeto con todos los valores de los campos del formulario.

Ahora, si arrancamos la aplicación, introducimos datos válidos, y pulsamos en el botón, veremos que el log nos indica que el formulario es válido y nos muestra sus valores:

Y si introducimos valores no válidos (en éste caso, dejamos el apellido sin informar) y pulsamos en el botón, nos aparece que el formulario no es válido:

Ahora vamos a hacer algo interesante. Supongamos que queremos precargar datos en los campos del formulario, por ejemplo, datos que vengan de una base de datos.

Modificamos el componente y creamos una variable "usuario" de tipo objeto. La rellenamos con atributos y datos:

Ahora modificamos el html del componente. Modificamos la etiqueta "ngModel" de los campos de texto, añadiéndole corchetes e igualándolo al atributo correspondiente del objeto "usuario":

Hacemos lo mismo para los otros dos campos.

Arrancamos la aplicación y comprobamos que los campos empiezan ya con la información dada:

Aquí hay que comentar una cosa interesante. Si escribimos en los diferentes campos y pulsamos en el botón, podemos comprobar que el objeto "formulario" que enviamos contiene los nuevos valores que hemos introducido, en lugar de los precargados mediante el objeto "usuario". Sin embargo, el objeto "usuario" del componente sigue teniendo los campos con los valores antiguos.
Esto es porque lo que estamos enviando es un objeto nuevo, de tipo "ngForm" que se crea específicamente para recoger los datos del formulario, mientras que el objeto "usuario" original del componente no lo hemos modificado.

Existe una forma de modificar también el objeto "usuario" cuando modificamos los valores del formulario, y es añadiendo paréntesis dentro de los corchetes al atributo "ngModel" de los campos:

De ésta forma, cuando pulsamos en el botón de guardar, además de enviar los datos nuevos en el objeto del formulario, también modificamos los valores del objeto "usuario" con los nuevos valores.

Y eso es todo.