Question

Angular会自动将ng-invalid课程添加到电子邮件输入字段（如果该字段无效），如果ng-invalid成为input#confirmEmail，则可以如何将其添加到input#email 39; s与ng-invalid不匹配，如果匹配则删除。

基本上我不需要在不匹配的情况下显示任何消息，只想通过<li> <label for="email">Email</label> <input type="email" id="email" name="email" ng-model="data.account.email" ng-required=""> </li> <li> <label for="confirmEmail">Confirm Email</label> <input type="email" id="confirmEmail" name="confirmEmail" ng-model="data.account.confirmEmail"> </li>类突出显示输入字段并根据该字段验证表单。

{{1}}

Answer 1

扩展我的评论以回答。这是一个简单的比较指令验证，如果它与输入的值不匹配，可用于验证表单和输入。使用ngModelController（＆gt; = V1.3.x）$validators可以很容易地处理它。

指令将如下所示：

.directive('comparewith', ['$parse', function($parse){
  return {
     require:'ngModel',
      link:function(scope, elm, attr, ngModel){
        //Can use $parse or also directly comparing with scope.$eval(attr.comparewith) will work as well
        var getter = $parse(attr.comparewith);

        ngModel.$validators.comparewith = function(val){
          return val === getter(scope);
        }
        scope.$watch(attr.comparewith, function(v, ov){
          if(v !== ov){
             ngModel.$validate();
          }
        });
      }
  }
}]);

并将其用作：

<li>
    <label for="email">Email</label>
    <input type="email" id="email" name="email" 
          ng-model="data.account.email" required>
</li>
<li>
    <label for="confirmEmail">Confirm Email</label>
    <input type="text" id="confirmEmail" name="confirmEmail"
           comparewith="data.account.email" required 
           ng-model="data.account.confirmEmail">
</li>

<强>演示

＆＃13;

var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope) {
  $scope.submit = function(form) {
    if (form.$invalid) {
      alert("oops password and confirm must match and must be valid");
    } else {
      alert("Äll good!!");
    }
  };
}).directive('comparewith', ['$parse', function($parse) {
  return {
    require: 'ngModel',
    link: function(scope, elm, attr, ngModel) {
      var getter = $parse(attr.comparewith);

      ngModel.$validators.comparewith = function(val) {
        return val === getter(scope);
      }
      
      scope.$watch(attr.comparewith, function(v, ov){
         if(v !== ov){
            ngModel.$validate();
         }
      });
    }
  }
}]);

＆＃13;

/* Put your css in here */

form.ng-invalid {
  border: 1px solid red;
  box-sizing: border-box;
}
input.ng-invalid {
  border: 2px solid red;
  box-sizing: border-box;
}

＆＃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.3.x" src="https://code.angularjs.org/1.3.9/angular.js" data-semver="1.3.9"></script>
  <script src="app.js"></script>
</head>

<body ng-controller="MainCtrl">
  <form name="form" ng-submit="submit(form)" novalidate>
    <ul>
      <li>
        <label for="email">Email</label>
        <input type="email" id="email" name="email" ng-model="data.account.email" required>
      </li>
      <li>
        <label for="confirmEmail">Confirm Email</label>
        <input type="text" id="confirmEmail" name="confirmEmail" comparewith="data.account.email" required ng-model="data.account.confirmEmail">
      </li>
    </ul>
    <button>Submit</button>
  </form>
</body>

</html>

＆＃13;

Answer 2

您可以使用ng-class并检查模型是否相同：

ng-class="{'ng-invalid' : data.account.confirmEmail != data.account.email}"

Answer 3

您可以在html中添加所有内容

<select>

此

需要ngMessages

在输入不匹配时添加ng-invalid类

3 个答案: