Cómo disparar la validación en Reactive Forms de Angular

Hoy estuve probando formularios dinámicos con mi amigo @alt148 y descubrimos que modificar un control puede disparar la validación varias veces durante el proceso. Por ejemplo, si tenemos un formulario con un campo de texto, con cada tecla que presionamos, el formulario escucha el evento y ejecuta las validaciones.

Esto puede resultar molesto, porque si tienes elementos en la interfaz que reaccionan cada vez que el formulario valida, la experiencia de usuario no es la ideal. Para entender mejor el problema, planteemos el siguiente escenario:

Escenario

Tenemos un formulario y queremos mostrar un mensaje cuando sea válido:

 formOne = new FormGroup({
    email: new FormControl('', [Validators.required, Validators.email]),
    name: new FormControl('', [Validators.required]),
  });
 
  formOneStatus$ = this.formOne.statusChanges.pipe(
    map((v) => v + Date.now().toString())
  );

Para observar con qué frecuencia se dispara la validación, nos suscribimos al observable statusChanges del formulario. Ten en cuenta que no se ejecutan todas las validaciones del formulario, sino únicamente la del control que estás modificando. Angular propaga ese resultado a la propiedad de validación del grupo (FormGroup). Aunque no se revalidan todos los campos, el cambio de estado emitirá un nuevo valor cada vez que cualquier control reciba cambios.

Añadimos la fecha para diferenciar cada una de las emisiones:

My form status {{ formOneStatus$ | async }}
<form [formGroup]="formOne">
  Name:<input formControlName="name" type="text" /> Email:<input
    formControlName="email"
    type="text"
  />
</form>

Cada vez que presionamos una tecla, la validación se dispara. Esto afecta tanto al rendimiento como a la experiencia de usuario, ya que el usuario ve los estados de válido o inválido con cada pulsación.

Cambiar el comportamiento por defecto del formulario

Revisando la documentación oficial de Angular sobre cómo los formularios reactivos disparan la validación ante cada cambio, encontramos una solución.

Angular ofrece una opción para modificar este comportamiento por defecto. Tenemos tres alternativas:

• 'change': es la opción por defecto y escucha cada cambio.
• 'blur': se dispara con el evento blur del input (cuando pierde el foco).
• 'submit': se dispara únicamente al enviar el formulario.

Podemos agregar un objeto de configuración adicional en la declaración del grupo con la propiedad updateOn y el valor 'blur':

formOne = new FormGroup(
    {
      email: new FormControl('', [Validators.required, Validators.email]),
      name: new FormControl('', [Validators.required]),
    },
    {
      updateOn: 'blur',
    }
  );

Con este cambio, nuestro formulario sigue funcionando con normalidad, pero ahora solo dispara la validación en el evento blur y no con cada pulsación de tecla.

Note: Ten cuidado, ya que si utilizas elementos que no emiten el evento blur, no se dispararán los cambios.

Puedes probar este comportamiento directamente en la demo interactiva en StackBlitz.