javascript - 在 Angular JS (1.x) 中验证分页表单

Question

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

不幸的是，对表格进行分页是一个问题，因为我对输入字段进行了自定义验证，如果任何页面中的任何字段无效，则不应提交表单。例如用户可以填写第一页并提交表单，而无需填写第二页。 Angular 必须为第二页中的字段抛出错误。目前我正在使用表单指令的 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>

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

我该如何解决这个问题？

Answer 1

正如@Stepan Kasyanenko 所说，如果您从 DOM 中删除元素(limitTo 执行此操作)，验证将不起作用。如果您将元素放在 DOM 中但隐藏了它们，那么显示的错误消息将不会很有用，因为不会向用户显示输入。

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