javascript - Angular 验证 - 按页面顺序输出无效字段

Question

我正在尝试以通用方式输出无效的字段名称。下面通过循环遍历表单中的所有字段并仅附加到带有键名的字符串来实现这一点。当您单击提交按钮时它会运行:

for (var key in form) {
    if (key.indexOf("$") !== 0) {
        if (form[key].$invalid) {
            str += '- ' + key + '<br />';
        }
    }
}

我唯一的问题是键出现的顺序与字段在页面上出现的顺序不匹配。我假设它与字段本身的创建方式有关，因为动态生成的字段似乎出现在普通字段之前。我很想维持秩序，但想不出好的办法。

是否希望有人提出建议？

Answer 1

您可以通过 DOM 简单地迭代您的控件:

// Assuming $element is your <form>
var invalidFields = [];
$element.find('.ng-invalid').each(function() {
    invalidFields.push(this.name);
});

这种方法只是利用了 NgModelController 的事实将在所有无效控件上设置 ng-invalid CSS 类。使用 Angular 并不意味着您不能使用 DOM。