Question

我有一个简单的html表单，其中我有3个字段。

旧密码

新密码

重新输入密码

但是当我点击并打开该表单时，出现了一个奇怪的行为，新密码字段已经是红色。在用户输入数据之前，我不希望它变红。就像我正在为密码不匹配验证做的那样我尝试了不同的东西，但我不知道为什么它已经是红色并且提交按钮应该保持禁用，如果所有字段都是空的但它也不起作用。

这是我的表格代码。

    <div class="row">
 <div class="col-lg-12">
        <form class="form-horizontal" name="changepasswordform" id="changepasswordform">
            <fieldset> 
                <!--Old Password input-->
                <div class="form-group " ng-class="{'has-error': changepasswordform.OldPassword.$error.pattern}">
                    <label class="col-md-4 control-label" for="OldPassword">Old Password*</label>
                    <div class="col-md-4">
                        <input type="password" class="form-control" name="OldPassword" id="OldPassword" placeholder="Old Password" ng-model="theChangePassword.OldPassword" ng-pattern="regex.Password">
                        <span ng-show="changepasswordform.OldPassword.$error.pattern && changepasswordform.OldPassword.$invalid"  class="help-block"> Please enter a valid password with at least 6 characters.</span>
                    </div>
                </div>
                   <!-- Password input-->
                <div class="form-group" ng-class="{ 'has-error': changepasswordform.password.$error.pattern || theChangePassword.NewPassword == theChangePassword.OldPassword}" >
                    <label class="col-md-4 control-label" for="password"> New Password*</label>
                    <div class="col-md-4">
                        <input id="password" name="password" type="password" placeholder="Password" class="form-control input-md" ng-model="theChangePassword.NewPassword"  ng-pattern="regex.Password" ng-maxlength="20">
                        <span ng-show="changepasswordform.password.$error.pattern && changepasswordform.password.$invalid " class="help-block">Please enter a valid password with at least 6 characters. </span>
                         <span ng-show="theChangePassword.NewPassword == theChangePassword.OldPassword" class="help-block">password must be differ from old password.</span>  
                    </div>
                </div>
                <!-- Password input-->
                <div class="form-group" ng-class="{ 'has-error':  changepasswordform.confirmpassword.$error.pattern  || theChangePassword.NewPassword != theChangePassword.ConfirmPassword && (theChangePassword.NewPassword != '' && theChangePassword.ConfirmPassword != '' )}" >
                    <label class="col-md-4 control-label" for="confirmpassword">Retype Password*</label>
                    <div class="col-md-4">
                        <input id="confirmpassword" name="confirmpassword" type="password" placeholder="Confirm Password" class="form-control input-md" ng-model="theChangePassword.ConfirmPassword"  ng-pattern="regex.Password" ng-maxlength="20" >
                    <span ng-show="theChangePassword.NewPassword != theChangePassword.ConfirmPassword && (theChangePassword.NewPassword != '' && theChangePassword.ConfirmPassword != '' )" class="help-block">Password mismatch</span>      
                    </div>
                </div>
                <!-- Submit Button-->
                <div class="form-group">
                    <label class="col-md-4 control-label" for="submit"></label>
                    <div class="col-md-4">
                        <button id="submit" ng-click="changepassword()" class="btn btn-primary" ng-disabled="(theChangePassword.NewPassword != theChangePassword.ConfirmPassword ||  theChangePassword.NewPassword == theChangePassword.OldPassword && (theChangePassword.OldPassword == '' && theChangePassword.NewPassword == '' && theChangePassword.ConfirmPassword == ''))" >Submit</button>
                        <button id="submit" ng-click="cancelChangePassword()" class="btn btn-primary">Cancel</button>
                    </div>
                </div>
            </fieldset>
        </form>
    </div>
</div>

更新后：编辑 我更新了我的新密码div，但仍然字段为红色。唯一的区别是该消息未显示但字段为红色。

<!-- Password input-->
            <div class="form-group" ng-class="{ 'has-error': changepasswordform.password.$error.pattern || theChangePassword.NewPassword == theChangePassword.OldPassword}" >
                <label class="col-md-4 control-label" for="password"> New Password*</label>
                <div class="col-md-4">
                    <input id="password" name="password" type="password" placeholder="Password" class="form-control input-md" ng-model="theChangePassword.NewPassword"  ng-pattern="regex.Password" ng-maxlength="20">
                    <span ng-show="changepasswordform.password.$error.pattern && changepasswordform.password.$invalid " class="help-block">Please enter a valid password with at least 6 characters. </span>
                      <span ng-show="(theChangePassword.NewPassword == theChangePassword.OldPassword) && changepasswordform.confirmpassword.$dirty && changepasswordform.password.$touched" class="help-block">password must be differ from old password.</span>  
                </div>
            </div>

Answer 1

使用

changepasswordform.matchingPassword.$dirty

如果输入已更改，则返回true。在put验证中使用$dirty关键字是个好主意。

仅在值已更改时进行检查。在下面的代码中，我添加了关键字以删除验证消息，直到输入已更改。

    <span ng-show="(theChangePassword.NewPassword == theChangePassword.OldPassword) && changepasswordform.confirmpassword.$dirty " class="help-block">password must be differ from old password.</span>

由于您希望在更改值后使用has-error类。它很好地保持条件简单

   <div class="form-group" ng-class="{ 'has-error':  (changepasswordform.confirmpassword.$error.pattern  || (theChangePassword.NewPassword != theChangePassword.ConfirmPassword) && (theChangePassword.NewPassword != '' && theChangePassword.ConfirmPassword != '' )) && changepasswordform.matchingPassword.$dirty }" >
                    <label class="col-md-4 control-label" for="confirmpassword">Retype Password*</label>
                    <div class="col-md-4">
                        <input id="confirmpassword" name="confirmpassword" type="password" placeholder="Confirm Password" class="form-control input-md" ng-model="theChangePassword.ConfirmPassword"  ng-pattern="regex.Password" ng-maxlength="20" >
                    <span ng-show="theChangePassword.NewPassword != theChangePassword.ConfirmPassword && (theChangePassword.NewPassword != '' && theChangePassword.ConfirmPassword != '' )  && changepasswordform.matchingPassword.$dirty" class="help-block">Password mismatch</span>      
                    </div>
                </div>

表示密码div

<<div class="form-group" ng-class="{ 'has-error': (changepasswordform.password.$error.pattern || (theChangePassword.NewPassword == theChangePassword.OldPassword) ) && changepasswordform.password.$dirty }" >
                <label class="col-md-4 control-label" for="password"> New Password*</label>
                <div class="col-md-4">
                    <input id="password" name="password" type="password" placeholder="Password" class="form-control input-md" ng-model="theChangePassword.NewPassword"  ng-pattern="regex.Password" ng-maxlength="20">
                    <span ng-show="changepasswordform.password.$error.pattern && changepasswordform.password.$invalid && changepasswordform.password.$dirty  " class="help-block">Please enter a valid password with at least 6 characters. </span>
                     <span ng-show="(theChangePassword.NewPassword == theChangePassword.OldPassword) && changepasswordform.password.$dirty " class="help-block">password must be differ from old password.</span>  
                </div>
            </div>

Answer 2

显示错误文本时，您只需要添加更多逻辑。

添加＆＃34; changepasswordform.password。$ touch ＆＃34;在显示错误之前，请确保用户与表单进行了一些交互。

＆＃13;

var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope) {
  $scope.name = 'World';
});

＆＃13;

<!DOCTYPE html>
<html ng-app="plunker">

<head>
  <meta charset="utf-8" />
  <title>AngularJS Plunker</title>
  <script>
    document.write('<base href="' + document.location + '" />');
  </script>
  <link rel="stylesheet" href="style.css" />
  <script data-require="angular.js@1.5.x" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.10/angular.min.js" data-semver="1.5.10"></script>
  <script src="app.js"></script>
</head>

<body ng-controller="MainCtrl">
  <p>Hello {{name}}!</p>
  <div class="row">
    <div class="col-lg-12">
      <form class="form-horizontal" name="changepasswordform" id="changepasswordform">
        <fieldset>
          <!--Old Password input-->
          <div class="form-group " ng-class="{'has-error': changepasswordform.OldPassword.$error.pattern}">
            <label class="col-md-4 control-label" for="OldPassword">Old Password*</label>
            <div class="col-md-4">
              <input type="password" class="form-control" name="OldPassword" id="OldPassword" placeholder="Old Password" ng-model="theChangePassword.OldPassword" ng-pattern="regex.Password">
              <span ng-show="changepasswordform.OldPassword.$error.pattern && changepasswordform.OldPassword.$invalid" class="help-block"> Please enter a valid password with at least 6 characters.</span>
            </div>
          </div>
          <!-- Password input-->
          <div class="form-group" ng-class="{ 'has-error': changepasswordform.password.$error.pattern || theChangePassword.NewPassword == theChangePassword.OldPassword}">
            <label class="col-md-4 control-label" for="password"> New Password*</label>
            <div class="col-md-4">
              <input id="password" name="password" type="password" placeholder="Password" class="form-control input-md" ng-model="theChangePassword.NewPassword" ng-pattern="regex.Password" ng-maxlength="20">
              <span ng-show="changepasswordform.password.$error.pattern && changepasswordform.password.$invalid " class="help-block">Please enter a valid password with at least 6 characters. </span>
              <span ng-show="theChangePassword.NewPassword == theChangePassword.OldPassword && changepasswordform.password.$touched" class="help-block">password must be differ from old password.</span>
            </div>
          </div>
          <!-- Password input-->
          <div class="form-group" ng-class="{ 'has-error':  changepasswordform.confirmpassword.$error.pattern  || theChangePassword.NewPassword != theChangePassword.ConfirmPassword && (theChangePassword.NewPassword != '' && theChangePassword.ConfirmPassword != '' )}">
            <label class="col-md-4 control-label" for="confirmpassword">Retype Password*</label>
            <div class="col-md-4">
              <input id="confirmpassword" name="confirmpassword" type="password" placeholder="Confirm Password" class="form-control input-md" ng-model="theChangePassword.ConfirmPassword" ng-pattern="regex.Password" ng-maxlength="20">
              <span ng-show="theChangePassword.NewPassword != theChangePassword.ConfirmPassword && (theChangePassword.NewPassword != '' && theChangePassword.ConfirmPassword != '' )" class="help-block">Password mismatch</span>
            </div>
          </div>
          <!-- Submit Button-->
          <div class="form-group">
            <label class="col-md-4 control-label" for="submit"></label>
            <div class="col-md-4">
              <button id="submit" ng-click="changepassword()" class="btn btn-primary" ng-disabled="(theChangePassword.NewPassword != theChangePassword.ConfirmPassword ||  theChangePassword.NewPassword == theChangePassword.OldPassword && (theChangePassword.OldPassword == '' && theChangePassword.NewPassword == '' && theChangePassword.ConfirmPassword == ''))">Submit</button>
              <button id="submit" ng-click="cancelChangePassword()" class="btn btn-primary">Cancel</button>
            </div>
          </div>
        </fieldset>
      </form>
    </div>
  </div>
</body>

</html>

＆＃13;

来自字段验证的错误（Angular JS）

2 个答案: