在输入不匹配时添加 ng 无效类

adding ng-invalid class on input mismatch

本文关键字：ng 无效 添加 输入 不匹配      更新时间：2023-09-26

Angular ng-invalid类自动添加到电子邮件输入字段中，如果它无效，如何将类ng-invalid添加到input#confirmEmail如果它与input#email不匹配，如果它们匹配，则删除。

基本上，如果不匹配，

我不需要显示任何消息，只想通过类突出显示输入字段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>

扩展我的评论以回答。下面是一个简单的比较指令验证，如果表单和输入与输入的值不匹配，则可用于验证表单和输入。利用ngModelController的（>= 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>

演示

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();
         }
      });
    }
  }
}]);
/* 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;
}
<!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>

您可以使用

ng-class并检查模型是否相等：

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

您可以在 html 中添加所有

内容 
<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" ng-pattern="{{data.account.email}}">
   <div ng-messages="data.account.confirmEmail.$error">
        <div ng-message="pattern">Confirm email must match email.</div>
   </div>
</li>

为此，您需要 ngMessages

相关文章：