gpt4 book ai didi

javascript - 使用 ngRepeat 在 Angular 中进行分组验证

转载 作者:塔克拉玛干 更新时间:2023-11-02 21:17:45 24 4
gpt4 key购买 nike

我有一个大表格,我已将其拆分为多个选项卡。每个选项卡包含多个不同的输入字段,并对输入进行验证。现在我只有每个输入字段的验证,但我现在正在尝试为每个选项卡添加验证。也就是说,我希望选项卡指示其输入字段是否包含验证错误。

表单使用 ngRepeat 呈现:

<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>

标签数组:

$scope.tabs = [
{ title: "Tab1", content: 'tab1.html', isValid: true },
{ title: "Tab2", content: "tab2.html", isValid: true },
{ title: "Tab3", content: "tab3.html", isValid: true }];

每个选项卡的 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 />

'data-integer' 和 'data-float' 是自定义验证指令:

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;
}
});
}
};
});

我的想法是,如果它的任何子输入字段无效,则将“isValid”变量设置为 false。我不确定在哪里执行此功能或此功能的外观。我也非常欢迎您提供有关改进或其他方法的想法。

最佳答案

您使用表单对验证进行分组,因此在一个简单的场景中,每个选项卡都有一个单独的表单。但是,我知道您希望有一个根表单来处理提交,但是将选项卡字段组合在一起以提供更细粒度的 UI 响应以进行验证。

在这种情况下,您可以使用嵌套表单。 See this example for more information .您将拥有一个根 form(当然是命名的),然后为其中的每个组声明额外的 ng-form。请注意,您必须专门针对嵌套表单使用 ng-form 指令,因为浏览器不允许您嵌套 form 标记; ng-form 指令作为一个元素解决了这个问题。

对您来说,这意味着您将保持父表单不变。然后你只需用它们自己的 ng-form 指令包装每个选项卡中的字段,为每个选项卡提供一个唯一的名称来表示每个选项卡。每个选项卡的有效性将反射(reflect)在根表单 (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>

Here's the plunk .

您会注意到,如果选项卡的嵌套表单无效(在字段 1 中键入一个值,您会看到验证错误类消失),选项卡标题为红色。请注意,我没有在演示中连接您的 Bootstrap JavaScript 行为,因为我很懒,但我相信我已经说明了这一点。

关于javascript - 使用 ngRepeat 在 Angular 中进行分组验证,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21753115/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com