Sprawdzanie poprawności stronicowanych formularzy w Angular JS (1.x)

Question

Mam formularz w kanciastym przy użyciu tabel z polem wprowadzania. Użytkownicy mogą dodawać i usuwać wiersze. Każda komórka może być tekstem typu wejściowego, cyfrą itp. Jeśli tabela jest zbyt duża, formularz staje się powolny. Jednym ze sposobów rozwiązania tego problemu jest paginacja stołu.

Niestety, paginowanie tabeli jest problemem, ponieważ mam niestandardowe sprawdzanie poprawności w polach wejściowych i formularz nie powinien być przesyłany, jeśli którekolwiek z pól na dowolnej stronie jest nieprawidłowe. Dla np. Użytkownik może wypełnić pierwszą stronę i przesłać formularz bez wypełniania drugiej strony. Angular musi podać błąd dla pól na drugiej stronie. Obecnie używam kątowej implementacji dyrektywy form do zarządzania błędami. Formy kątowe pokazują tylko pola na bieżącej stronie, a nie na drugiej stronie.

Proszę spojrzeć na to plunkr. Formularz ma poniższy format.

<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>

W tabeli pole tekstowe ma wymaganej walidacji. Na pierwszej stronie formularz jest ważny, ponieważ wszystkie pola tekstowe są wypełnione. Ale na drugiej stronie jedno pole tekstowe nie jest wypełnione. Tak więc formularz powinien być nieprawidłowy. Ale traci ważność tylko wtedy, gdy przejdę do następnej strony.

Jak rozwiązać ten problem?

Answer 1

Jak powiedział @Stepan Kasyanenko, jeśli usuniesz element z DOM (limitTo to robi) walidacja nie zadziała. Jeśli umieścisz elementy w DOM, ale je ukryjesz, wyświetlane komunikaty o błędach nie będą zbyt użyteczne, ponieważ dane wejściowe nie są pokazywane użytkownikowi.

Możesz więc ustawić formularz dla każdej strony. Przycisk przesyłania przejdzie do następnej strony, jeśli sprawdzanie poprawności bieżącej strony jest prawidłowe. Przycisk przesyłania na ostatniej stronie zapisze formularz na serwerze. Jeśli chcesz zapisać wszystkie przesłane informacje, możesz zapisać tylko bieżącą stronę po przesłaniu do serwera.