0

Buenas estoy intentando verificar el email y las contraseñas en el nuevo form reactivo de Angular 7 y a parte de las facilidades que me da el nuevo formulario aplicando ciertas reglas para la verificacion :

  this.formGroup = this.formBuilder.group({
      nombre_real:['',Validators.required],
      apellidos : '',
      email :['',Validators.required],
      nombre_usuario : ['',Validators.required],
      password : ['',Validators.required, Validators.minLength(8)],
      repetir_password:['',Validators.required, this.compararPasswords],    
      img_perfil:null,
      pais : ['',Validators.required],


    });

Quissiera añadir algunas reglas mas, pero al estilo del nuevo form de angular 7 y pues dice que cree funciones y las ponga detras del Array de validaciones que tiene cada campo, por ejemplo, creo una funcion validarEmail() pues me dirijo al array de formGroup busco el campo email y le añado la funcion tal que asi :

email:['',Validators.required,this.validarEmail]

pero me arroja errores :

ERROR Error: Expected validator to return Promise or Observable.
    at toObservable (forms.js:653)
    at Array.map (<anonymous>)
    at FormControl.asyncValidator (forms.js:641)
    at FormControl.push../node_modules/@angular/forms/fesm5/forms.js.AbstractControl._runAsyncValidator (forms.js:2920)
    at FormControl.push../node_modules/@angular/forms/fesm5/forms.js.AbstractControl.updateValueAndValidity (forms.js:2893)
    at FormControl.push../node_modules/@angular/forms/fesm5/forms.js.FormControl.setValue (forms.js:3275)
    at updateControl (forms.js:2111)
    at DefaultValueAccessor.onChange (forms.js:2096)
    at DefaultValueAccessor.push../node_modules/@angular/forms/fesm5/forms.js.DefaultValueAccessor._handleInput (forms.js:884)
    at Object.eval [as handleEvent] (RegistroComponent.html:60)

Simplemente queria hacer dos comprobaciones adicionales:

1.Comprobar que haya introducido un email valido, es decir, con un pattern valido.

2.Comprobar que la Contraseña y Repetir contraseña sean iguales.

Para estas dos comprobaciones he hecho los siguiente:

Funcion que comprueba email valido

private comprobarEmail(control:AbstractControl){
    var re = /^(([^<>()\[\]\\.,;:\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,}))$/;
    const email = control.get('email');

    let error = null;


    if (re.test(String(email).toLowerCase()) == false) {
      error = {...error, error:'Email no valido'}
    }
    return error;
  }

Funcion que comprueba que las contraseñas sean iguales

  private compararPasswords(control:AbstractControl){
    const password = control.get('password');
    const repetir_password = control.get('repetir_password');

    let error = null;


    //si no coinciden return el error 
    if (password != repetir_password) {
        error = {...error, error:'Las contraseñas no coinciden'}
    }

    return error;

  }

Y simplemente, segun la documentacion ,añado las funciones al array de reglas del cmapo que me interese, tal que asi:

 nombre_real:['',Validators.required],
  apellidos : '',
  email :['',Validators.required,this.comprobarEmail],
  nombre_usuario : ['',Validators.required],
  password : ['',Validators.required, Validators.minLength(8)],
  repetir_password:['',Validators.required, this.compararPasswords],    
  img_perfil:null,
  pais : ['',Validators.required],

Pero no da los errores que comente. No se si alguien ha tenido un problema similar. Gracias.



mi buildForm({}) ACTUALIZADO

private buildForm(){
    this.formGroup = this.formBuilder.group({
      nombre_real:['',Validators.required],
      apellidos : '',
      email :['',[Validators.required,this.checkEmail]],
      nombre_usuario : ['',Validators.required],
      password : ['',[Validators.required, Validators.minLength(8)]],
      repetir_password:['',[Validators.required,Validators.minLength(8),this.checkPassword]],    
      img_perfil:null,
      pais : ['',Validators.required],


    },
    {
      //validaciones adicionales
      validators: [[this.checkPassword]]
    }

1 respuesta 1

1

Creo que el error te viene en el AbstractControl, el parámetro que recibe ese método es un FormControl, prueba hacer el método de comprobarEmail así:

  private comprobarEmail(formControl: FormControl) {
    const email = formControl.value;
    ...
  }

Actualizado

He estado probando y ya se donde esta el problema, esta en la declaración:

email: ['', Validators.required, this.comprobarEmail]

Tiene que estar así:

email: ['', [Validators.required, this.comprobarEmail]]
10
  • Realmente la funcion debe recibir un component abstracto.
    – josanangel
    Commented el 16 abr. 2019 a las 9:42
  • En uno de mis proyectos lo tengo como te lo he mostrado, con el FormControl y me funciona. Prueba a ver si te funciona así.
    – Pacne
    Commented el 16 abr. 2019 a las 9:46
  • Acabo de probar con el AbstractControl y funciona también. Pero control.get() me devuelve null. Con control.value si que me devuelve el valor.
    – Pacne
    Commented el 16 abr. 2019 a las 9:54
  • Y de donde sale ese this.validatorEmail
    – josanangel
    Commented el 16 abr. 2019 a las 10:07
  • 1
    Has puesto los Validators dentro de los corchetes
    – Pacne
    Commented el 16 abr. 2019 a las 10:16

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.