Validación de formularios reactivos Angular

    ¿Qué son las formas reactivas en Angular?

    Los formularios reactivos en Angular brindan un acceso directo al modelo de objeto de formulario subyacente, lo que ofrece 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 del formulario es administrado por formularios reactivos, que se basan 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 inmutable o fija. 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 alineada con todos los controles (de la interfaz de usuario) en todo 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 los 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. Siempre que se produce un cambio, Angular llama a estas funciones.

    ¿Qué es la validación de forma angular?

    La validación de formularios Angular es un proceso técnico integral que verifica si cualquier dato ingresado por un usuario en un formulario web es correcto y completo. Puedes gestionar la validación con un enfoque basado en plantillas o con formularios reactivos Angular. Según lo ingresado, 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ó con el ingreso de 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 de formulario cada vez que se modifica el valor de una entrada de formulario y para confirmar si los datos ingresados en un formulario web por un usuario son precisos y completos. Para hacerlo correctamente, Angular llama a una lista de validadores que se ejecutan en cada cambio que se produce.

    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 formularios reactivos 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.

    When the value is valid, validators return null. If the value is invalid, validators generate a set of errors, and you can display a specific error message on the screen.

    There are built-in validators such as required, minlength, maxlength etc. However, you can also create your own validators.

    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());
    }
}

    Ejemplo de validación de formularios reactivos Angular

    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.

    For the purposes of our example of Angular reactive form validation, the fields which are required include: movie, full name, email, and genre. Unless you get all of them completed, you won’t be able to proceed with your booking and the book button will remain disabled.

    So, if you enter values for movie title, full name, phone, and email, they will be highlighted in green. But if you forget to select favorite genre, this field will be highlighted in red, indicating incomplete value inputs. Once the values are all set right, the field will be highlighted in green, indicating correct value inputs. The book button will be activated and the form can be successfully submitted afterwards.

    Validación de grupos de formularios Angular

    Form groups are basically a group of multiple related FormControlls that enable you to access the state of the encapsulated controls. Angular from group validation helps you track the value of group controls or a form as well as to track validation of the state of the form control. FormGroup is used with FormControl.

    ¿Por qué necesitarías una validación personalizada de formulario angular?

    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.

    With reactive forms, generating such is just as easy as writing a new function. And for model-driven forms (such is the reactive form in Angular) we create custom validation functions and send them to the FormControl constructor.

    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());
    }
}

    Recursos adicionales

    Temas relacionados:

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