Question

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

不幸的是，对表进行分页是个问题，因为我在输入字段上有自定义验证，如果任何页面中的任何字段无效，则表单不应提交。对于例如用户可以填写第一页并提交表单而不填写第二页。 Angular必须为第二页中的字段抛出错误。目前我正在使用form指令的角度实现来管理错误。 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中但隐藏它们，那么显示的错误消息将不会非常有用，因为输入不会显示给用户。

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

在Angular JS（1.x）中验证分页表单

1 个答案: