如何向AngularJS表单添加自定义验证？

Question

在FormController.$setValide中有一个方法，但它看起来不像是一个公共API，所以我宁愿不使用它。创建自定义指令并使用NGModelController看起来是另一种选择，但基本上需要为每个自定义验证规则创建一个指令，而我不希望这样做。

实际上，在最简单的场景中，将控制器中的某个字段标记为无效（同时保持FormController同步）可能是我完成任务所需要的，但我不知道如何做到这一点。

Answer 1

编辑：下面添加了关于ngMessages(>=1.3.x)的信息。

因为这是一个顶级的结果，如果你谷歌“角表单验证”，目前，我想添加另一个答案，为任何人从那里来。

在FormController.$SetValidity中有一个方法，但它看起来不像是一个公共API，所以我宁愿不使用它。

app.directive('blacklist', function (){ 
   return {
      require: 'ngModel',
      link: function(scope, elem, attr, ngModel) {
          var blacklist = attr.blacklist.split(',');

          //For DOM -> model validation
          ngModel.$parsers.unshift(function(value) {
             var valid = blacklist.indexOf(value) === -1;
             ngModel.$setValidity('blacklist', valid);
             return valid ? value : undefined;
          });

          //For model -> DOM validation
          ngModel.$formatters.unshift(function(value) {
             ngModel.$setValidity('blacklist', blacklist.indexOf(value) === -1);
             return value;
          });
      }
   };
});

<form name="myForm" ng-submit="doSomething()">
   <input type="text" name="fruitName" ng-model="data.fruitName" blacklist="coconuts,bananas,pears" required/>
   <span ng-show="myForm.fruitName.$error.blacklist">
      The phrase "{{data.fruitName}}" is blacklisted</span>
   <span ng-show="myForm.fruitName.$error.required">required</span>
   <button type="submit" ng-disabled="myForm.$invalid">Submit</button>
</form>

此外，我还写了一些关于这个主题的博客文章，其中涉及了更多的细节：

角形验证

自定义验证指令

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

<form name="personForm">
  <input type="email" name="email" ng-model="person.email" required/>

  <div ng-messages="personForm.email.$error">
    <div ng-message="required">required</div>
    <div ng-message="email">invalid email</div>
  </div>
</form>