javascript – AngularJS验证表单数组长度
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了javascript – AngularJS验证表单数组长度,小编现在分享给大家,供广大互联网技能从业者学习和参考。文章包含2213字,纯文字阅读大概需要4分钟。
内容图文
![javascript – AngularJS验证表单数组长度](/upload/InfoBanner/zyjiaocheng/766/054210ea3eff4c4aae52f6155d589719.jpg)
假设我有一个带有属性favoriteColors的模型对象
{
...
favoriteColors: ['red', 'green', 'blue']
....
}
我用ng-repeat将它们暴露给用户
<form name="userForm">
...
<ul>
<li ng-repeat="color in user.favoriteColors">
<input type="text" ng-model="color" />
<a href="" ng-click="delete(color)">remove</a>
</li>
</ul>
<a href="" ng-click="add()">Add a new favorite color</a>
...
</form>
我希望能够检查favoriteColors字段的有效性
<div ng-show="userForm.favoriteColors.$error">
You must have at least one favorite color
</div>
使用内置的验证器似乎不可能做到这一点,并且我不确定我将在哪个元素中放置自定义指令以获取favoriteColors的ngModelController.
解决方法:
要按照您的请求进行验证,您必须使用ng-model将颜色数组放入表单中,以便验证数组.
这是一个plunker的快速示例,我在ngModelController的$parsers管道上推送一个验证器,它将检查颜色数组的长度.将colorRequired指令保持独立将允许您具有不需要颜色的情况.您还可以添加到该指令,因此它将在属性上采用布尔参数,以便您可以在运行时决定是否需要颜色.
http://plnkr.co/edit/yFuSXxacSW811WfZqaPC
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.colors = ['red', 'blue', 'green'];
});
app.directive("colorGroup", [function() {
"use strict";
return {
restrict: 'E',
require: 'ngModel',
template: '<ng-form name="userForm"> <ul> <li ng-repeat="color in model"> <input type="text" ng-model="color" /> <a href="" ng-click="delete($index)">remove</a> </li> </ul> </ng-form>',
link: function($scope, element, attrs, ngModelCtrl)
{
$scope.$watch(function(){
return ngModelCtrl.$modelValue;
}, function(){
$scope.model = ngModelCtrl.$viewValue;
});
$scope.delete = function(idx)
{
ngModelCtrl.$viewValue.splice(idx, 1);
ngModelCtrl.$setViewValue(ngModelCtrl.$viewValue);
$scope.model = ngModelCtrl.$viewValue;
}
}
}
}]);
app.directive("colorRequired", function() {
"use strict";
return {
restrict: 'A',
require: 'ngModel',
link: function($scope, element, attrs, ngModelCtrl)
{
ngModelCtrl.$setValidity('colorrequired', (ngModelCtrl.$viewValue.length > 0));
ngModelCtrl.$parsers.push(function(viewValue) {
var valid = viewValue.length > 0;
ngModelCtrl.$setValidity('colorrequired', valid);
return valid ? viewValue : undefined;
});
}
}
});
内容总结
以上是互联网集市为您收集整理的javascript – AngularJS验证表单数组长度全部内容,希望文章能够帮你解决javascript – AngularJS验证表单数组长度所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错,欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 gblab@vip.qq.com 举报,一经查实,本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。