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

Question

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

我的要求：

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

我现在的设置是，当用户脱口确认密码（第二次输入）时，该功能运行并在不匹配时抛出err消息，并且当用户键入与密码输入（第一次输入）相匹配的正确密码（使用的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函数，并像tihs一样修改passwordWatchOnkeyup ：

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

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

---

更新 （添加了passwordWatchOnblur函数的替代方法）

...或者您可以在onblur on password（第一次输入）上使用此（ passwordWatchOnblur ）函数

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

PS：功能内容相同。 变化的是调用它们的时间。 在onblur上调用passwordWatchOnblur ，直到用户离开输入，并且在输入密码时才显示该消息。