2017-07-07 69 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"