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