0

Tengo un problema al intentar validar el correo electronico desde un input, estoy usando Validators.pattern con una expresion regular pero no funciona como quiero y no he logrado dar con el problema, la validación que tengo es esta: signinForm = new FormGroup({ email: new FormControl('',[Validators.required, Validators.pattern('^[^@]+@[^@]+\.[a-zA-Z]{2,}$')]), pass: new FormControl('',[Validators.required]), }); y el problema es que mientras voy escribiendo el correo, hay un cierto punto en el que es valido y otro en el que no es válido, espero explicarme mejor con imágenes:

por ejemplo en este punto es válido el correo:

introducir la descripción de la imagen aquí

si escribo una letra más, entonces es válido, así:

introducir la descripción de la imagen aquí

luego cuando sigo escribiendo hasta el punto me vuelve a decir que es inválido:

introducir la descripción de la imagen aquí

y luego cuando termino de escribir el correo se muestra valido:

introducir la descripción de la imagen aquí

No entiendo que sucede, veo que la expresión regular está bien, que puede estar pasando?

5
  • Amigo, disculpa, pero por lo que tengo entendido de esa forma es como se valida con una expresión regular. Funciona similar a un evento keydown por lo que por cada caracter que quites/agregues se hará la validación
    – harifo
    Commented el 10 mar. 2020 a las 17:26
  • Y sería correcto eso? lo que sucede es que en la imagen numero 2, cuando el correo es de esta forma: " hola@hotm " se entiende como un correo válido y entonces el boton de Ingresar se habilita y no debería ser así.
    – JulianProg
    Commented el 10 mar. 2020 a las 17:29
  • En las notas de librería sale que existen algunas validaciones que si están permitidas y es parte de la libreria que lo admita. A simple vista me parece que a la expresión regular le falta una validación POST punto final. Sin embargo, la librería dice expresamente que _ * Si este patrón no satisface las necesidades de su negocio, puede usar Validators.pattern () para * validar el valor contra un patrón diferente. _ Por lo que puedes hacer es buscar o crear el patron correcto para cubrir ese punto
    – harifo
    Commented el 10 mar. 2020 a las 17:32
  • Intenta con pattern y usando esta expresión Validators.pattern("^[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,4}$")])
    – harifo
    Commented el 10 mar. 2020 a las 17:36
  • @harifopiñerarenuncia Si, es que de hecho estoy usando validators.pattern, arriba donde redacto mi pregunta coloque el código que tengo. pero no entiendo porque toma " hola@hotm " como un correo valido, no tiene el punto ni los 2 caracteres después del punto, probé con la expresión que comentaste pero sucede lo mismo. lo que quiero es que sea un correo válido hasta que tenga el patron correcto, es decir, algo así: [email protected]
    – JulianProg
    Commented el 10 mar. 2020 a las 17:41

1 respuesta 1

2

Amigo, tengo tu solución y es mas que todo la expresión regular que estás utilizando. Cambiar por lo siguiente:

Validators.pattern(/^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/)

Y deberia validar comodamente hasta un .co

Comparado con tu respuesta: Validators.pattern('^[^@]+@[^@]+\.[a-zA-Z]{2,}$')]) la expresión regular que te dejé valida POST punto, validador de cantidad de caracteres, validador de caracteres especiales (ñ,*,^, entre otros) y longitud minima de cadenas antes y después del @ te dejo mayor información de cadenas de expresión regular en el siguiente link

Te dejo la demostración en el siguiente link

5
  • Excelente, eso era lo que buscaba amigo. cual era el error comparada con la expresión que yo tenía? no entendí por que el correo de la siguiente forma " hola@hotm " lo tomaba como valido, si en la expresión trataba de indicar que luego del @ tenian que venir unos caracteres, el punto y luego 2 caracteres mas como mínimo.
    – JulianProg
    Commented el 10 mar. 2020 a las 18:01
  • Edité mi respuesta, mas o menos explicando las diferencias entre expresiones regulares que fueron construidas con distintas validaciones.
    – harifo
    Commented el 10 mar. 2020 a las 18:10
  • Gracias! voy a comparar ya que me cuesta un poco.
    – JulianProg
    Commented el 10 mar. 2020 a las 18:31
  • una pregunta... veo que en el ejemplo de stackblitz usas form.controls.emailIn yo estaba usando esto: form.get('emailIn') , esta mal si lo hago de esa forma? estoy comenzando en Angular, y estuve buscando en la documentacion esa forma que usaste tu pero no la encontré.
    – JulianProg
    Commented el 10 mar. 2020 a las 18:59
  • Según lo que tengo entendido, el form.control se utiliza directamente para obtener los controles de la páginaal igual que FormGroup.get, pero este ultimo está diseñado para acceder al control de formulario objetivo por medio de él path. Y se usa con más frecuencia para situaciones complicadas ( incrustación de múltiples capas ), lo que facilita obtener el control de destino desde el formulario de incrustación de múltiples capas y también hace que el código sea claro y fácil de entender.
    – harifo
    Commented el 10 mar. 2020 a las 19:04

Tu Respuesta

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

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