Question

我有一个带有指令的简单表格：

<form name="testform">
    <input name="testfield" type="text" ng-model="test.name" ng-minlength="3" my-validate>
</form>

由于Angular在输入少于3个字符时验证字段本身，因此设置testform.testfield.$invalid。

我想要实现的是在指令中添加一些自定义验证功能，对此角度验证做出反应/设置验证结果，例如在观察者或类似事件的帮助下：

angular.module('myApp.directives').directive('myValidate', [function() {
    return {
        link: function(scope, elem, attrs) {
            elem.on('keyup', function() {
                // do some custom validation
                // if valid, set elem to $valid
                // else set $error
                // something like elem.set('$valid');
            }
        }
    };
}]);

如何在使用Angulars testform.testfield.$invalid，testform.testfield.$valid，testform.testfield.$error等逻辑时实现HTML5，Angular和自定义表单验证的组合？

Answer 1

默认情况下，Angular提供了一些输入验证指令（如required，pattern，min，max等）。如果这些指令不够，可以使用自定义验证。为了能够做到这一点，该指令需要用于验证的模型，然后它可以设置元素的有效性，如下所示：

.directive('myValidate', [ function() {
    return {
        require: 'ngModel',
        link: function(scope, elem, attrs, ctrl) {
            ctrl.$setValidity('myValidate', false);
        }
    };
}]);

具有此类指令的Plunker，当您输入＆＃39; 0＆＃39;是HERE。

您可以在Angular forms documentation上阅读有关自定义验证的详情。

Answer 2

您可以进行自定义验证并将其与Angular内置验证相结合，您只需要要求ngModel，将ctrl作为第4个值传递给您的链接函数，并使用ctrl。$ setValidity来指示您的自定义验证通过或失败。

如果长度＆lt;以下示例将无效。 3或者如果值是字符串＆＃39;无效＆＃39;：

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

app.controller('controller', ['$scope',
  function(scope) {
    scope.test = {
      name: ''
    };
  }
]);

app.directive('myValidate', [
  function() {
    return {
      require: 'ngModel',
      link: function(scope, elem, attrs, ctrl) {
        ctrl.$parsers.unshift(function(value) {
          var valid = true;
          if (value === 'invalid') {
            valid = false;
          }
          ctrl.$setValidity(attrs.name, valid);
          return valid ? value : undefined;
        });
      }
    };
  }
]);

标记：

<body ng-app="app">
    <div ng-controller="controller">
      <form name="testform">
        <input name="testform" type="text" ng-model="test.name" ng-minlength="3" my-validate /><br/>

      </form>
      <span style="color:green" ng-show="testform.testform.$valid">** valid **</span>
      <span style="color:red" ng-show="testform.testform.$invalid">** invalid **</span>
    </div>
    <script src="script.js"></script>
  </body>

以下是使用此代码的plunker：http://plnkr.co/edit/6XIKYvGwMSh1zpLRbbEm

Angular文档谈到了这一点，虽然它并不是很明显：https://docs.angularjs.org/api/ng/type/ngModel.NgModelController

此博客帮助我抓住了这个问题：http://www.benlesh.com/2012/12/angular-js-custom-validation-via.html

如何在指令中访问Angular表单验证

2 个答案: