AngularJS-Formularvalidierung: $ Dirty-Value-Änderung durch ui.router-Statusänderungen

8

Mein Anwendungsfall:

Ich habe eine Multi-Step-Form mit ui-Router wie in der Plunkr unten. Ich benutze ng-form um Informationen von AngularJS zu validieren, wie $ valid, $ dirty etc.

Nach jedem Klick auf die Schaltfläche "Next section" sende ich die Formulardaten an den Server, um sie abzurufen, falls der Benutzer das Formular vor dem Beenden beendet.

Wenn der Benutzer den ersten Schritt zweimal sendet, sende ich NUR die bearbeiteten Daten (wenn der Wert $ dirty stimmt). All dies ist nicht in der Plunkr, ich wählte, um Ihnen eine einfache Form zu zeigen, aber mein Formular kann hundert Felder (Radio, Kontrollkästchen, Eingabe, Auswahl usw.) Enthalten.

Die Schritte zum Reproduzieren des Problems (plunkr):

  1. Füllen Sie Schritt 1 und gehen Sie zum nächsten Abschnitt
  2. Überprüfen Sie das Xbox-Radio und kehren Sie zu Schritt 1 zurück, indem Sie auf die Nummer klicken %Code%
  3. Komm zurück zu Schritt 2 myMultiStepForm.interests.xbox.$dirty = true

Warum wird $ dirty value auf false geändert? Ich denke, das liegt daran, dass myMultiStepForm.interests.xbox.$dirty = false erneut angezeigt wird und alle Validierungsdaten zurückgesetzt werden.

Gibt es eine Möglichkeit, dies zu vermeiden? Oder vielleicht etwas anderes als <ng-form> , um die Validierung von Teilmengen von Feldern zu behandeln?

Dies ist der Plunkr: Ссылка

    
tomahim 07.10.2016, 14:55
quelle

2 Antworten

2

Wenn Sie ein Formular oder einen Controller darin verknüpfen, beginnt es immer als $pristine . Der Grund dafür ist, dass die Modelle wie formData.type einfach einige Werte haben, angular hat keine Möglichkeit zu wissen, dass diese Werte der Standardzustand waren, der vom Server kam oder das Ergebnis einer vorherigen Benutzerinteraktion war. Sie sind ein einfaches string oder etwas ohne diese Art von Metadaten angehängt.

Um zu erreichen, was Sie wollen, müssen Sie den Zustand $dirty bei Statusübergängen manuell verfolgen und $setDirty bei Bedarf auf das Formular anwenden.

Hier ist ein kleines Beispiel, das den Formularschrittseiten einen Controller hinzufügt, der den Formularstatus beim Beenden speichert (in eine gemeinsam genutzte Dienstinstanz, Sie könnten dies auch über resolve hinzufügen) und bei der Erstellung wiederherstellen. Der aktuelle formPage wird über einen Standardparameterwert eingespeist, so dass derselbe Controller für alle Schritte verwendet werden kann.

%Vor%
    
yscik 10.10.2016, 14:13
quelle
2

Ich habe gelöst und die Lösung ist in der unteren Plünderer.

Diesbezüglich:

  

Hinweis: Der Zweck von ngForm besteht darin, Steuerelemente zu gruppieren, aber nicht a   Ersatz für das Etikett mit all seinen Fähigkeiten (z.B.   auf dem Server veröffentlichen, ...).

gemäß Angular Documentation für das ngForm-Element .

Ich frage mich auch, warum Sie viele <ng-form> -Elemente verwenden. Dies ist die einzige mögliche Lösung für Ihr Problem.

Plunker Modified

Update 1:

Erklärung für $ dirty

$ dirty wird nur dann auf "true" gesetzt, wenn der Benutzer mit dem betreffenden Element im aktuellen Bereich interagierte .

Wenn Sie mit dem Problem "richtig / falsch" besonders vertraut sind

  • Wir empfehlen Ihnen, $ dirty auf $ pristine zu setzen

Update 2:

Warum ist der Wert nicht wahr, wenn wieder zurück navigiert wird

Wenn Sie von einem Formular zum anderen navigieren, wird der scope des ng-Formulars des jeweiligen Elements zum übergeordneten Controller hinzugefügt. Wenn dasselbe ng-Formular erneut aufgerufen wird, wird überschrieben mit dem des bestehenden.

    
Aravind 10.10.2016 11:41
quelle