Ich habe den folgenden Code in einer AngularJS-Anwendung in einem Controller, der von einer ng-submit-Funktion aufgerufen wird, die zu einem Formular mit Namen gehört profileForm
:
$scope.updateProfile = function() {
if($scope.profileForm.$invalid) {
//error handling..
}
//etc.
};
Gibt es innerhalb dieser Funktion eine Möglichkeit herauszufinden, welche Felder dazu führen, dass das gesamte Formular als ungültig bezeichnet wird?
validation
angularjs
GSto
quelle
quelle
name
Attribut der Eingabe angeben , um es (natürlich) in $ name zu sehen. Die Tatsache, dass AngularJS an eine Modelleigenschaft gebunden wird, ohne dass ein Name erforderlich ist, kann dazu führen, dass es schwierig ist, zu diagnostizieren, welche Eingabe ungültig ist.Zur Überprüfung, welches Formularfeld ungültig ist
Dadurch wird das Array ungültiger Felder des Formulars ausgegeben
quelle
Wenn Sie sehen möchten, welche Felder Ihre Validierung durcheinander bringen und Ihnen jQuery helfen soll, suchen Sie einfach in der Javascript-Konsole nach der Klasse "ng-invalid" .
Es werden alle DOM-Elemente aufgelistet, deren Validierung aus irgendeinem Grund fehlgeschlagen ist.
quelle
Sie können durchlaufen
form.$error.pattern
.quelle
Wenn ein Feld ungültig ist und Sie versuchen, seinen Wert abzurufen, ist dies der Fall
undefined
.Nehmen wir an, Sie haben eine Texteingabe angehängt,
$scope.mynum
die nur gültig ist, wenn Sie Zahlen eingeben und darauf eingegebenABC
haben.Wenn Sie versuchen, den Wert von zu erhalten
$scope.mynum
, wäre esundefined
; es würde das nicht zurückgebenABC
.(Wahrscheinlich wissen Sie das alles, aber trotzdem)
Ich würde also ein Array verwenden, das alle Elemente enthält, die validiert werden müssen und die ich dem Bereich hinzugefügt habe, und einen Filter (z. B. mit underscore.js) verwenden, um zu überprüfen, welche als zurückgegeben werden
typeof
undefined
.Und das wären die Felder, die den ungültigen Zustand verursachen.
quelle
Ich wollte alle Fehler im Tooltip der deaktivierten Schaltfläche "Speichern" anzeigen, damit der Benutzer weiß, warum deaktiviert ist, anstatt in der langen Form nach oben und unten zu scrollen.
Hinweis: Denken Sie daran, den Feldern in Ihrem Formular eine Namenseigenschaft hinzuzufügen
quelle
Für meine Anwendung zeige ich Fehler wie folgt an:
Wenn Sie alles sehen möchten, klicken Sie einfach auf "Err", um Folgendes anzuzeigen:
Nicht so gut formatiert, aber Sie werden diese Dinge dort sehen ...
quelle
Wenn Sie Felder suchen möchten, die das Formular auf der Benutzeroberfläche ohne Programmierung ungültig machen, klicken Sie einfach mit der rechten Maustaste auf inspizieren (öffnen Sie die Entwicklertools in der Elementansicht) und suchen Sie auf dieser Registerkarte mit Strg + f nach ng-invalid. Dann können Sie für jedes Feld, für das Sie eine ng-ungültige Klasse finden, überprüfen, ob dem Feld während der Anforderung kein Wert zugewiesen wurde oder ob andere Regeln verletzt wurden (ungültiges E-Mail-Format, Definition außerhalb des Bereichs / max / min usw.). . Dies ist der einfachste Weg.
quelle