角度验证 - 向用户输出无效的字段名称答案

【问题标题】：Angular validation - outputting invalid field names to user角度验证 - 向用户输出无效的字段名称
【发布时间】：2017-11-26 23:58:20
【问题描述】：

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

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

基本上，我有一个方法可以传递角度形式对象，它以通用方式创建字符串（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>

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

问题是 - 只要表中的一行完全有效，表中的所有表单都被认为是有效的（我假设是因为它们都被命名为相同的）。一旦其中一个 FeeForms 变为有效，form.FeeForm.$invalid 就为 false。

想知道我是否可以进行任何调整来处理这种情况？希望我问的有点道理：/

【问题讨论】：

首先，您为什么不尝试将您的内部形式命名为ng-form="FeeForm{{$index}}"？这将为名称添加索引并至少解决表单名称冲突。
这篇文章有帮助吗：stackoverflow.com/questions/24726105/…

标签： javascript angularjs validation

【解决方案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();
            }
        });

【讨论】：

根据你的错误信息替换anacReservationMessages.errorMsg.fieldInvalid。