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>