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

我有一個使用帶有輸入字段的表格的角度表單。用戶可以添加和刪除行。每個單元格可以是輸入類型文本，數字日期等。如果表格太大，表格變得很慢。解決這個問題的一種方法是對錶格進行分頁。在Angular JS中驗證分頁表單（1.x）

不幸的是分頁是一個問題，因爲我對輸入字段進行了自定義驗證，並且如果任何頁面中的任何字段無效，表單不應提交。對於例如用戶可填寫第一頁並提交表格而不填寫第二頁。 Angular必須爲第二頁中的字段引發錯誤。目前我正在使用form指令的角度實現來管理錯誤。角形僅顯示當前頁面中的字段，而不顯示在第二頁中。

看看這個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>

在該表中，則文本字段具有所需的驗證。在第一頁中，由於所有文本字段都已填充，表單纔有效。但在第二頁中，一個文本字段未被填充。所以表格實際上應該是無效的。但是隻有當我進入下一頁時它纔會失效。

我該如何解決這個問題？

來源

2016-09-05 Syed Suhail Ahmed

表單有效，因爲指令'limitTo' **從* DOM *中移除**元素。你可以創建自己的指令，就像**隱藏**元素的'limitTo'。 –

是的。如果我有一個包含50行的表，並且如果我隱藏了該元素，並且如果每個元素都有指令，那麼該指令不會執行表中的所有元素。這會降低表單的速度 –

由於@Stepan Kasyanenko說，如果你從DOM中刪除元素（limitTo做到這一點），驗證將不起作用。如果您將元素放在DOM中但隱藏它們，那麼顯示的錯誤消息將不會非常有用，因爲輸入不會顯示給用戶。

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

來源

2016-10-18 09:01:46 yogurt

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

回答

相關問題