Skip to main content
se añadieron 741 caracteres en el cuerpo
Origen Enlace
josanangel
  • 2.4k
  • 1
  • 24
  • 66

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]]
    }
    

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

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]]
    }
    
título editado
Enlace
josanangel
  • 2.4k
  • 1
  • 24
  • 66

Angular7 reactiveForm validar campo Email y campos Contraseña + Repetir Contraseña

Origen Enlace
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.