Nun, da wir in der
vorherigen Vorlesung über vorlagengesteuerte Formularvalidierung in Angular
gelernt haben, lassen Sie uns das Gelernte auf
das Anmeldeformular anwenden, das wir in der vorherigen Übung entworfen haben.
Wir werden eine einfache Formularvalidierung für das Anmeldeformular durchführen.
Insbesondere geben wir den Benutzernamen und das Kennwort
nach Bedarf an und prüfen dann, ob der Benutzer Informationen in diese Felder eingibt
und Fehlermeldungen anzeigen kann, wenn die Felder leer sind.
Lassen Sie uns mit dieser Änderung an der Anwendung in dieser Übung fortfahren.
Um mit dieser Übung zu beginnen,
gehen wir hier zum Anmeldeformular,
das wir in der Login-Komponenten-Vorlage hier haben.
Wir haben bereits das novalidate-Attribut zum Anmeldeformular hinzugefügt.
Also, lassen Sie uns in der Template-Variable namens LogInform zu dieser Vorlage hinzufügen,
und dann setzen Sie dies auf ngForm, wie wir aus der vorherigen Vorlesung hier verstanden.
Also, indem wir dies tun,
spezifizieren wir, dass diese Template-Variable es uns ermöglicht, den Zustand des Formulars zu verfolgen.
So können wir sogar auf den gültigen oder ungültigen Zustand für dieses Formular überprüfen.
Jetzt
werden wir zusätzlich für jede dieser Eingaben auch die entsprechenden Template-Variablen hier hinzufügen.
Also, lassen Sie mich zur nächsten Zeile hier gehen,
und dort werde ich sagen, Benutzername ist ngModel.
Dann geben wir dies auch hier wie erforderlich an.
In ähnlicher Weise
werden wir für das Passwort die entsprechende Template-Variable hier hinzufügen, da das Passwort in ngModel ist,
und geben Sie dies dann wie hier erforderlich an.
Nun, da wir die Template-Variablen angegeben haben,
können wir dann einige der Formular-Validierungsprüfungen hier durchführen.
Nun, da wir dies bei Bedarf angeben,
bedeutet das, dass, wenn diese
Felder die
Eingabefelder leer sind, der erforderliche Fehler dafür gekennzeichnet wird.
In ähnlicher Weise
können wir jetzt, da wir die Template-Variable für das Formular haben, diese leicht verwenden, um die Schaltfläche Absenden unten unten zu überprüfen und zu deaktivieren.
Also, für die Schaltfläche Senden,
was wir hier tun, ist
das deaktivierte Feld hier zu verwenden,
und dann werden wir das deaktivierte Feld
auf LogInform.Form.Invalid setzen.
Also, indem wir dies tun,
werden wir diese Schaltfläche deaktivieren, wenn das Formular ungültig ist.
Somit kann der Benutzer das Formular nicht einmal absenden, wenn das Formular ungültige Eingabe enthält.
Wenn beispielsweise der Benutzername leer ist oder das Kennwort leer ist, ist
das Anmeldeformular ungültig,
und daher kann der Benutzer dieses Formular nicht senden.
Nun, dies ist ein Teil der Formularvalidierung, die wir tun können,
wodurch wir verhindern können, dass das Formular gesendet wird.
Darüber hinaus
können wir für jedes dieser Felder sogar eine Fehlermeldung anzeigen, um
anzuzeigen, welche Art von Fehler in diesem speziellen Feld auftritt. Um
dies zu tun,
werden wir zu jedem dieser Formularfeldelemente das mat-error-Tag dort hinzufügen,
und dann sagen wir stop nGIF,
und wir sagen username.errors.
Beachten Sie also, dass wir dieser Vorlage bereits eine Variable namens username gegeben haben,
so dass wir in username.errors verwenden können, wenn es Fehler gibt und
wenn dieser Fehlertyp erforderlich ist.
Also, wenn der Fehler eine erforderliche Art von Fehler ist, die dort verursacht wird,
dann
können wir an diesem Punkt angeben, dass der entsprechende Fehler angezeigt werden Benutzername erforderlich ist.
Das ist also der Fehler, der hier für dieses Feld angezeigt wird.
In ähnlicher Weise lassen Sie mich die gleiche Art von Sache für das Passwortfeld hier hinzufügen.
Also, lassen Sie mich das kopieren und dann fügen Sie es hier ein,
und dann sagen wir password.errors.
Dann wird die Nachricht Passwort erforderlich sein.
Indem wir dies hinzufügen,
werden wir Fehlermeldungen unten unter
diesen Feldern anzeigen, wenn das Feld keine Informationen enthält.
Geringfügige Korrektur hier.
Das sollte Benutzername sein? errors.hier erforderlich,
und in ähnlicher Weise sollte dieser auch hier erforderlich.required sein.
Mit diesen Änderungen
ist meine Login-Komponente nun bereit,
die Formularvalidierung durchzuführen und dann Fehlermeldungen anzuzeigen.
Also, lassen Sie uns die Änderungen speichern und dann gehen und werfen Sie einen Blick auf die aktualisierte Anwendung.
Gehen wir zu unserer Anwendung im Browser,
lassen Sie uns das Anmeldeformular hier öffnen.
So können Sie sehen, dass jetzt sowohl der Benutzername als auch das Passwort
einen Stern tragen, um anzuzeigen, dass beide erforderlich sind.
Also, lassen Sie mich eintippen.
Hier sehen Sie also, dass das Formular gültig ist, weil es Informationen enthält,
und so wird die Login-Schaltfläche aktiviert.
Lassen Sie mich die Informationen aus dem Passwortfeld entfernen,
und dann bemerken Sie sofort, dass
der Fehler hier angezeigt wird, dass Passwort erforderlich ist.
Beachten Sie auch, dass die Login-Schaltfläche nicht mehr aktiviert ist.
Es wird deaktiviert sein. So können Sie das Formular hier nicht absenden.
Aber in dem Moment, in dem ich etwas in das Passwort ausfülle,
wird die Login-Schaltfläche aktiviert,
und wir können das Formular hier absenden.
Ähnlich für den Benutzernamen.
Wenn ich dort die Benutzernameninformationen entferne,
wird der Fehler hier angezeigt,
und Sie werden auch sehen, dass die Login-Schaltfläche an dieser Stelle nicht aktiviert ist.
So kann in diesem Fall die Formularvalidierung durchgeführt werden.
Wie Sie gesehen haben,
können wir durch Hinzufügen einer einfachen Formularvalidierung zu unserer Anwendung überprüfen, um sicherzustellen, dass
die Felder die Informationen enthalten, die sie enthalten sollen,
und im richtigen Format.
Wir werden ein wenig mehr von der Formularvalidierung in einer der späteren Übungen untersuchen,
vor allem für reaktive Formen.
Damit schließen wir diese Übung ab.
Dies ist ein guter Zeitpunkt für Sie, ein
Git-Commit mit den Nachrichtenvorlagengesteuerten Formularen zu machen, Teil zwei.