I've got to make a form using Bootstrap and Angular, which validates the following requirements:

  • Old password, new password and confirm password are mandatory fields.
  • New password has to be equal confirm password.


My HTML-code:

<div class="container">
  <form [formGroup]="form">
    <div class="form-group">
      <label for="old_password">Old Password</label>
      <input formControlName="old_password" #oldPassword id="old_password" name="old_password" type="password" (keyup)="oldPasswordChanged(oldPassword.value)" class="form-control">
      <div *ngIf="form.get('old_password')?.touched && form.get('old_password')?.invalid" class="alert alert-danger">
        <div *ngIf="form.get('old_password')?.errors['required']">Old Password is required</div>
    <div class="form-group">
      <label for="password">New Password</label>
      <input formControlName="new_password" id="new_password" #newPassword type="password" (keyup)="newPasswordChanged(newPassword.value)" class="form-control">
      <div *ngIf="form.get('new_password')?.touched && form.get('new_password')?.invalid" class="alert alert-danger">
        <div *ngIf="form.get('new_password')?.errors['required']">New Password is required</div>
    <div class="form-group">
      <label for="password">Confirm Password</label>
      <input formControlName="confirm_password" id="confirm_password" #confirmPassword type="password" (keyup)="confirmPasswordChanged(confirmPassword.value)" class="form-control">
      <div *ngIf="form.get('confirm_password')?.touched && form.get('confirm_password')?.invalid" class="alert alert-danger">
        <div *ngIf="form.get('confirm_password')?.errors['required']">Password-Confirmation is required</div>
      <div *ngIf="doesPasswordsNotMatch" class="alert alert-danger">Passwords do not match!</div>
    <button class="btn btn-primary" type="submit">Change Password</button>

The TypeScript-component:

import { Component } from '@angular/core';
import { FormControl, FormGroup, Validators } from '@angular/forms';

  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
export class AppComponent {
  oldPassword = ""
  newPassword = ""
  sConfirmPassword = ""
  doesPasswordsNotMatch = false

  form = new FormGroup({
    old_password: new FormControl("", [
    new_password: new FormControl("", [
    confirm_password: new FormControl("", [

  oldPasswordChanged(value: string) {
    this.oldPassword = value

  newPasswordChanged(value: string) {
    this.newPassword = value

  confirmPasswordChanged(value: string) {
    this.sConfirmPassword = value
    if (this.newPassword !== this.sConfirmPassword) {
      this.doesPasswordsNotMatch = true;
    } else {
      this.doesPasswordsNotMatch = false;

Are there flaws in my code?

Is there a better way to accomplish the validation?

Other hints and comments concerning my code are appreciated as well.

  • \$\begingroup\$ You can handle passwords match check by writing custom validation function. (linked to FormGroup, not FormControl) \$\endgroup\$ Jan 17 at 8:53


Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Browse other questions tagged or ask your own question.