<form [formGroup]="form">
    <div class="form-group">
        <label for="oldPassword">Old Password</label>
        <input
        formControlName="oldPassword"
            id="oldPassword"
            type="text"
            class="form-control">
            <div *ngIf="oldPassword.pending">Checking password...</div>
            <div *ngIf="oldPassword.touched && oldPassword.invalid" class="alert alert-danger">
                <div *ngIf="oldPassword.errors.required">Old password is required</div>
                <div *ngIf="oldPassword.errors.checkOldPassword">Password is incorrect</div>
            </div>
    </div>
    <div class="form-group">
        <label for="newPassword">New password</label>
        <input
        formControlName="newPassword"
            id="newPassword"
            type="text"
            class="form-control">
            <div *ngIf="newPassword.touched && newPassword.invalid" class="alert alert-danger">
                <div *ngIf="newPassword.errors.required">New password is required</div>
            </div>
    </div>
    <div class="form-group">
        <label for="confirmNewPassword">Confirm new password</label>
        <input
        formControlName="confirmNewPassword"
            id="confirmNewPassword"
            type="text"
            class="form-control">
            <div *ngIf="confirmNewPassword.touched && confirmNewPassword.invalid" class="alert alert-danger">
                <div *ngIf="confirmNewPassword.errors.required">Confirm password is required</div>
                <div *ngIf="confirmNewPassword.errors.confirmNewPassword">Passwords don't match</div>
            </div>
    </div>
    <button class="btn btn-primary" type="submit">Change Password</button>
</form>

import { Component, OnInit } from '@angular/core';
import { FormGroup, FormControl, Validators } from '@angular/forms';
import { PasswordValidators } from './password.validators';

@Component({
  selector: 'new-password',
  templateUrl: './new-password.component.html',
  styleUrls: ['./new-password.component.css']
})
export class NewPasswordComponent {
  form = new FormGroup({
    oldPassword: new FormControl('', Validators.required, PasswordValidators.checkOldPassword),
    newPassword: new FormControl('', Validators.required),
    confirmNewPassword: new FormControl('', Validators.required )
  })

  get oldPassword() {
    return this.form.get('oldPassword');
  }

  get newPassword() {
    return this.form.get('newPassword');
  }

  get confirmNewPassword() {
    return this.form.get('confirmNewPassword');
  }

  addNewPassword(newPassword: HTMLInputElement) {
    let np = this.newPassword;
    return np;
  }

}

import { AbstractControl, ValidationErrors } from '@angular/forms';

export class PasswordValidators {


  static checkOldPassword(control: AbstractControl) : Promise<ValidationErrors | null> {
    return new Promise((resolve, reject) => {
      setTimeout(() => {
          if(control.value !== '1234')
            resolve({ checkOldPassword: true }) ;
          else resolve(null);
      }, 2000);
    });
  }

  static confirmNewPassword(control: AbstractControl) : ValidationErrors | null {
          if(control.value === control.newPassword.value)
            return null;
  }

}