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):
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: Ссылка
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.
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.
Update 1:
$ 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
Update 2:
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.
Tags und Links angularjs angular-ui-router angularjs-ng-form