在Angular JS（1.x）中驗證分頁表單

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中但隱藏它們，那么顯示的錯誤消息將不會非常有用，因為輸入不會顯示給用戶。

因此，您可以為每個頁面設置一個表單。 如果當前頁面的驗證正常，則提交按鈕將轉到下一頁。 最后一頁上的提交按鈕將表單保存到服務器。 如果要保存所有提交的信息，則只能保存提交到服務器的當前頁面。