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 ，直到用戶離開輸入，並且在輸入密碼時才顯示該消息。