Angular (JavaScript) Confirm password validation message?

Question

so i have a password and confirm password and I obviously need to match and show a message if not match.

my requirements:

1. the message should only show after the confirm password (second input)input.

my setup now is, when user blur out confirm password(second input) the function runs and throw err message if no match and also is dynamically hidden when user type the correct password (used onkeyup) that matches password input (first input)

problem: if the user go back and change the first input no message is shown. if I use the same onblur function on password (first input), then the message shows before I input anything in the second field (confirm password). how do i fix this?

 $onInit = () => {
        let self = this;

        this.siRole.getRoles().then((roleList) => {
            self.roleList = roleList.filter((r) => {return !r.hidden});
        }, (err) => {
            self.siAlertDialog.error(err.message);
        })
        this.hide = true;
    }

    passwordWatchOnblur = ()=>{
     this.hide =  this.newUser.password == this.newUser.confirmPassword ? true :false  
      }
    passwordWatchOnkeyup = ()=>{
          if(this.newUser.password == this.newUser.confirmPassword){
              this.hide=true;
          } 
    }

    <div layout layout-xs='column'>
        <md-input-container flex class="md-accent">
          <label translate="LABELS.PASSWORD"></label>
          <input  ng-model='$ctrl.newUser.password' type='password'  required/>
        </md-input-container>
        <md-input-container flex class="md-accent">
          <label translate="LABELS.CONFPASS"></label>
          <input id="confirm" ng-model='$ctrl.newUser.confirmPassword' type='password' ng-blur="$ctrl.passwordWatchOnblur()" ng-keyup="$ctrl.passwordWatchOnkeyup()" required/>
          <span ng-hide="$ctrl.hide"  class='label-error'>{{'SI-MESSAGES.PASS-NO-MATCH'|translate}}</span>
        </md-input-container>
      </div>

Answer 1

Possible solution:

Use the same onkeyup function on password (first input) and modify passwordWatchOnkeyup like tihs:

passwordWatchOnkeyup = () => {
    this.hide =  typeof this.newUser.confirmPassword === 'undefined' || this.newUser.confirmPassword === null || this.newUser.password == this.newUser.confirmPassword;
}

Why: If there is no confirmPassword or they both are equal, then hide message.

---

UPDATE (added alternative for passwordWatchOnblur function)

... or you can use this (passwordWatchOnblur) function on the onblur on password (first input)

passwordWatchOnblur = () => {
    this.hide =  typeof this.newUser.confirmPassword === 'undefined' || this.newUser.confirmPassword === null || this.newUser.password == this.newUser.confirmPassword;
}

P.S.: The content of the functions are the same. What changes is the time where they are called. With the passwordWatchOnblur being called on the onblur the message will not be shown until the user has left the input, and not while he/she is typing the password.