在 Angular JS (1.x) 中验证分页表单答案

【问题标题】：Validating paginated forms in Angular JS (1.x)在 Angular JS (1.x) 中验证分页表单
【发布时间】：2017-01-12 16:58:13
【问题描述】：

我有一个使用带有输入字段的表格的角度表格。用户可以添加和删除行。每个单元格可以是输入类型的文本、数字日期等。如果表格太大，表格会变慢。解决此问题的一种方法是对表格进行分页。

不幸的是，对表格进行分页是一个问题，因为我对输入字段进行了自定义验证，并且如果任何页面中的任何字段无效，则表单不应提交。例如用户可以填写第一页并提交表单而不填写第二页。 Angular 必须为第二页中的字段抛出错误。目前我正在使用表单指令的角度实现来管理错误。 Angular 表单只显示当前页面中的字段，而不显示第二页中的字段。

看看这个plunkr。表格格式如下。

 <form name="tableForm" novalidate>
      {{tableForm.$valid}}
      <button ng-click="previousPage()">Previous</button>
      <button ng-click="nextPage()">Next</button>
    <table>
      <thead>
        <tr>
          <td>Text</td>
          <td>Date</td>
          <td>Textarea</td>
        </tr>
      </thead>
      <tbody>
        <tr ng-repeat="item in TableData | limitTo :5:offset">
          <td>
            <input name="Text_{{$index+offset}}" type="text" ng-model="item.Text" ng-required="true" />
            <div ng-messages="tableForm.Text_{{$index+offset}}.$error"  ng-messages-include="error-messages" class="errorMsg">
                        <div ng-message="required" class="error_text">This field is required</div>
                    </div>
          </td>
          <td>
            <input name="Date{{$index+offset}}" type="date"  ng-model="item.Date"  />
          </td>
          <td>
            <textarea name="Textarea_{{$index+offset}}"  ng-model="item.Textarea"  ></textarea>
          </td>
        </tr>
      </tbody>
    </table>
    </form>

在表格中，文本字段具有必需的验证。在第一页中，表单是有效的，因为所有文本字段都已填写。但在第二页中，一个文本字段未填写。所以表格实际上应该是无效的。但是只有转到下一页才会失效。

我该如何解决这个问题？

【问题讨论】：

表单是有效的，因为指令 limitTo remove 元素从 DOM 中。您可以创建自己的指令，例如隐藏元素的limitTo。
是的。如果我有一个包含 50 行的表，并且如果我隐藏了元素并且每个元素中都有指令，那么指令不会对表中的所有元素执行。这会减慢表单速度

标签： javascript angularjs forms

【解决方案1】：

正如@Stepan Kasyanenko 所说，如果您从 DOM 中删除元素（limitTo 这样做）验证将不起作用。如果您将元素放在 DOM 中但隐藏它们，那么显示的错误消息将不会很有用，因为输入不会显示给用户。

因此，您可以为每个页面设置一个表单。如果当前页面的验证正常，则提交按钮将转到下一页。最后一页的提交按钮将表单保存到服务器。如果你想保存所有提交的信息，那么你可以只保存当前页面提交到服务器。

【讨论】：