javascript - Angular 验证 - 向用户输出无效的字段名称

Question

我正在我的 Angular 应用程序中进行验证。我真正想做的是，当用户点击表单上的“提交”时，显示一个弹出窗口，其中包含无效字段列表(例如“这些字段无效 - 名字 - 姓氏等”)。我所说的“真的喜欢这样做”，实际上是指我的老板强制我这样做，所以我在这件事上别无选择。

我实际上有一种方法可以通过读取 Angular 表单对象并获取所有 $invalid 字段的列表来在简单输入上执行此操作。然后我可以查看缓存的字段名称到可读文本的映射(例如 FirstName -> 'First name')来生成错误字符串。

基本上，我有一个方法，可以传递 Angular 形式对象，并以通用方式创建字符串(options.labels 是我从属性名称到可读名称的映射缓存):

for (var key in form) {
    if (key.indexOf("$") !== 0) {
        if (form[key].$invalid) {
            var label = options.labels[key];

            if (label)
                str += '- ' + label.DisplayName + '<br />';
        }
    }
}

这很好用!问题是，我的应用程序中的常见数据结构之一是动态表，我可以在其中创建多行，如下所示。它是一个包含动态创建的行的表，用户可以在其中添加更多行:

<table>
    <tr ng-repeat="fee in Fees" ng-form="FeeForm">
         <td><input type="text" name="FeeName" ng-model="fee.Name" /></td>
         <td><input type="text" name="FeeValue" ng-model="fee.Value" /></td>
    </tr>
</table>

在这种情况下，我想要做的是，如果表中的任何字段无效，则输出表名称。这实际上有点作用 - 上面的函数将表单名称识别为错误，我可以将表单名称映射到表名称以输出我想要的内容。

问题是 - 一旦表中的一行完全有效，表中的所有表单都被视为有效(我假设是因为它们的名称都相同)。一旦其中一个费用表格有效，form.FeeForm.$invalid 就为 false。

想知道我是否可以做出任何调整来处理这种情况？希望我的问题有意义:/

Answer 1

 var fieldStatus = false;
        $scope.fieldsMsgContainer = $('<div>');
        angular.forEach(angular.element(".invalid-cls"), function(value) {
            var elem = angular.element(value);
            if (!elem.val()) {
                var errorMsg = "";
                $("<div>").addClass("errorField").html(anacReservationMessages.errorMsg.fieldInvalid + elem.closest('.row').find('label').html()).appendTo($scope.fieldsMsgContainer);
                fieldStatus = true;
                errorMsg = 'Specific Error message ' + elem.closest('.row').find('label').html();
            }
        });