Angular（JavaScript）确认密码验证消息？

Question

所以我有一个密码并确认密码，如果不匹配，我显然需要匹配并显示一条消息。

我的要求：

1. 该消息应仅在确认密码（第二次输入）输入后显示。

我现在的设置是，当用户模糊确认密码（第二次输入）时，函数运行并在不匹配时抛出错误消息，并且当用户键入与密码输入（第一次输入）匹配的正确密码（使用 onkeyup）时动态隐藏)

问题： 如果用户返回并更改第一个输入，则不会显示任何消息。如果我在密码（第一次输入）上使用相同的 onblur 功能，则在我在第二个字段中输入任何内容之前显示该消息（确认密码）。我该如何解决这个问题？

 $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

可能的解决方案：

对密码使用相同的onkeyup函数（第一次输入）并修改passwordWatchOnkeyup，如tihs：

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

原因：如果没有confirmPassword 或者两者相等，则隐藏消息。

---

更新（为passwordWatchOnblur 函数添加了替代项）

... 或者你可以在 onblur on password (first input) 上使用这个 (passwordWatchOnblur) 函数

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

P.S.： 函数的内容是一样的。改变的是它们被调用的时间。在onblur 上调用passwordWatchOnblur 后，该消息将在用户离开输入之前显示，而不是在他/她输入密码时显示。