AngularJS mehrstufige Formularvalidierung
Ich habe dieses Tutorial über AngularJS Multi- Schrittformular mit UI-Router . Das Formular funktioniert und ich kann meine Daten speichern, aber jetzt habe ich Fragen darüber, wie man jeden Schritt im Formular validiert.
Ich habe folgendes Formular mit Eingabefeldern:
Schritt 1
- Nummernschild
Schritt 2
- Name
- Straße
- Postleitzahl
- Stadt
- Telefon
Schritt 3
- Wählen Sie ein Datum & amp; Zeit von einem Kalender
Es sieht ungefähr so aus:
Ich habe eine allgemeine Basisansicht wie folgt:
%Vor%In meiner app.js habe ich Folgendes (nicht abgeschlossen, die unwichtigen Dinge raus gelassen):
%Vor%Meine allgemeine Form.html:
%Vor%Der erste Schritt in meinem Formular ist in form-license.html:
%Vor%Aber jetzt frage ich mich, wie ich das bestätigen kann, wenn sie auf den nächsten Knopf klicken .... Es funktioniert nicht mit dem normalen erforderlichen Attribut.
Kann mir jemand dabei helfen?
UPDATE:
Jetzt habe ich in meinem ersten Schritt folgendes:
%Vor%In meinem Controller:
%Vor%Ok, das funktioniert. Aber in meinem zweiten Schritt habe ich mehrere Felder wie folgt:
%Vor%Muss ich für jeden einzelnen einen $ scope.watch erstellen? Und muss ich sie zu ng-disabled meiner Schaltfläche hinzufügen?
2 Antworten
Sie können einfach die nächste Schaltfläche deaktivieren, wenn einer der Validierungsschritte nicht bestanden wird.
Etwas wie:
%Vor% form-license.html Fügen Sie das Attribut ng-disabled auf Ihrer nächsten Schaltfläche hinzu:
form-info.html Wiederholen Sie die obigen Schritte
%Vor%Und so weiter ...
Je nachdem, wie Sie es angehen möchten, stehen Ihnen verschiedene Optionen zur Verfügung.
Um zu beginnen, sollten Sie ng-form für jeden der 3 Formularschritte verwenden. Auf diese Weise können Sie jede einzelne Validierung durchführen, ohne sich um die anderen Abschnitte kümmern zu müssen.
Als Beispiel könnte Ihr erster Formularschritt folgendermaßen aussehen:
%Vor% Damit haben Sie nur für diesen Schritt Zugriff auf die Formularvalidierungseigenschaften. An diesem Punkt können Sie Ihren Controller aktualisieren, um .$invalid oder .$valid für das Formularobjekt zu verwenden, das nun an der Schaltfläche next submit übergeben wird, was bedeutet, dass Sie jetzt etwas wie:
Tags und Links javascript angularjs jquery forms validation