Angular: 40. Formularios. Precargar datos en el formulario y resetear sus campos

Vamos a ver, por un lado, cómo precargar los campos de un formulario con la información que tengamos en un objeto, y por otro, cómo resetear correctamente los campos de un formulario.

Siguiendo con nuestra aplicación, recordemos que la validación del formulario la hacíamos mediante data utilizando un FormGroup en el constructor:

Si informamos el primer parámetro de cada FormControl, ése será el valor que tendrá inicialmente cada campo del formulario. Podemos crearnos de nuevo el objeto "usuario" y asignarle el valor de cada atributo a cada campo del formulario:

Si arrancamos la aplicación, comprobamos que los campos del formulario tienen ya cargados los valores del objeto usuario:

Esta forma de precargar los datos del formulario funciona correctamente. Sin embargo, si nuestro formulario tiene muchos campos, resulta más cómodo y correcto cargar los datos seteando directamente el objeto usuario al formulario al final del constructor:

Si arrancamos la aplicación, comprobaremos que sigue funcionando igual y que los campos tienen los valores cargados. Como nota importante, esta forma sólo funcionará si la estructura de atributos del objeto usuario es igual a la estructura de atributos del formulario, como es nuestro caso.

Ahora vamos a ver cómo podemos resetear nuestro formulario. Lo que queremos hacer es que, cuando pulsemos en el botón de guardar, se vuelva a cargar el formulario con los campos en blanco.
Para ello, al final de la función a la que llama el botón de guardar, utilizamos el método "reset" del formulario y le pasamos un objeto con los campos en blanco:

Ahora si arrancamos la aplicación, vemos los campos precargados con los datos del objeto usuario:

Y si hacemos clic en el botón, los campos se pondrán en blanco:

Como nota, cada vez que se quiera resetear un formulario, es importante que se utilice el método "reset", ya que, si simplemente informamos cada campo con un valor vacío sin utilizar el reset, los campos de formulario no tendrán las clases css "ng-untouched" y "ng-pristine" que Angular aplica a los campos de formularios que están nuevos y no han sido modificados.

Y eso es todo.