AngularJS - 验证表单的一部分

Question

我正在使用 Angular 1.5.9

我有一个很大的表格，我分散在不同的 Bootstrap Accordion 中。

当表单中出现错误时，我希望能够更改手风琴的类以显示错误所在的手风琴。

要检查整个表单的错误，我可以检查

myFormName.$error

要检查元素的错误，我可以这样做

myFormName.myInputName.$error

但我不知道是否有办法一次对多个元素执行此操作，而无需单独检查每个元素。

我的第一个想法是像这样更改输入的名称：

<input name="accordion1.fieldName">

但这并没有给我预期的结果：我没有 myFormName.accordion1.$error，实际上，我什至没有 myFormName.accordion1.fieldName，因为我的数据实际上存储在 myFormName['手风琴1.fieldName'] 这几乎没用。

有没有人找到这个问题的答案？我想我必须检查每个字段，这有点难看，而且每当我们添加/删除字段时都需要维护......

也许有一个指令可以为我做到这一点，但作为一个非英语母语人士，在这种情况下我找不到用于搜索的关键词。

Answer 1

一种方法是嵌套ng-form directive：

<form name=form1>
    <div ng-form=set1>
       <input name=input1 />
       <input name=input2 />
    </div>
</form>

{{form1.set1.$error}}

Answer 2

您可以使用诸如“accordion1_”之类的前缀命名字段，然后添加一个控制器函数来过滤您的字段。

ctrl.fieldGroup = function(form, fieldPrefix) {

    var fieldGroup = {};

    angular.forEach(form, function(value, key) {

        if (key.indexOf(prefix) === 0) {
            fieldGroup[key] = value;
        }

    });

    return fieldGroup;

}

然后ctrl.fieldGroup('accordion1') 将返回一个带有相应字段的对象。您可以进一步扩展该函数以将聚合 $error 属性添加到生成的 fieldGroup 对象。