Validierung von paginierten Formularen in Angular JS (1.x)

Question

Ich habe ein Formular in eckigen mit Tabellen mit Eingabefeld. Benutzer können Zeilen hinzufügen und löschen. Jede Zelle kann Text vom Eingabetyp, Zahldatum usw. sein. Wenn die Tabelle zu groß ist, wird das Formular langsam. Eine Möglichkeit, dies zu lösen, besteht darin, die Tabelle zu paginieren.

Leider ist das Paginieren der Tabelle ein Problem, da ich benutzerdefinierte Validierungen für die Eingabefelder habe und das Formular nicht senden sollte, wenn eines der Felder auf einer Seite ungültig ist. Für z.B. Der Benutzer kann die erste Seite ausfüllen und das Formular einreichen, ohne die zweite Seite zu füllen. Angular muss einen Fehler für die Felder auf der zweiten Seite ausgeben. Zurzeit verwende ich die eckige Implementierung der form Direktive, um Fehler zu verwalten. Winkelförmige Formulare zeigen nur die Felder auf der aktuellen Seite und nicht auf der zweiten Seite an.

Werfen Sie einen Blick auf diese plunkr. Das Formular hat das folgende 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>

In der Tabelle hat das Textfeld eine erforderliche Validierung. Auf der ersten Seite ist das Formular gültig, da alle Textfelder ausgefüllt sind. Aber auf der zweiten Seite ist ein Textfeld nicht ausgefüllt. Also sollte das Formular eigentlich ungültig sein. Aber es wird nur ungültig, wenn ich auf die nächste Seite gehe.

Wie löse ich dieses Problem?

Answer 1

Wie @Stepan Kasyanenko sagte, wenn Sie das Element aus DOM entfernen (LimitTo tut dies) Validierung wird nicht funktionieren. Wenn Sie die Elemente in DOM einfügen, sie aber ausblenden, sind die angezeigten Fehlermeldungen nicht sehr nützlich, da die Eingaben dem Benutzer nicht angezeigt werden.

So können Sie ein Formular für jede Seite festlegen. Die Schaltfläche Senden wird zur nächsten Seite weitergeleitet, wenn die Validierung für die aktuelle Seite in Ordnung ist. Die Schaltfläche "Senden" auf der letzten Seite speichert das Formular auf dem Server. Wenn Sie alle übermittelten Informationen speichern möchten, können Sie nur die aktuelle Seite auf dem Server speichern.