2017-07-07 66 views
1

Angular password form不能隱藏角密碼形式

您好,我有一個問題我想只顯示消息時密碼匹配或不匹配,但該消息出現的所有時間任何建議比賽的消息?如果密碼不同,我想不能點擊按鈕!

@*<form name="form" ng-submit="vm.login()" role="form">*@ 
<form accept-charset="UTF-8" role="form" id="login-recordar" ng-submit="vm.login()"> 

    @*New password field!*@ 
    <div> 
     <div class="form-group input-group" ng-class="{ 'has-error': form.password.$dirty && form.password.$error.required }"> 
      <span class="input-group-addon"> 
       <i class="glyphicon glyphicon-lock"></i><label for="password1">New Password</label> 
      </span> 
      <input class="form-control" placeholder="Password" name="password" type="password" data-toggle="popover" data-trigger="focus" data-content="Minimum 8 characters long and should contain at least one (small- and capital letter and number)." id="password" value="" required="" autofocus="" onkeypress="capLock(event)" ng-model="mAddEditView.User.Password" ng-pattern="/^(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.{8,})/" /> 
     </div> 
     <span ng-show="form.password.$dirty && form.password.$error.required" class="help-block">Password is required</span> 
     <span id="divMayus" style="visibility:hidden">Caps Lock is on!</span> 
    </div> 

    @*Confirm Password field!*@ 
    <div> 
     <div class="form-group input-group" ng-class="{ 'has-error': form.password1.$dirty && form.password1.$error.required }"> 
      <span class="input-group-addon"> 
       <i class="glyphicon glyphicon-lock"></i><label for="password1">Confirm Password</label> 
      </span> 
      <input class="form-control" placeholder="Password" name="password1" type="password" data-toggle="popover" data-trigger="focus" data-content="The password should match." id="password1" value="" required="" onkeypress="capLock(event)" ng-model="mAddEditView.User.Password" ng-pattern="/^(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.{8,})/" /> 

     </div> 
     <span ng-show="form.password1.$dirty && form.password1.$error.required" class="help-block">Password is required</span> 
     <span ng-show="mAddEditView.User.Password !== mAddEditView.User.Password1" class="help-block"><font style="color:red;">Password is not valid!</font></span> 
     @* code for checking if password match *@ 
     <span ng-show="form.password1.$valid && mAddEditView.User.Password === mAddEditView.User.Password1"><font style="color:white;">Password Matched</font></span> 


     <span id="divMayus" style="visibility:hidden">Caps Lock is on!</span> 
    </div> 


    <div class="form-group"> 
     <button type="submit" class="btn btn-primary btn-block" value="Login" ng-disabled="form.$invalid || vm.dataLoading || errors.mail.isExists || mAddEditView.User.Password !== mAddEditView.User.Password1"> 
      Change Password 
     </button> 

    </div> 

回答

0

您可以更新您的信息NG-秀條件

ng-show="form.password1.$valid && form.password1.$dirty && form.password.$dirty && mAddEditView.User.Password === mAddEditView.User.Password1" 

這樣當用戶開始編輯這兩個領域&用戶根據正則表達式&然後最後一個條件增加有效的密碼,它會只顯示檢查兩者是否相同。

*需要驗證才能使表單無效&避免用戶提交。因此,添加所需的屬性&提交按鈕形式。$無效將自己處理它

0

您還應該檢查password1是否通過了所需的驗證。

ng-show="!form.password1.$error.required && 
     form.password1.$valid && 
     mAddEditView.User.Password === mAddEditView.User.Password1"