Question

我有两个字段。我试图验证字段2与field1不同。我使用了指令

它有效，但我的问题是围绕它增强一点。它只适用于在字段2中键入数据时。在字段1中更改数据时它不起作用。换句话说，如果字段1是＆＃34; Babbalas＆＃34;然后输入＆＃34; Babbalas＆＃34;进入字段2，它正确显示我的验证消息。如果更改字段2，则会正确地进行验证（因为现在字段不相同）。但是，如果你去改变字段1它不会改变字段2上的验证消息，有没有办法实现这一点。

我有一个Plunker和我做的事情

http://plnkr.co/edit/OcwyoXwjcbVmTYuKN5hT?p=preview

这是我的index.html

<!DOCTYPE html>
<html ng-app="angularjs-starter">

  <head lang="en">
    <meta charset="utf-8">
    <title>Custom Plunker</title>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.3/angular.min.js"></script>
    <link rel="stylesheet" href="style.css">
    <script>
      document.write('<base href="' + document.location + '" />');
    </script>
    <script src="app.js"></script>
  </head>

  <body ng-controller="MainCtrl">
    <form name="myForm" ng-submit="doSomething()">
       <div>
           <input type="text" name="item1" ng-model="data.item1" required/>
         <span class="invalid" ng-show="myForm.item1.$error.required">required</span>
         <br/>  
       </div>
       <div>
           <input type="text" name="item2" ng-model="data.item2" validate-item2 required/>
         <span class="invalid" ng-show="myForm.item2.$error.validateItem2">
            Cannot be the same as item1</span>
         <span class="invalid" ng-show="myForm.item2.$error.required">required</span>
         <br/>  
       </div>
       <button type="submit" ng-disabled="myForm.$invalid">Submit</button>
    </form>
  </body>

</html>

和我的js文件

var app = angular.module('angularjs-starter', []);

app.controller('MainCtrl', function($scope) {
  $scope.doSomething = function () { 
    alert('Submitted!');
  }
});

app.directive('validateItem2', function (){ 
   return {
      require: 'ngModel',
      link: function(scope, elem, attr, ngModel) {
           ngModel.$parsers.unshift(function(value) {
                var valid = value != scope.data.item1;
                ngModel.$setValidity('validateItem2', valid);
                return valid ? value : undefined;
            });
      }
   };
});

Answer 1

您必须将item1作为范围参数传递给指令并在那里查看其值。在watch方法中，您可以验证id两个项目是否具有相同的值。

跨输入的角度自定义表单验证

1 个答案: