1

Estoy intentando que mi boton quede deshabilitado a menos que la confirmacion de la contraseña coincida con la contraseña

constructor(private _formBuilder: FormBuilder){ }

resetPasswordForm = this._formBuilder.group({
    email: ['', [Validators.required, Validators.email]],
    securityQuestion: ['', Validators.required],
    answerQuestion: ['', Validators.required],
    newPassword : ['', Validators.required],
    confirmPassword : ['', Validators.required];
});

Este es mi form builder y esto son mis getters y mi funcion

get email(){
    return this.resetPasswordForm.get('email');
}
get securityQuestion(){
    return this.resetPasswordForm.get('securityQuestion');
}
get answerQuestion(){
    return this.resetPasswordForm.get('answerQuestion');
}
get newPassword(){
    return this.resetPasswordForm.get('newPassword');
}
get confirmPassword(){
    return this.resetPasswordForm.get('confirmPassword');
}

verifyPassword(){
    console.log(this.resetPasswordForm.get('confirmPassword'));

    if(this.resetPasswordForm.get("newPassword").value === this.resetPasswordForm.get('confirmPassword').value)
    {
        return this.resetPasswordForm.get('confirmPassword');
    }else{
        return this.resetPasswordForm.get('confirmPassword');   
    }
    console.log(this.resetPasswordForm.get('confirmPassword'));
}

Estos son los formControls que quiero poner como invalid o valid y estan dentro del [formGroup]="resetPasswordForm"

<div class="form-group" *ngIf="email.valid && securityQuestion.valid &&answerQuestion.valid">
<label for="newPassword">New password</label>
<input type="password" class="form-control" id="newPassword" placeholder="Write a new password"
pattern="^(?=\w*\d)(?=\w*[A-Z])(?=\w*[a-z])\S{8,16}$" 
formControlName="newPassword" 
[class.is-invalid]="newPassword.touched && newPassword.invalid">

yyyy

<div class="form-group" *ngIf="email.valid && securityQuestion.valid &&answerQuestion.valid">
<label for="confirmPassword">Confirm password</label>
<input type="password" class="form-control" id="confirmPassword" placeholder="Confirm your password"
formControlName="confirmPassword"
[class.is-invalid]="confirmPassword.touched && confirmPassword.invalid"
(keyup)="verifyPassword()">
<small *ngIf="confirmPassword.touched && !(confirmPassword.value === newPassword.value)" class="text-danger">This password is not equal.</small>


Este es el boton final:

<button type="submit" class="btn btn-primary" [disabled]="!resetPasswordForm.valid">Reset password</button>

1 respuesta 1

1

Puedes añadir un validador "global", que tenga acceso a varios elementos (FormControl) del formulario. Lo has de declarar aparte, añadiéndolo al FormGroup, no a un FormControl en particular.

Te pongo un ejemplo sencillo, usando un formulario con sólo dos campos (los de contraseña y confirmación) para evitar meter ruido y veas que es realmente sencillo una vez sabes cómo hacerlo:

El código del componente sería así:

export class AppComponent implements OnInit {
  dataForm: FormGroup;
  constructor(private fb: FormBuilder) {}

  ngOnInit() {
    this.dataForm = this.fb.group({
      password1: ["", [Validators.required, Validators.minLength(3)]],
      password2: ["", [Validators.required, Validators.minLength(3)]]
    },
    //validador para todo el formulario
    {validator: this.checkPasswords });

  }

  getErrorMsg():string {
    if (this.dataForm.valid) {
      return '';
    }
    let err = this.dataForm.errors;
    if (err && err.notSame) { //aquí sólo aparecen los errores globales!
      return 'Las contraseñas no son iguales'
    }
    return 'Las contraseñas tienen menos de 3 caracteres';
  }

  checkPasswords(group: FormGroup) {
    let pass = group.get("password1").value;
    let confirmPass = group.get("password2").value;

    return pass === confirmPass ? null : { notSame: true };
  }
}

y la plantilla HTML podría ser algo como:

<form [formGroup]="dataForm">
    <input placeholder="Password" formControlName="password1">
 <input placeholder="Confirm Password" formControlName="password2">

</form>
<div *ngIf="!dataForm.valid">{{getErrorMsg()}}</div>

Puedes verlo en ejecución aquí

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.