Wir hatten uns in einer der vorangegangenen Lektionen mit reaktiven Formularen befasst,
wo wir zwei Übungen gemacht haben, die sich mit reaktiven Formularen befassen,
wie wir sie erstellen,
und dann auch einige grundlegende Formularvalidierung auf reaktiven Formularen.
Wir werden mit dem Thema in dieser Lektion fortfahren,
da reaktive Formulare, wie der Name schon sagt,
etwas mit reaktiver Programmierung zu tun haben, wie Sie es vielleicht erwartet haben. Mit
reaktiven Formularen können Sie nun auch Änderungen in den Werten der Formularelemente beobachten, indem Sie
eine beobachtbare verwenden, die Angular als valueChanges zur Verfügung stellt.
Wir verwenden die in dieser Übung beobachtbaren ValueChanges,
um Änderungen an den Werten
ihrer verschiedenen Formularelemente zu verfolgen und dann sofort die Formularüberprüfung auszulösen.
In dieser Übung werden wir den Großteil der Formularvalidierung im
Code und nicht in der Vorlage selbst durchführen,
wie wir es bei der Reaktorformvalidierung in der zweiten Übung reaktiver Formulare getan haben.
Gehen Sie zu contact.component.tsfile,
wir werden das reaktive Formular, das wir hier erstellt haben, aktualisieren,
indem wir ein paar weitere Validatoren für einige dieser Felder hinzufügen.
Also, hier sehen Sie, dass
wir für den Vornamen und die Telefonnummer und E-Mail die erforderlichen Validatoren hinzugefügt haben.
Für den Vor- und Nachnamen
werde ich ein paar weitere Validatoren für
die minimale Länge und die maximale Länge hinzufügen.
Wenn Sie nun mehr als einen Validator in Ihrem reaktiven Formular
haben, müssen Sie sie mit einem Array deklarieren.
Also, dies muss in einem Array hier eingeschlossen werden.
Sie sehen also, dass ich den erforderlichen Validator in ein Array eingeschlossen habe.
Ich werde in einem Validators, MinLength Validator hinzufügen.
Also, für die minimale Länge werde ich zwei als minimale Länge angeben,
so dass der Vorname mindestens zwei Zeichen enthalten sollte.
Auch die maximale Länge, die ich
als 25 Zeichen hinzufügen werde.
Also, hier sehen Sie, dass wir jetzt für den Vornamen drei verschiedene Validierungen haben,
alle in einem Array hier eingeschlossen.
Validatoren erforderlich, Validators minLength
und Validators maxLength hier, 25.
Also werde ich dasselbe auch für meinen Nachnamen tun.
Also, lassen Sie mich diesen ganzen Validators-Strahl hier kopieren
und dann diesen durch diesen Satz von Validatoren ersetzen.
Nun, für die Telefonnummer,
wie Sie sich in der früheren Version des Formulars erinnern würden,
war die Telefonnummer bereit, sogar Alphabete zu akzeptieren,
aber das ist nicht korrekt.
Telefonnummern sind in der Regel Nummern.
Also, hier werden wir einen anderen Validator
namens Pattern Validators verwenden.
Also, das Muster Validator ermöglicht es uns, ein Muster für
die Werte in diesem bestimmten Formularelement eingegeben angeben,
und überprüfen Sie dann, um sicherzustellen, dass der Wert dem angegebenen Muster folgt.
Also, hier ist das Muster, das wir verwenden werden, dass der Wert
nur Zahlen zwischen Null und neun enthalten sollte. Um
das Muster hinzuzufügen,
müssen wir das in der Vorlagendatei tun, wie wir in kurzer Zeit sehen werden.
In ähnlicher Weise
werde ich für die E-Mail auch einen anderen Validator haben, der als E-Mail Validator aufgerufen wird.
Also, wir werden in der Validator-E-Mail hinzufügen.
Dies bedeutet auch, dass wir ein Attribut
namens E-Mail zu der Eingabe in unserer Vorlagendatei hinzufügen müssen.
Mit diesen Änderungen ist meine Formularvalidierung jetzt in dieser Übung robuster geworden.
Nun, wenn das Formular Änderungen in einem seiner Formularelemente erfährt,
dann bietet das Angular Framework eine beobachtbare namens valueChanges beobachtbar.
Also werde ich die ValueChanges verwenden, die auf meinem Feedback-Formular beobachtet werden können.
Also, die valueChanges beobachtbar.
Daher kann die beobachtbare ValueChanges jetzt innerhalb dieser bestimmten Methode abonniert werden.
Wenn wir also das Formular selbst erstellen,
werden wir die hier beobachtbaren ValueChanges abonnieren.
Jetzt, wenn der
ValueChanges, also indem ich dieses beobachtbare abonniere,
werde ich innerhalb des Abonnements angeben, was getan werden soll, wenn der ValueChanges.
Also, wenn die valueChanges Ich würde hier einige Daten
von der Farm erhalten, um anzuzeigen
, welches bestimmte Formularelement die Änderung des Wertes erlebt hat.
Dann, wenn das passiert,
werde ich eine lokale Methode auslösen, die ich mit dem Namen OnValueChanged implementieren werde,
und dann diese Daten als Parameter für diese Methode bereitstellen.
Jetzt, innerhalb dieser onValueChanged-Methode,
werde ich die Formularüberprüfung initiieren
und dann die Formularfehlermeldungen entsprechend definieren, basierend darauf, was
dieses Datenobjekt, das ich hier erhalte, für mich angeben wird.
Außerdem
rufe ich beim ersten Erstellen des Formulars die onValueChanged-Methode ohne Parameter auf,
und dies würde verwendet werden, um
Formularüberprüfungsmeldungen zurückzusetzen.
Wie erstelle ich nun die Formular-Validierungsnachrichten?
Um dies zu tun, werde ich hier meine Formular-Validierungsnachrichten vollständig im Code definieren.
Dann
werde ich durch den Code die Formularüberprüfungsmeldungen anpassen,
und das würde dann verwendet werden, um die Fehlermeldungen in meiner Formularvorlage selbst anzuzeigen.
Also, um das zu tun, was ich tun werde, ist, ein paar JavaScript-Objekte hier hinzuzufügen.
Eines der JavaScript-Objekte, die ich hinzufügen werde, ist als Formularfehler benannt.
Dies ist also ein einfaches JavaScript-Objekt,
das hier alle Fehler für das jeweilige Formular enthält.
Also innerhalb der Formularfehler,
werde ich vier verschiedene Felder verwenden,
Vorname, Nachname.
Wie Sie sich erinnern,
entsprechen diese den vier Formularelementen, auf denen ich die Formularvalidierung,
Telefonnummer und E-Mail durchführe.
Warum definiere ich dieses JavaScript-Objekt hier?
Nun enthält dieses JavaScript-Objekt, wie Sie sehen, vier Elemente hier.
Wenn ich nun die Formularüberprüfung durchführe,
erinnere dich daran, dass
ich bereits angegeben habe, dass ich eine neue Methode namens OnValueChange erstellen werde.
Innerhalb von OnValueChange, wie der Code geschrieben wird, ist, dass,
wenn ein Fehler erkannt wird,
eine Zeichenfolge, die die Nachricht enthält, die diesem
Fehler entspricht, in diesem JavaScript-Objekt hinzugefügt wird.
Auf diese Weise in meinem Code
kann ich die Formularvalidierung durchführen.
Zusätzlich dazu
werde ich nun ein paar Validierungsnachrichten definieren.
Nun, dieses besondere Muster, Dinge zu tun,
lernte ich, indem ich die Dokumentation zur Formularvalidierung auf der angular.io-Website las.
Sie haben also eine ganze Dokumentation zur Formularvalidierung und einen Link zu dem
in den zusätzlichen Ressourcen
dieses Kapitels und auch in den vorherigen Kapiteln über eckige Formen zur Verfügung steht.
Also, dort in diesem speziellen Dokument
verschreiben sie dies als eine Möglichkeit, Formularvalidierung durchzuführen, und ich fand das sehr intuitiv.
Also habe ich auch das gleiche Muster für die Formularvalidierung im Code übernommen.
Also, zusammen mit hier,
werde ich die Validierungsnachrichten für alle möglichen Felder hier definieren.
Also, für das Feld Vorname,
werde ich hier ein paar Validierungsnachrichten definieren, also würde ich sagen,
„erforderlich“ und dann sagen,
„Vorname ist erforderlich“ wie folgt,
ich werde
hier ein paar Validierungsnachrichten hinzufügen und sagen:
„Der Vorname muss
mindestens 2 Zeichen lang sein“ und dann werde ich auch hinzufügen,
„max length“ und die entsprechende Meldung lautet
: „Vorname darf nicht mehr als 25 sein“.
Wenn Sie einen Namen haben, der in 25 Zeichen läuft,
müssen Sie wirklich Ihre Eltern dafür verfluchen, glauben Sie mir,
einer meiner zweiten Vornamen ist ein langer zweiter Vorname
, und den ich nicht explizit in meinen Dokumenten verwende.
Aber, Ich kann den Schmerz verstehen,
wenn Sie einen langen Namen mehr als 25 Zeichen haben.
Leute aus einigen Staaten im südlichen Teil Indiens haben lange Namen,
mein Staat eingeschlossen, hey,
lasst uns etwas Spaß haben, während wir dabei sind.
Okay, ich werde auch das Gleiche für den Nachnamen einschließen.
Also, ich werde dies bearbeiten
und das gleiche wie Nachname angeben.
So, wie Sie innerhalb des Codes sehen, können Sie eine Reihe von Fehlermeldungen angeben.
Wenn Sie Ihren Formularen eine neue Validierung hinzufügen,
müssen Sie
nur hierher kommen und die neue Fehlermeldung in dieses JavaScript-Objekt hinzufügen und Ihr Code wird als solcher gut funktionieren.
Das ist also der Vorteil, dieses Muster zum Entwerfen Ihrer Validierung in Code zu verwenden.
Fortsetzung, lassen Sie mich definieren, die Validierung für Telefonnummer und
die beiden Validierung für Telefonnummern, die passieren würde, ist die „erforderliche“.
Also, ich werde nur das „Erforderliche“ von dort kopieren
und es hier einfügen,
und ich würde sagen,
„Telefonnummer ist erforderlich“, und die nächste Fehlermeldung wäre für „Muster“.
Die Fehlermeldung besagt also:
„Telefonnummer darf nur Zahlen enthalten.“
Also, das ist die andere Nachricht, ähnlich für E-Mail.
Wie Sie sehen können,
entsprechen die Werte, die ich hier verwende, den Validator-Namen, die ich verwendet habe,
„mittlere Länge“, „maximale Länge erforderlich“, „Muster“.
So
würden Sie ähnlich für E-Mail „erforderlich“ und „E-Mail“ sehen.
Also, ich werde nur die „erforderlichen“ hier drüben kopieren und sagen: „E-Mail ist erforderlich“.
Das andere Muster, wie Sie sich erinnern, ist für E-Mail und ich würde sagen,
„E-Mail nicht in gültigem Format“.
Wenn Ihre E-Mail also kein
@-Zeichen und Zeichen auf beiden Seiten des @-Zeichens enthält,
dann ist dies keine gültige E-Mail.
Diese E-Mail Validator ist bereits in das eckige reaktive Forms-Modul integriert.
Also, wir nutzen die E-Mail Validator hier.
Also, hier haben wir alle Validierungsnachrichten, die im Code definiert sind.
Das macht es daher sehr einfach, sie bei Bedarf um zusätzliche Felder zu erweitern und auch
weitere Validierungsnachrichten für zusätzliche Validierungen hinzuzufügen
, die Sie für jedes dieser Formularfelder einführen könnten.
Außerdem hilft mir diese Objektformularfehler,
alle Fehler zu verfolgen, die mit jedem der Elemente in meinem Telefon verbunden sind.
Also, momentan überprüfe ich nur diese vier Elemente,
deshalb habe ich nur dafür.
Geringfügige Korrektur, die „mittlere Länge“ sollte min,
klein 'l' und max Länge auch mit einem kleinen 'l' sein,
ähnlich für den Nachnamen auch.
Nun, lassen Sie uns den Code für die auf Werte geänderte Methode schreiben.
Also, ich werde die Methode
hier schreiben, "valueChanged“ und dann
wird dies möglicherweise einen Parameter aufnehmen.
Deshalb habe ich ein Datenfragezeichen gesetzt,
was bedeutet, dass der Parameter optional ist.
Also, das erste, was ich überprüfen werde, ist „dieses Feedback-Formular“,
was bedeutet, dass, wenn das Feedback-Formular dann nicht erstellt wurde,
und wenn diese Methode aufgerufen wird,
Sie einfach ohne irgendetwas „zurückkehren“ sollten.
Dann werde ich eine
Konstante namens „dieses
Feedback-Formular“ definieren, um es einfach zu machen, den Rest des Codes zu definieren,
dann würde ich sagen, „für
const-Feld in diese.form-Fehler“.
Beachten Sie also, dass dieses Feld this.form Fehler nehmen wird,
das Formular Fehler Objekt, das wir zuvor definiert haben.
Also, fühlen bedeutet, dass ich alle vier überprüfen werde.
Also, wenn ich irgendwelche Änderungen erkenne,
den Vornamen, den Nachnamen, die
Tel Nummer und eine E-Mail.
Deshalb werden diese vier genau die gleichen Namen tragen, wie wir in der Form hier verwendet haben,
und so dass der hier geschriebene Code einfach zu arbeiten ist.
Also, ich werde jetzt die Formularfelder überprüfen.
Dann würde ich zuerst
sicherstellen, dass, falls ich früher Nachrichten an diese Formularfelder angehängt habe,
Formularfehler Objekt dort,
dann werde ich alle löschen.
Deshalb werden, wenn Sie dies ohne Parameter aufrufen,
alle Formularfehlerfelder gelöscht,
und dann würde ich tun, „Steuerelement FormGet“.
Beachten Sie also, dass ich dieses Feld selbst verwende, um ein FormGet zu tun, also
bekomme ich Zugriff auf dieses bestimmte Formularfeld.
Beachten Sie also, dass wir früher „feedbackform.this.feedbackform.get"firstname“ gemacht haben.
und so weiter. Also, ich habe vereinfacht, was in diese bestimmte Konstante, die wir
hier definiert haben, und dann werde ich sagen: „Wenn Kontrolle“.
Also, was bedeutet, dass, wenn die Kontrolle nicht null und „control.dirty“ ist.
Also, wenn dieses bestimmte Feld bereits schmutzig ist
und nicht „control valid“.
Also, bedeutet, dass
ich für jedes der Felder buchstäblich überprüfe, ob es gültig ist,
ob es schmutzig ist,
und dann, ob das Steuerelement bereits vorhanden ist.
Dann werde ich überprüfen, um zu sehen, welche Art von Fehlern zu
diesem speziellen Steuerelement durch das Formular dort hinzugefügt wurden.
Also, hier werde ich sagen,
„const Nachrichten
gleich this.validation messages field“.
Beachten Sie, wie ich
alle Validierungsnachrichten aufnehme, die diesem bestimmten Feld
Vorname, Nachname oder Telnum oder E-Mail entsprechen,
und dann werde ich überprüfen und sehen, ob ich dies in das Feld hinzufügen muss.
Also, wie mache ich das?
Also, wir tun für const Schlüssel in control.errors.
Beachten Sie also, dass dieses Steuerelement Feedback-Form.get-Feld und.error ist,
also überprüfe ich, ob es irgendwelche Fehler gibt.
Dann, in diesem Fall,
werde ich dieses Formularfehlerfeld hinzufügen.
Also, für dieses bestimmte Element im JavaScript-Objekt, das ich hier definiert habe,
würde ich
hier Nachrichtenschlüssel und Leerzeichen hinzufügen.
Also, jetzt, was auch immer Form Fehler Umfrage
oder die entsprechende Nachricht wird genommen und angehängt werden,
und dann, so meine Formularfehler JavaScript-Objekt wird jetzt
alle Fehlermeldungen zusammen enthalten, wenn
diese spezielle auf Werte Methode Ratten geändert.
Nun, dieses spezielle Stück Code, den ich aus
der Formularvalidierungsdokumentation auf angular.iu ausgeliehen habe.
Ich habe festgestellt, dass dies eine sehr intuitive Möglichkeit ist, Formularfehlerüberprüfung durchzuführen.
Also, ich dachte, warum nicht nutzen, dass innerhalb unserer eckigen reaktiven Formen Übung.
Also, fügen Sie diesen Code dort hinzu.
Jetzt ist meine Anwendung bereit, die Formularvalidierung für mein reaktives Formular durchzuführen.
Nun besteht der nächste Schritt darin, zum Kontakt component.html,
der Vorlagendatei, zu gehen und dann die Vorlagendatei zu aktualisieren.
Also, wenn wir zu dieser Vorlagendatei
gehen, werden wir jetzt auf das Formular gehen,
und das in diesem Formular jetzt, anstatt all dies im Code zu tun,
können wir jetzt einen Großteil des Codes hier in der Vorlagendatei hier vereinfachen.
Nun, anstatt all diese Prüfungen zu tun,
was wir erkennen, ist, dass die Formularfehler JavaScript-Objekt in
meiner Typoskriptdatei, wenn es Fehler gibt, dann
die Formularfehler JavaScript-Objekt für dieses bestimmte Feld,
werden alle Fehlermeldungen daran angehängt haben.
Wenn keine Fehler vorliegen
, sind diese Fehlermeldungen nicht vorhanden.
Also, das werde ich verwenden, um zu überprüfen und zu
sehen, ob ich den Formularfehler anzeigen soll oder nicht.
Also, für diese Angelegenheit, anstatt all dies zu überprüfen,
das einzige, was ich hier überprüfen muss, ist FormErrors Vorname, das ist es.
Also, sehr einfach, hier auf Fehler zu überprüfen.
Ähnlich, so dass dieser ganze Code jetzt hier vereinfacht wird,
und ähnlich, wenn Sie
nach der Nachricht hier suchen, was wir tun werden, werde ich diese ganze Sache von
erforderlich berührt zu formerrors.firstName ändern.
Das war's. Wenn das existiert,
dann werden alle Fehlermeldungen, die diesem entsprechen, bereits da sein,
also muss ich nur Interpolation durchführen und
dann formerrors.firstName hier anzeigen,
so einfach wie das.
Jetzt sehen Sie, indem Sie
alle Formularfehlervalidierung und -code durchführen und alle Prüfungen und so weiter im Code durchführen,
haben Sie bereits die Fehlermeldungen erstellt, die wir anzeigen müssen.
Alles, was wir tun, ist, dass wir diese Fehlermeldung nehmen und
diese dann in die Vorlage hier einfügen, das war's.
Der Template-Code wird in diesem speziellen Fall vereinfacht,
und auch durch die Formularvalidierung mit dem Typoskriptcode
haben wir die Vorlage hier vereinfacht, gleichzeitig können wir
kompliziertere Formularvalidierung in unserem Typoskriptcode durchführen.
Ich werde voran gehen und die gleichen Art von Änderungen an den verbleibenden Feldern hier vornehmen,
also
werde ich für das Feld Nachname diese ganze Sache erneut durch formerrors.lastName ersetzen.
Tun Sie das Gleiche für die Telefonnummer.
Nun, wieder, wie Sie sehen, wird die Struktur der Vorlage
in diesem Fall sehr, sehr einheitlich.
Das ist also auch eine weitere Möglichkeit,
die Struktur Ihrer Vorlage zu vereinfachen, weiter zum E-Mail-Feld hier.
Ich werde die gleiche Änderung auch im E-Mail-Feld vornehmen.
Also, ich würde sagen formerrors.email
und ersetzen Sie dies durch formatters.email.
Wie Sie sehen können,
hat sich Ihr Vorlagencode im Vergleich zu zuvor deutlich vereinfacht.
Damit
wurde die gesamte Fehlervalidierung, die ich benötige, in meine Vorlage hinzugefügt und meine Vorlage wird jetzt aktualisiert,
also speichern wir die Änderungen.
Zwei andere Dinge, die ich hinzufügen muss, sind das Attribut
E-Mail zu diesem speziellen Feld namens E-Mail.
Also, denken Sie daran, dass wir die E-Mail Validator hier hinzugefügt.
Also, zusammen mit den erforderlichen,
werde ich E-Mail auch dem Eingabefeld hier hinzufügen.
In ähnlicher Weise
verwenden wir für das Telnum das Muster dort.
Also, ich werde das Muster hinzufügen, so dass dies das Eingabefeld für das Telnum ist.
Also, innerhalb des Eingabefeldes werde ich Muster hinzufügen, ist gleich und
das Muster, das ich hinzufügen werde, ist
innerhalb von eckigen Klammern Null bis neun,
und dann einen Stern dort setzen.
Also, was bedeutet, dass dies alles Null bis neun mehrmals wiederholt ist.
Die Telefonnummer kann also beliebige Nummern zwischen Null und neun enthalten.
Eine beliebige Anzahl dieser Zahlen.
Sie können auch eine minlength und maxlength auf das Telnumfeld setzen,
wenn für Ihr Land die Telefonnummer ein festes Format hat,
können Sie das auch tun.
Also, das kann leicht gemacht werden.
Aber in dieser Übung
habe ich die Minlength und Maxlength Einschränkung für das Telnum hier nicht hinzugefügt.
Nun, da wir alle Updates durchgeführt haben,
speichern wir die Änderungen und dann gehen und werfen einen Blick auf das Formular im Browser.
Gehen Sie jetzt zum Browser,
lassen Sie uns zum Formular hier scrollen.
Lassen Sie uns den Vornamen eingeben und wie Sie sehen, wenn Sie nur ein einzelnes Zeichen eingeben,
dann wird die Fehlermeldung sofort angezeigt,
aber in dem Moment, in dem Sie zusätzliche Zeichen eingeben, dass die Fehlermeldung verschwindet.
In ähnlicher Weise für den Nachnamen.
Wenn Sie für die Telefonnummer versuchen, etwas anderes als Zahlen
einzugeben, werden die Fehlermeldungen angezeigt.
So können Sie,
ähnlich für E-Mail eingeben, so dass Sie sehen, dass das E-Mail-Format nicht ungültig angezeigt wird.
Wenn Sie die E-Mail nicht haben, dann wird auch die Fehlermeldung angezeigt.
Aber in dem Moment, in dem Sie so etwas eingeben,
wird dies als gültiges E-Mail-Format betrachtet, so dass es akzeptiert wird.
Also, das ist der Satz von Fehlermeldungen und die Formularüberprüfung
vollständig im Code durchgeführt, wie in dieser speziellen Übung getan.
Damit schließen wir diese Übung ab.
In dieser Übung haben wir gesehen, dass die Verwendung der Wertänderung beobachtbar ist,
und wir haben auch gesehen, wie wir Formularvalidierung in unserem Typoskriptcode durchführen können.
Damit ist diese Übung abgeschlossen.
Dies ist ein guter Zeitpunkt für Sie, ein Git-Commit mit
der Nachricht reaktive Formen Teil drei zu machen.