Formularios Reactivos en Angular

Los formularios reactivos en Angular también se conocen como formularios dirigidos por modelos, los formularios se diseñan en él y luego se realizan los enlaces para el HTML usando la inyección de dependencias en el constructor.

Cuando hablamos de formularios reactivos no usamos la directiva ngModel, sino que creamos modelos con los que Angular creará los formularios, manteniendo la lógica de nuestra aplicación web en una sola parte.

Para usarlos tenemos que importar el módulo en app.module.ts

Crear un formulario

Si quisiéramos crear, por ejemplo, un formulario de perfil de usuario lo haríamos de la siguiente forma:

En el typescript del componente del formulario que queremos validar creamos un FormGroup con un FormControl por cada campo.

Pero ¿qué es un FormGroup y un FormControl? Un FormControl es un objeto que se usa en los formularios para tener un control sobre su valor en el formulario. Un FormGroup es un conjunto de FormControls, en el caso de que uno de los FormControl sea inválido todo el grupo lo será.

Como se muestra en la siguiente imagen, en el HTML del componente conectaremos los campos con los creados en el typescript.

Estados de cambio y validación

Los formularios y controles reactivos están gestionados por máquinas de estados que determinan en todo momento la situación de cada control y del formulario en sí mismo.

El estado inicial del formulario es invalido. Podemos acceder al estado del formulario a través del atributo status, y al valor de los controles del formulario con el atributo value ambos pertenecientes a la clase FormGroup.

Estados de validación: Al establecer una o más reglas para uno o más controles activamos el sistema de chequeo y control del estado de cada control y del formulario en su conjunto.

Cuando un control incumple con alguna regla de validación, estas se reflejan en su propiedad errors que será un objeto con una propiedad por cada regla insatisfecha y un valor o mensaje de ayuda guardado en dicha propiedad.

• VALID: el control ha pasado todos los chequeos
• INVALID: el control ha fallado al menos en una regla.
• PENDING: el control está en medio de un proceso de validación
• DISABLED: el control está desactivado y exento de validación

Estados de modificación: Los controles, y el formulario, se someten a otra máquina de estados que monitoriza el valor del control y sus cambios.

Como en el caso de los estados de validación, el formulario también se somete a estos estados en función de cómo estén sus controles.

• PRINSTINE: el valor del control no ha sido cambiado por el usuario
• DIRTY: el usuario ha modificado el valor del control.
• TOUCHED: el usuario ha tocado el control lanzando un evento blur al salir.
• UNTOUCHED: el usuario no ha tocado y salido del control lanzando ningún evento blur.

Uno de los casos más usado es deshabilitar el botón de envío cuando la validación de algún control falla.

Crear Validadores

Primero debemos importar en el typescript del componente los validadores, podemos añadir validaciones que nos vienen por defecto creadas o crear unas personalizadas.

Para implementarlas solamente las añadimos como parámetros de los FormControl que creamos anteriormente, es importante resaltar que podemos añadir más de una validación al control, pero en ese caso los tendremos que añadir en formato de array.

Hay diferentes tipos de validadores ya implementados como, por ejemplo:

• Required: comprueba que el control no este vacío.
• Email: comprueba que el control tenga un formato de email valido.
• Min: comprueba que el control tenga un número igual o mayor que el indicado.
• Max: comprueba que el control tenga un número igual o menor que el indicado.
• MaxLength: comprueba que el control tenga como máximo el número de caracteres indicado.
• MinLenth: comprueba que el control tenga como mínimo el número de caracteres indicado.
• Pattern:  comprueba que el campo cumpla con un patrón de correo válido.

Validaciones personalizadas

Lo único que se necesita es una función que recibe como argumento el control a validar. El resultado debe ser un null si todo va bien. Y cualquier otra cosa en caso de fallo. Por ejemplo, podemos crear una validación para que el apellido del usuario incluya Perez.

Para que nos muestre los mensajes de error, añadiremos en el HTML condicionales como este que mostrara un mensaje si no se cumplen todas las validaciones (también se pueden poner mensajes para cada validador por separado)

¿Por qué comprobar sucio y tocado?
Es posible que no deseemos que nuestra aplicación muestre errores antes de que el usuario tenga la oportunidad de editar el formulario. Las comprobaciones de sucio y tocado evitan que se muestren errores hasta que el usuario hace una de dos cosas: cambia el valor, pone el control sucio; o difumina el elemento de control de formulario, configurando el control como tocado.

Este sería el resultado de las validaciones realizadas:

FormBuilder

Crear instancias de control de formularios de forma manual puede volverse repetitivo cuando se trata de múltiples formularios. El servicio FormBuilder proporciona métodos convenientes para generar controles.

Para poder utilizarlo lo importaremos de “@angular/forms”. Si añadimos FomrBuilder ya no necesitaremos tener importado FormControl.

A continuación, lo inyectaremos en el constructor y cambiaremos la forma de crear los controles sustituyendo las inicializaciones del FormGroup y FormControl con la sintaxis que se ve en la siguiente imagen.

FormBuilder no añade ninguna funcionalidad, pero sirve para simplificar el código y es útil si necesitas hacer muchos formularios.

Conclusiones

Personalmente, recomiendo el uso de FormBuilder (o en su defecto FormGroup con FormControl) sobre NgModel, sobre todo para formularios, ya que Angular proporciona mecanismos que facilitan la validación de los parámetros y el estado de los mismos, haciendo que el código sea mucho más visual y limpio.

Autor: Alberto Mingo Hernández.

Curso: Microsoft MCSA Web Applications + Microsoft MCSD App Builder +
Xamarin.

Centro: Tajamar.

Año académico: 2019-2020.

GitHub