0

Estoy trabajando con el mat-datepicker de Material y no consigo que al introducir una fecha manualmente en el input tenga el formato DD/MM/YYYY para que salte la validacion de que solo se acepta ese formato. He creado esta validacion personalizada pero cuando introduzco 06/02/ ya me lo da como valido y no es asi. Adjunto codigo de mi validacion personalizada:

export const validarFecha = (ctrl: AbstractControl): ValidationErrors | null => {
  const myDate = new Date(ctrl.value);

  return !ctrl.value || isNaN(myDate.getTime()) || myDate.getFullYear() > 9999 ? { dateInvalid: true } : null;
}

1 respuesta 1

0

El problema es que debes validar que el formato sea correcto antes de evaluarlo con la función date. Una forma seria usando una expresion regular y asegurarte que el formato sea correcto y invocar el error previamente a evaluarlo. Puedes hacerlo de esta forma:

export const validarFecha = (ctrl: AbstractControl): ValidationErrors | null => {
  const dateRegex = /^\d{2}\/\d{2}\/\d{4}$/;
  if (!ctrl.value || !dateRegex.test(ctrl.value)) {
    return { dateInvalid: true };
  }
  
  const myDate = new Date(ctrl.value.split('/').reverse().join('/'));
  return isNaN(myDate.getTime()) || myDate.getFullYear() > 9999 ? { dateInvalid: true } : null;
}

2
  • No funciona sigue saltando la validacion de que la fecha no es correcta, aunque exactamente hay que añadir el regex y validar
    – ALV
    el 6 feb. a las 9:54
  • Podrías mostrar un fragmento del código de tu formulario donde defines con los respectivos tags tu <form... , <mat-datepicker... <mat-error... etc? tambien seria bueno ver el FormControl y la version de angular que utilizar.
    – Codimbo
    el 6 feb. a las 10:32

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.