Javascript 使用ngRepeat进行角度分组验证
我有一个大的表格,我已经分为选项卡。每个选项卡包含多个不同的输入字段,并对输入进行验证。现在,我只对每个输入字段进行验证,但我现在正尝试为每个选项卡添加验证。也就是说,我希望选项卡指示其输入字段是否包含验证错误 使用ngRepeat呈现表单:Javascript 使用ngRepeat进行角度分组验证,javascript,angularjs,Javascript,Angularjs,我有一个大的表格,我已经分为选项卡。每个选项卡包含多个不同的输入字段,并对输入进行验证。现在,我只对每个输入字段进行验证,但我现在正尝试为每个选项卡添加验证。也就是说,我希望选项卡指示其输入字段是否包含验证错误 使用ngRepeat呈现表单: <form name="createForm" novalidate> <ul class="nav nav-tabs"> <li ng-repeat="tab in tabs" ng-class="{active
<form name="createForm" novalidate>
<ul class="nav nav-tabs">
<li ng-repeat="tab in tabs" ng-class="{active: $index == 0}">
<a ng-hide="tab.isValid" data-target="#tab{{$index + 1}}" data-toggle="tab" class="invalid">{{tab.title}}</a>
<a ng-show="tab.isValid" data-target="#tab{{$index + 1}}" data-toggle="tab">{{tab.title}}</a>
</li>
</ul>
<div class="tab-content">
<div class="tab-pane fade in" id="tab{{$index + 1}}" ng-repeat="tab in tabs" ng-class="{active: $index == 0}">
<div ng-include="'/view/create/partials/' + tab.content"></div>
</div>
</div>
</form>
每个选项卡的HTML:
<label for="age">Age</label>
<input type="text" class="form-control" ng-model="person.tab1.Age" name="Age" maxlength="3" data-integer />
<label for="height">Height</label>
<input type="text" class="form-control" ng-model="person.tab1.Height" name="Height" data-float />
我的想法是,如果“isValid”的任何子输入字段无效,则将其设置为false。我不确定在哪里执行这个函数,或者这个函数看起来是什么样子。我也非常欢迎您提出改进或其他方法的想法。您可以使用一个表单对验证进行分组,因此在一个简单的场景中,每个选项卡都有一个单独的表单。但是,我知道您希望有一个根表单来处理提交,但是将选项卡字段组合在一起,以提供对验证的更细粒度UI响应 在这种情况下,可以使用嵌套表单。您将拥有一个根
表单
(当然是命名的),然后为其中的每个组声明额外的ng表单
。请注意,您必须专门为嵌套表单使用ng form
指令,因为浏览器不允许您嵌套form
标记<代码>ng表单指令作为一个元素围绕着它工作
对你来说,这意味着你将保持你的父母形式不变。然后,您只需使用各自的ng form
指令包装每个选项卡中的字段,为每个字段指定一个表示每个选项卡的唯一名称。每个选项卡的有效性将反映在根表单(createForm
)中,因此您仍然可以使用典型的方法(例如createForm.$invalid
)检查表单是否整体有效。但是,您现在也可以检查嵌套表单的状态,例如createForm.Tab1Form.$valid
这里唯一的问题是ng form
不计算name
属性,它使用文本值,因此从tab.title
动态生成该名称时会遇到问题,就像您可能想做的那样。我通过在模板中给他们一个文字名称来解决这个问题
<form name="createForm" novalidate="">
<ul class="nav nav-tabs">
<li ng-repeat="tab in tabs" ng-class="{active: $index == 0}">
<a data-target="#tab{{$index + 1}}" data-toggle="tab" ng-class="{'invalid': createForm.{{tab.title}}.$invalid}">{{tab.title}}</a>
</li>
</ul>
<div class="tab-content">
<div class="tab-pane fade in" id="tab{{$index + 1}}" ng-repeat="tab in tabs" ng-class="{active: $index == 0}">
<div ng-include="tab.content"></div>
</div>
</div>
</form>
-
您会注意到,如果选项卡的嵌套表单无效,则选项卡标题为红色(在字段1中键入一个值,您将看到验证错误类消失)。请注意,我没有在演示中连接您的引导JavaScript行为,因为我很懒,但我相信我已经说明了这一点。我更新了我的答案,提供了一个示例,并解释了一个小警告,以及如何绕过它。
var INTEGER_REGEXP = /^\d*$/;
app.directive('integer', function () {
return {
require: 'ngModel',
link: function (scope, elm, attrs, ctrl) {
ctrl.$parsers.unshift(function (viewValue) {
if (INTEGER_REGEXP.test(viewValue)) {
ctrl.$setValidity('integer', true);
return parseInt(viewValue);
} else {
ctrl.$setValidity('integer', false);
return undefined;
}
});
}
};
});
<form name="createForm" novalidate="">
<ul class="nav nav-tabs">
<li ng-repeat="tab in tabs" ng-class="{active: $index == 0}">
<a data-target="#tab{{$index + 1}}" data-toggle="tab" ng-class="{'invalid': createForm.{{tab.title}}.$invalid}">{{tab.title}}</a>
</li>
</ul>
<div class="tab-content">
<div class="tab-pane fade in" id="tab{{$index + 1}}" ng-repeat="tab in tabs" ng-class="{active: $index == 0}">
<div ng-include="tab.content"></div>
</div>
</div>
</form>