Wir haben gerade das Lernen über Angular Template-gesteuerte Formulare abgeschlossen und
in der Übung auch unsere erste vorlagengesteuerte Form konstruiert.
Wenn der Benutzer nun Informationen in die Formularfelder eingibt,
möchten wir möglicherweise die Daten überprüfen, die der Benutzer in diese Datenfelder eingibt.
In den frühen Tagen des Webs
bestand die einzige Möglichkeit, die Daten zu überprüfen, darin, die Daten
an den Server zu senden und dann die Prüfungen auf der Serverseite durchzuführen
und dann das Ergebnis von der Serverseite zu erhalten.
Aber heutzutage, mit leistungsstarken clientseitigen Frameworks wie Angular,
kann ein Großteil der Datenvalidierung leicht auf der Clientseite
selbst durchgeführt werden, und wir können leicht viele der Fehler auf der Clientseite erfassen
und dann sogar dem Benutzer Hinweise auf die Fehler geben.
Nun, hier werden wir uns die Angular-Unterstützung für die
Formularvalidierung ansehen und dann wie wir Formularvalidierung durchführen können,
und dann Fehlermeldungen an den Benutzer in den Ansichten anzeigen können.
HTML5 verfügt bereits über eine integrierte Unterstützung für die Formularvalidierung.
Aber wenn wir Angular für unsere Anwendung verwenden,
müssen wir zuerst die HTML5-Formularvalidierung deaktivieren,
so dass die Verantwortung für die
Formularvalidierung auf die Angular-Anwendung übertragen wird.
Um dies für das Formular zu tun,
wie wir bereits in der Übung gesehen haben,
fügen wir das novalidate-Attribut in das Formular-Tag dort ein,
so dass dies sicherstellt, dass der Winkel
die Verantwortung übernimmt, Formularvalidierung durchzuführen.
Wie hilft Angular uns bei der Formularvalidierung?
Das werden wir als Nächstes genauer untersuchen.
Wann immer Sie eine Formularüberprüfung in Angular durchführen
müssen, insbesondere wenn Sie auf die Formularfelder in Ihrer Vorlage verweisen müssen,
benötigen Sie die Hilfe von Angular Template-Referenzvariablen.
Wie geben wir eine Template-Referenzvariable an?
Die Vorlagenreferenzvariable kann für
jedes Element angegeben werden, indem eine Template-Variable wie diese verknüpft wird.
Zum Beispiel
geben wir in diesem Fall für das Formular das Anmeldeformular an, das gleich ngForm ist.
In ähnlicher Weise
würden Sie für ein Eingabefeld beispielsweise Schrägstrich sagen,
oder vielmehr #username ist gleich ngModel.
In diesem Fall sind das Anmeldeformular und der Benutzername alle Vorlagenreferenzvariablen.
Diese Vorlagenreferenzvariablen können dann innerhalb
unserer Angular-Vorlage verwendet werden, um auf diese Felder zu verweisen.
In der Vorlage selbst
können Sie also die Steuerelementzustände für
diese Felder überprüfen, einschließlich Dinge wie, ob das Feld gültig ist,
ob es schmutzig ist
oder ob es einige Fehler aufweist.
Wir werden diese Unterstützung nutzen, die Angular bietet, um die Formularvalidierung durchzuführen.
Wie ich bereits erwähnt habe, werden wir
die Vorlagenreferenzvariablen nutzen, um den Kontrollstatus zu sammeln, um nach Informationen zu suchen.
So können Sie zum Beispiel username.pristine in Ihrer Vorlage sagen.
Das bezieht sich also auf die Überprüfung des Zustands,
ob sich das jeweilige Steuerelement im makellosen Zustand befindet,
was bedeutet, dass es vom Benutzer bisher nicht berührt und geändert wurde.
Das Dirty ist das Gegenteil von
makellos, was bedeutet, dass, wenn ein Feld schmutzig ist,
das bedeutet, dass das Feld in der Vergangenheit vom Benutzer geändert wurde.
Ebenso
können wir anhand des gültigen und ungültigen Kontrollstatus prüfen, ob die Informationen in diesem Feld gültig oder ungültig sind,
abhängig von der Spezifikation Ihrer Prüfung auf
die Gültigkeit oder den ungültigen Zustand dieses Feldes.
So können Sie beispielsweise überprüfen, ob Sie ein Feld als erforderlich deklariert haben.
Das bedeutet, dass Sie erwartet haben, dass der Benutzer
mindestens einige Informationen in das Feld eingibt.
Das Fehlen von Informationen innerhalb des Felds in Ihrem Formular bedeutet, dass das Feld ungültig ist.
In ähnlicher Weise können Sie das Festland oder die maximale Länge eines Feldwertes angeben,
so dass Sie leicht überprüfen können, ob die Anzahl der Zeichen
innerhalb eines Feldes etwa
die Hauptlänge oder unter der maximalen Länge ist usw.
In der folgenden Übung
werden wir diese verschiedenen Formular-Validierungsansätze für
unser vorlagenorientiertes Formular anwenden, das wir in der vorherigen Übung entwickelt haben.
In Ihrem Formular
können Sie beispielsweise die Schaltfläche „Absenden“ deaktivieren, indem Sie prüfen
, ob sich das Formular im gültigen Status befindet oder nicht.
In diesem Fall werden Sie die Deaktivierten zuordnen
und es gleich dem Anmeldeform.ungültig setzen,
bedeutet, dass, wenn das Formular ungültig ist,
diese Schaltfläche in diesem Fall deaktiviert wird.
Daher wird der Benutzer nicht berechtigt, die Informationen über dieses spezielle Formular zu übermitteln.
Dies ist also eine Möglichkeit, sicherzustellen, dass
falsche Einträge vom Benutzer nicht über das Formular übermittelt werden.
Ebenso
können Sie bei bestimmten Feldern überprüfen, ob das Feld ausgefüllt wurde oder nicht.
Wenn Sie also angeben, dass ein bestimmtes Feld erforderlich ist,
indem Sie das erforderliche Attribut für das Eingabefeld angeben,
können Sie überprüfen, ob ein Fehler des
erforderlichen Typs für das jeweilige Feldelement dort ausgelöst wird.
So
können Sie beispielsweise in Ihrem Code sogar angeben, um den Benutzer darüber zu informieren
, dass ein bestimmtes Feld falsch ist.
Sie verwenden den mat-error, um das zu signalisieren.
Also, das mat-error -Tag, das
wiederum von der Angular Material Form Unterstützung kommt, wie Sie hier sehen,
wenn das nGIF sich als true herausstellt,
dann wird diese Nachricht unten im Eingabefeld dort angezeigt,
und ähnlich wie das Eingabefeld,
wird als rot auf dem Bildschirm markiert.
Dies ist also etwas, das Sie überprüfen und
sicherstellen und auch Fehlermeldungen an den Benutzer senden werden.
In der folgenden Übung
werden wir diesen Ansatz anwenden, um den Benutzernamen und das Passwort zu überprüfen.
Wir geben an, dass diese Felder erforderlich sind und wenn der Benutzer
nach dem Berühren des Feldes keine Informationen in diese Felder eingibt, stellen
wir sicher, dass dem Benutzer die entsprechende Fehlermeldung angezeigt wird.
Also, mit diesem schnellen Verständnis der Formularvalidierung in Angular,
gehen wir zu der Übung,
wo wir überprüfen, wie wir einfache Formularvalidierung für
unser Anmeldeformular durchführen und dann in der Lage sein, Fehlermeldungen anzuzeigen.
Wir werden wieder zur Formularvalidierung in einer der späteren Übungen zurückkommen,
nachdem wir mehr über die reaktive Unterstützung in Angular gelernt haben.