Publicada:

Angular + Formularios Reactivos - Ejemplo de Validación de Fecha

Ejemplo construido con Angular 14.2.12 y Reactive Forms

Este es un ejemplo rápido de cómo validar un campo de entrada de fecha en Angular con formularios reactivos. Para obtener un ejemplo de formulario de registro más detallado que incluye muchos otros campos, consulte Angular 14 - Ejemplo de Validación de Formularios Reactivos (Reactive Forms).

Aquí está en acción: (Ver en StackBlitz en https://stackblitz.com/edit/angular-reactive-forms-date-validation)


Componente de validación de fecha angular

El componente de la aplicación contiene un formulario de ejemplo (FormGroup) con un solo campo de cadena para la fecha de nacimiento (dob). El campo tiene un validador required y un validador pattern, al validador pattern se le pasa una expresión regular para probar que el campo de entrada contiene una fecha válida en el formato aaaa-mm-dd.

La fecha mostrada es diferente del valor

El patrón de expresiones regulares es diferente al formato de la fecha que se muestra, la fecha que se muestra se formatea en función de la configuración regional del navegador del usuario, pero el value real de la entrada siempre tiene el formato aaaa-mm-dd. Para obtener más información sobre el elemento de entrada de fecha html, consulte https://developer.mozilla.org/es/docs/Web/HTML/Element/input/date.

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

@Component({ selector: 'app-root', templateUrl: 'app.component.html' })
export class AppComponent implements OnInit {
    form!: FormGroup;
    submitted = false;

    constructor(private formBuilder: FormBuilder) { }

    ngOnInit() {
        this.form = this.formBuilder.group({
            dob: ['', [
                Validators.required,
                // validates date format yyyy-mm-dd with regular expression
                Validators.pattern(/^\d{4}\-(0[1-9]|1[012])\-(0[1-9]|[12][0-9]|3[01])$/)
            ]]
        });
    }

    // convenience getter for easy access to form fields
    get f() { return this.form.controls; }

    onSubmit() {
        this.submitted = true;

        // stop here if form is invalid
        if (this.form.invalid) {
            return;
        }

        // display form values on success
        alert('SUCCESS!! :-)\n\n' + JSON.stringify(this.form.value, null, 4));
    }

    onReset() {
        this.submitted = false;
        this.form.reset();
    }
}


Plantilla de componente de aplicación

La plantilla del componente de la aplicación contiene el marcado html para mostrar el formulario de validación de fecha de ejemplo en el navegador. El elemento de formulario usa la directiva [formGroup] para enlazar con el form FormGroup en el componente de la aplicación anterior.

Se muestra un mensaje de validación específico para cada validador al verificar el objeto errors para el campo de entrada (*ngIf="f.dob.errors.required" y *ngIf="f.dob.errors.pattern").

El formulario vincula el evento de envío de formulario al controlador onSubmit() en el componente de la aplicación mediante el enlace de evento Angular (ngSubmit)="onSubmit()" . Los mensajes de validación se muestran solo después de que el usuario intenta enviar el formulario por primera vez, esto se controla con la propiedad submitted del componente de la aplicación.

El evento de clic del botón de reinicio está vinculado al controlador onReset() en el componente de la aplicación mediante el enlace de evento Angular (click)="onReset()".

<div class="card m-3">
    <h5 class="card-header">Angular + Reactive Forms - Date Validation</h5>
    <div class="card-body">
        <form [formGroup]="form" (ngSubmit)="onSubmit()">
            <div class="row">
                <div class="col-6 mb-3">
                    <label class="form-label">Date of Birth</label>
                    <input type="date" formControlName="dob" class="form-control" [ngClass]="{ 'is-invalid': submitted && f.dob.errors }" />
                    <div *ngIf="submitted && f.dob.errors" class="invalid-feedback">
                        <div *ngIf="f.dob.errors.required">Date of Birth is required</div>
                        <div *ngIf="f.dob.errors.pattern">Date of Birth must be a valid date in the format YYYY-MM-DD</div>
                    </div>
                </div>
            </div>
            <div class="text-center">
                <button class="btn btn-primary me-2">Submit</button>
                <button class="btn btn-secondary" type="reset" (click)="onReset()">Reset</button>
            </div>
        </form>
    </div>
</div>

 


Suscríbete o Sígueme para actualizaciones

Suscríbete a mi canal de YouTube o sígueme en Twitter, Facebook o GitHub para recibir notificaciones cuando publique contenido nuevo.

Aparte de la codificación...

Actualmente estoy intentando viajar por Australia en motocicleta con mi esposa Tina en un par de Royal Enfield Himalayan. Puedes seguir nuestras aventuras en YouTube, Instagram y Facebook.


¿Necesita Ayuda Angular?

Buscar fiverr para encontrar ayuda rápidamente de desarrolladores Angular experimentados.