Validación de forma reactiva Angular

What are reactive forms in Angular?

Los formularios reactivos en Angular brindan acceso directo al modelo de objetos de formulario subyacente, ofreciendo un enfoque inmutable y explícito para manejar las entradas del formulario. A medida que los valores de esas entradas cambian con el tiempo, el estado de la forma se gestiona mediante formas reactivas, basándose en métodos fijos o inflexibles.

Lo que significa que, cada vez que se activa un cambio en el modelo de datos, los llamados operadores observables devuelven un nuevo modelo de datos, en lugar de actualizar una y otra vez el ya existente. Y eso mantiene limpio el estado de una forma.

Las formas reactivas Angular se consideran extremadamente escalables, reutilizables y robustas debido a su:

Inmutabilidad

Los formularios reactivos en Angular proporcionan una estructura de datos fija o inmutable. Una vez que se modifica el estado del modelo subyacente, se obtiene una nueva "versión" de este modelo en particular que se actualiza. Tiene nuevos valores pero permanece alineado con todos los controles (UI) en cualquier momento.

Mejor capacidad de prueba

Las pruebas son bastante sencillas con formularios reactivos y requieren menos configuración. Cuando se trata de aplicaciones grandes, esto resulta muy beneficioso. Aquí, obtiene acceso sincrónico a flujos de entrada y la posibilidad de probar el formulario y los modelos de datos sin tener que representar la interfaz de usuario.

Previsibilidad

Los formularios reactivos se construyen alrededor de flujos observables que rastrean cada cambio único en el formulario y le permiten acceder a los valores de entrada de forma sincrónica (gracias al flujo de datos bien estructurado). Lo que, a su vez, hace que las formas reactivas sean muy predecibles.

Flujo de datos consistente y estructurado

El flujo de datos en formularios reactivos Angular está bien estructurado porque la lógica del formulario está dirigida por la clase de componente. Esto le permite agregar funciones de validación directamente a la instancia de FormControl en la clase de componente. Cada vez que ocurre un cambio, Angular llama a estas funciones.

What is angular form validation?

La validación de formulario Angular es un proceso técnico integral que verifica si cualquier entrada proporcionada por un usuario en un formulario web es correcta y completa. Puede gestionar la validación en un enfoque basado en plantillas o con formularios reactivos Angular. Según lo que se ingresa, el formulario permitirá a los usuarios continuar o mostrará un mensaje de error específico para ayudar al usuario a saber dónde se equivocó al ingresar los datos.

Dependiendo de qué validador falló, el mensaje de error en pantalla brinda retroalimentación, indicando qué está mal y qué es exactamente lo que se debe completar o volver a ingresar como datos. En general, las aplicaciones utilizan formularios para permitir a los usuarios realizar tareas de ingreso de datos como registrarse, iniciar sesión, actualizar perfiles en línea, enviar información confidencial y más.

Angular ejecuta la validación del formulario cada vez que se cambia el valor de una entrada del formulario y para confirmar si las entradas de datos completadas en un formulario web por un usuario son precisas y completas. Para hacerlo correctamente, Angular llama a una lista de validadores que se ejecutan en cada cambio que ocurre.

La validación de la entrada del usuario desde la interfaz de usuario se puede realizar con formularios basados en plantillas o con formularios reactivos Angular. Ambos formularios se basan en las siguientes clases base:

• Control de formulario
• Grupo de formularios
• matriz de formularios
• ControlValueAccessor

Validación de forma reactiva Angular

Los formularios reactivos ofrecen un enfoque basado en modelos para gestionar las entradas de formularios, cuyos valores cambian con respecto al tiempo. Debido a que los formularios reactivos se crean en una clase de componente, la validación del formulario reactivo angular se realiza agregando funciones de validación directamente al modelo de control de formulario en la clase de componente.

Cuando el valor es válido, los validadores devuelven null. Si el valor no es válido, los validadores generan un conjunto de errores y usted puede mostrar un mensaje de error específico en la pantalla.

Hay validadores integrados como required, minlength, maxlength etc. Sin embargo, también puede crear sus propios validadores.

Un validador de formulario reactivo personalizado simple puede verse así:

import { Directive, OnInit } from '@angular/core';
import { Validator, NG_VALIDATORS, AbstractControl, ValidationErrors } from '@angular/forms';

@Directive({
    selector: '[dateValueValidator]',
    providers: [{ provide: NG_VALIDATORS, useExisting: DateValueValidatorDirective, multi: true }]
})
export class DateValueValidatorDirective implements Validator {
    public validate(control: AbstractControl): ValidationErrors | null {
        if (!this.isDate(control.value)) {
            return { value: true };
        }

        return null;
    }

    private isDate(value: unknown): value is Date {
        return value instanceof Date
            && !isNaN(value.getTime());
    }
}

También un validador puede ser asíncrono:

import { Directive, OnInit } from '@angular/core';
import { AsyncValidator, NG_ASYNC_VALIDATORS, AbstractControl, ValidationErrors } from '@angular/forms';
import { Observable, of } from 'rxjs';

@Directive({
    selector: '[dateValueAsyncValidator]',
    providers: [{ provide: NG_ASYNC_VALIDATORS, useExisting: DateValueAsyncValidatorDirective, multi: true }]
})
export class DateValueAsyncValidatorDirective implements AsyncValidator {
    public validate(control: AbstractControl): Observable<ValidationErrors | null> {
        if (!this.isDate(control.value)) {
            return of({ value: true });
        }

        return of(null);
    }

    private isDate(value: unknown): value is Date {
        return value instanceof Date
            && !isNaN(value.getTime());
    }
}

Angular Reactive form validation example

Veamos cómo puede configurar la validación de formulario reactiva en la práctica con este ejemplo de validación de formulario angular.

Es una demostración rápida de un formulario de reserva bastante estándar para una película. Muestra qué sucede si una o varias de las entradas del formulario están incompletas y puede ver cómo se visualiza el mensaje de error específico.

A los efectos de nuestro ejemplo de validación de formulario reactivo Angular, los campos necesarios incluyen: película, nombre completo, correo electrónico y género. A menos que los complete todos, no podrá continuar con su reserva y el book button permanecerá deshabilitado.

Entonces, si ingresa valores para el título de la película, nombre completo, teléfono y correo electrónico, se resaltarán en verde. Pero si olvida seleccionar favorite genre, este campo se resaltará en rojo, lo que indica entradas de valores incompletas. Una vez que todos los valores estén configurados correctamente, el campo se resaltará en verde, lo que indica las entradas de valores correctas. El book button se activará y el formulario podrá enviarse con éxito posteriormente.

Angular form group validation

Los grupos de formularios son básicamente un grupo de múltiples FormControlls relacionados que le permiten acceder al estado de los controles encapsulados. Angular from group validation le ayuda a realizar un seguimiento del valor de los controles de grupo o de un formulario, así como a realizar un seguimiento de la validación del estado del control del formulario. FormGroup se utiliza con FormControl.

Why would you need Angular form custom validation?

Con validadores personalizados puede abordar diferentes funciones y garantizar que los valores en un formulario cumplan ciertos criterios, lo que a veces no es posible hacer cuando se utilizan validadores integrados únicamente. Si desea validar un número de teléfono o un patrón de contraseña específico, es mejor crear un validador personalizado y confiar en la validación personalizada del formulario Angular.

Con formas reactivas, generarlas es tan fácil como escribir una nueva función. Y para los formularios basados en modelos (como el formulario reactivo en Angular), creamos funciones de validación personalizadas y las enviamos al constructor FormControl.

A continuación puede ver cómo escribir e implementar un validador de formulario personalizado en su formulario reactivo.

import { FormGroup, FormControl, Validators, ValidatorFn, ValidationErrors } from '@angular/forms';
import { Component, OnInit } from '@angular/core';

@Component({/* ... */})
export class MyComponent implements OnInit {
    public form: FormGroup;

    public ngOnInit(): void {
        this.form = new FormGroup({
            datePicker: new FormControl('', [Validators.required, this.dateValidator(new Date())])
        });
    }

    private dateValidator(val: Date): ValidatorFn {
        return (control: AbstractControl): ValidationErrors | null => {
            if (this.isDate(control.value)
                || this.valGreaterThanDate(control.value, val)) {
                return { value: true };
            }

            return null;
        }
    }

    private valGreaterThanDate(value: Date, date: Date): boolean {
        const value1 = new Date(value).setHours(0, 0, 0, 0);
        const value2 = new Date(date).setHours(0, 0, 0, 0);
        return value.getTime() > date.getTime();
    }

    private isDate(value: unknown): value is Date {
        return value instanceof Date
            && !isNaN(value.getTime());
    }
}

Additional Resources

Temas relacionados:

• combinado
• Seleccionar
• Grupo de entrada
• Selector de fechas
• Selector de tiempo

Nuestra comunidad es activa y siempre da la bienvenida a nuevas ideas.

• Ignite UI for Angular foros angulares
• Ignite UI for Angular GitHub