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

Angular将

ng invalid

类自动添加到电子邮件输入字段如果该类无效，如何将该类

ng invalid

添加到

input#确认邮件

，如果该类与

input#电子邮件

不匹配，则将其删除

基本上，我不需要在不匹配的情况下显示任何消息，只想通过

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>

电子邮件


确认电子邮件

您可以使用

ng class

并检查型号是否相等：

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

---

扩展我的评论以回答问题。这里是一个简单的比较指令验证，如果表单和输入值不匹配，可以使用它来验证表单和输入。利用ngModelController（>=V1.3.x），它变得很容易处理

指令将如下所示：

.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>

/*将您的css放在这里*/
表格2.ng-无效{
边框：1px纯红；
框大小：边框框；
}
input.ng-invalid{
边框：2倍纯红；
框大小：边框框；
}

安古拉斯普朗克
文件。写（“”）；


电子邮件


确认电子邮件


提交

您可以将其全部添加到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>

电子邮件


确认电子邮件
确认电子邮件必须与电子邮件匹配。

---

您需要这个

ng class=“{'ng-invalid'：data.account.confirmEmail！=data.account.email}”

谢谢，您可以将它添加为应答！！：）但这会使表格无效吗？该字段仍然有效，对吗？我认为我们需要添加自定义验证并设置ng模型的有效性，这将处理类的添加以及表单/控件的状态为无效/有效。此外，如果我向

#confirmEmail

输入有效电子邮件，但与

#email

不匹配，

ng invalid

将消失，因为它是有效电子邮件，但仍然是一封电子邮件不匹配，它与angular的验证冲突，如果没有解决方案，我将使用另一个类来避免冲突，比如说

.mismatch{}

@user3610227您可能必须创建自定义验证程序。试试这个问题。我已将确认邮件类型从电子邮件更改为文本，它可以正常工作，没有任何冲突。电子邮件文本字段足以进行电子邮件验证，而确认邮件应仅用于匹配文本，因此应键入文本，这种方法有任何可能的问题吗？@user3610227这是一种不错的方法，非常聪明，您也可以通过指令添加到验证程序列表中，类似这样的东西，你能不能确保缩小安全，不知道缩小错误后为什么会出现问题：

http://errors.angularjs.org/1.3.9/$injector/unpr？p0=eProvider%20%3C-%20e%20%3C-%20match指令

fyi:我使用的是“匹配”一词，而不是“比较”，更新了@user3610227。