Angular – How to Handle Password Confirmation Logic

This blog represents code samples and related concepts on how to handle password confirmation logic in an Angular app (Angular 2/Angular 4). Note that the code samples make use of template-driven forms and uses [(ngModel)] for two-way data bindings.

Following are key aspects discussed in this blog:

• Template code for handling password confirmation logic
• Component code for handling password confirmation logic
• Signup model code

In this blog, it is considered that password confirmation logic is a key part of signup form. Thus, a model name Signup is used. However, the logic can also be used in update password form.

Following screenshot represents password confirmation UI related with the code given in this blog:

Figure 1. Password Confirmation Logic in Angular Form

Template Code for handling Password Confirmation Logic

<div class="form-group">
  <label for="password"><strong>Password</strong></label>
  <input type="password" class="form-control" id="password" [(ngModel)]="signup.password" name="password" (blur)="confirmPassword()" required placeholder="Password" #pswd="ngModel"/>
</div>


<div [hidden]="pswd.valid || pswd.pristine" class="alert alert-danger">Password is required</div>


<div class="form-group">
  <label for="cnfpassword"><strong>Confirm password</strong></label>
  <input type="password" class="form-control" id="cnfpassword" [(ngModel)]="passwordConfirmationTxt" required (blur)="confirmPassword()" name="passwordConfirmationTxt"/>
</div>


<div [hidden]="!passwordConfirmationFailed" class="alert alert-danger">Password did not match</div>

Pay attention to some of the following in above code:

• Usage of (blur) event handler to invoke the method, confirmPassword
• Usage of template reference variable #pswd for tracking changes to required field, password
• Usage of passwordConfirmationFailed property to display the message “Password did not match” based on the whether its value is true or flag. Note the usage of [hidden]

Component Code for handling Password Confirmation Logic

export class SignupComponent {
  passwordConfirmationFailed = false;
  passwordConfirmationTxt = '';

  signup = new Signup('', '', '', '');

  confirmPassword() {
    if (this.signup.password === this.passwordConfirmationTxt) {
      this.passwordConfirmationFailed = false;
    } else {
      this.passwordConfirmationFailed = true;
    }
  }
}

Signup Model Code

export class Signup {

  constructor (
    public email: string,
    public name: string,
    public password: string,
    public country: string,
  ) {  }

}

In case you are developing web apps using Spring and Angular, check out my book, Building web apps with Spring 5 and Angular. Grab your ebook today and get started.

• Author
• Recent Posts

Follow me

Ajitesh Kumar

I have been recently working in the area of Data analytics including Data Science and Machine Learning / Deep Learning. I am also passionate about different technologies including programming languages such as Java/JEE, Javascript, Python, R, Julia, etc, and technologies such as Blockchain, mobile computing, cloud-native technologies, application security, cloud computing platforms, big data, etc. For latest updates and blogs, follow us on Twitter. I would love to connect with you on Linkedin.
Check out my latest book titled as First Principles Thinking: Building winning products using first principles thinking. Check out my other blog, Revive-n-Thrive.com

Follow me

Latest posts by Ajitesh Kumar (see all)

• MSE vs RMSE vs MAE vs MAPE vs R-Squared: When to Use? - April 25, 2024
• Gradient Descent in Machine Learning: Python Examples - April 22, 2024
• Loss Function vs Cost Function vs Objective Function: Examples - April 19, 2024