如何添加自定义验证到AngularJS表单?

前端之家收集整理的这篇文章主要介绍了如何添加自定义验证到AngularJS表单?前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我有一个具有输入字段和验证设置的表单,通过添加所需的属性等。但对于一些领域,我需要做一些额外的验证。我如何“进入”FormController控制的验证?

自定义验证可以是类似“如果填充这3个字段,则该字段是必需的并且需要以特定方式格式化”。

在FormController中有一个方法$ setValidity,但它不像一个公共API,所以我不使用它。创建自定义指令并使用NgModelController看起来像另一个选项,但基本上需要我为每个自定义验证规则创建一个指令,我不想要。

实际上,将控制器中的字段标记为无效(同时保持FormController同步)可能是我在最简单的情况下需要完成该任务的事情,但我不知道如何做。

编辑:添加有关ngMessages(> = 1.3.X)的信息。

标准格式验证信息(1.0.X及以上)

由于这是Google的“角度表单验证”的顶部结果之一,目前,我想为此添加另一个答案从任何人进来。

There’s a method in FormController.$setValidity but that doesn’t look like a public API so I rather not use it.

这是“公共”,没有后顾之忧。用它。这是它的目的。如果它不是要使用,Angular开发者将在封闭中私有化。

要做自定义验证,如果你不想使用Angular-UI作为建议的其他答案,你可以简单地滚动自己的验证指令。

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>

注意:在1.2.X中,可能更喜欢用ng-if替换上面的ng-show

这是一个义务plunker link

此外,我写了一些关于这个主题博客条目,更详细一点:

Angular Form Validation

Custom Validation Directives

编辑:在1.3.X中使用ngMessages

现在可以使用ngMessages模块而不是ngShow来显示错误消息。它实际上可以与任何东西工作,它不必是一个错误消息,但这里的基本知识:

> Include
>在模块声明中引用ngMessages:

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>

在上面的标记中,ng-message =“personForm.email。$ error”基本上指定了ng-message子指令的上下文。然后ng-message =“required”和ng-message =“email”指定要观察的上下文的属性。最重要的是,他们还指定了一个检查它们的顺序。在列表中找到的第一个“真实”胜出,它将显示该消息,而不显示其他消息。

和一个plunker for the ngMessages example

猜你在找的Angularjs相关文章