我有一个带有输入字段和通过添加required属性等进行验证设置的表单。但是对于某些领域,我需要做一些额外的验证。我将如何“利用” FormController控制的验证?
required
FormController
自定义验证可能类似于“如果填写了这3个字段,则此字段是必需的,并且需要以特定方式进行格式化”。
有一个方法,FormController.$setValidity但是看起来不像公共API,所以我宁愿不使用它。创建自定义指令并使用它NgModelController看起来像另一个选项,但是基本上需要我为每个自定义验证规则创建一个指令,而这是我所不希望的。
FormController.$setValidity
NgModelController
实际上,将控制器中的字段标记为无效(同时保持FormController同步)可能是我在最简单的情况下完成工作所需要的,但是我不知道该怎么做。
编辑:在下面添加了有关ngMessages( > = 1.3.X)的信息。
由于如果您使用Google“ AngularFormValidation”,这是最好的结果之一,所以我想为从那里来的任何人添加另一个答案。
FormController。$ setValidity中有一个方法,但是它看起来不像公共API,所以我宁愿不使用它。
这是“公开”的,不用担心。用它。这就是它的目的。如果不打算使用它,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它可能preferrable替换ng-if为ng-show上述
ng-if
ng-show
这是强制性的链接
另外,我已经写了一些关于该主题的博客条目,其中涉及了更多细节:
角度形式验证
自定义验证指令
现在,您可以使用ngMessages模块而不是ngShow来显示错误消息。它实际上可以与任何东西一起使用,它不一定是错误消息,但是这里是基础知识:
<script src="angular-messages.js"></script>
ngMessages模块声明中的参考:
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"在该上下文上指定要监视的属性。 最重要的是,它们还指定了检入它们的顺序 。它在列表中找到的第一个“真实”获胜,它将显示该消息,而没有其他消息。
ng-message="personForm.email.$error"
ng-message
ng-message="required"
ng-message="email"
还有一个ngMessages示例的插件