个人中心
gpt4 book ai didi

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

转载 作者：行者123 更新时间：2023-11-29 17:01:05 25 4
gpt4 key购买 nike

如果无效，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>

关于javascript - 在输入不匹配时添加 ng-invalid 类，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/28033899/

25 4 0
文章推荐： android - 灰色三角形出现在我的自定义按钮的角上
文章推荐： android - 新管理发布页面中的 Google Play alpha 和 beta 测试列表
文章推荐： MySql:用于递增数字的正确事务隔离级别
文章推荐： Mysql命令行窗口打不开
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com