Skip to main content
1 de 3
josanangel
  • 2.4k
  • 1
  • 24
  • 66

Angular7 reactiveForm

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.

josanangel
  • 2.4k
  • 1
  • 24
  • 66