[MUSIK]
Nun, da wir in der
vorherigen Vorlesung eine schnelle Einführung in die reaktive Formularvalidierung hatten, fahren wir mit der nächsten Übung fort, in der wir die
Formularvalidierung auf das reaktive Formular anwenden konnten, das wir in der vorherigen Übung erstellt haben.
Gehen wir also zu unserer Kontaktkomponente Typoskriptdatei,
lassen Sie uns in der Form Validatoren zu jeder dieser Eigenschaften innerhalb unseres Formularmodells hinzufügen.
Also für den Vornamen würde ich innerhalb des Arrays sagen, Validators.
Erforderlich, In ähnlicher Weise werde ich
das gleiche auf die, Nachname anwenden.
Dann E-Mail, und auch für das Telnum, so für
das Telnum würde ich sagen, für die restlichen drei Ich kann sie offen lassen,
weil ich stimme entweder falsch oder wahr zu sein und ihnen andere Werte geben.
Da es sich um einen leichten Umschalter handelt und Kontakttyp kann nur einen
der drei Werte annehmen und Default-Wert ist bereits dort angegeben,
und für Nachricht können wir es nicht zu einem erforderlichen Wert machen.
Wenn der Benutzer keine Kommentare eingeben möchte,
können Sie ihm erlauben, keine Kommentare einzugeben, aber wenn Sie möchten,
können Sie die Validators.Erforderlich auch für Nachricht hinzufügen.
Wenn Sie das Formular in der onSubmit-Methode hier zurücksetzen,
können Sie auch das Formular auf seinen Anfangswert zurücksetzen, wie wir
in der Methode angegeben haben, in der wir das Formular erstellt haben.
Innerhalb des Reset-Werts nimmt es hier ein Objekt als Parameter.
Dieses Objekt wird von der Reset-Methode verwendet, indem wir die
Methode des Sollwerts verwenden, die wir zuvor in der Vorlesung gesehen haben, um
das Formular auf die Bedingung zurückzusetzen, wie es war, wenn es ursprünglich erstellt wurde.
Also, hier können wir
Parameter wie Vorname: '',
Nachname: '', telnum: 0,
Dann email: '',
zustimmen: false,
Kontakttyp: 'None',
Nachricht: ''});.
Diese Werte, die wir in diesem
JavaScript-Objekt angegeben haben, die wir uns den Parameter für die
Reset-Methode geben, werden genau die gleichen Werte haben, wie wir für
diese Eigenschaften gesehen haben, als wir dieses Feedback-Formular erstellt haben.
Wir müssen das Formular auch vollständig in der Vorlage zurücksetzen.
Um das zu tun, gehen Sie zurück zum Import hier oben, und
dann importieren wir auch das ViewChild} von '@angular /core';.
Dies ermöglicht es uns, Zugriff auf
jedes der untergeordneten dom-Elemente in meiner Vorlage zu erhalten.
Nachdem ich dies getan habe, in den Code gekommen bin,
hier in der ContactComponent, kann ich @ViewChild sagen,
und dann werde ich in der Lage sein, auf das FeedbackForm zu verweisen, indem ich
ihm eine Template-Variable mit dem Namen fform gebe.
Sie werden das im nächsten Schritt tun, und dann
werde ich dazu mit FeedbackFormDirective darauf verweisen.
Dies ermöglicht es uns, Zugriff auf das Vorlagenformular zu erhalten und
es dann vollständig zurückzusetzen, so dass das Formular selbst auf seinen ursprünglichen Wert zurückgesetzt wird.
Dies ist also ein weiterer zusätzlicher Schritt, den wir tun müssen, um sicherzustellen, dass das Formular
hier vollständig auf seinen Anfangswert zurückgesetzt wird.
Nachdem wir das in der onSubject-Methode getan haben, nachdem wir das
FeedbackForm-Objekt selbst hier zurückgesetzt haben, müssen wir auch
dies.FeedbackFormDirective.resetForm () hinzufügen;
Dort.
Dadurch wird sichergestellt, dass mein FeedbackForm an
dieser Stelle vollständig auf seinen ursprünglichen Wert zurückgesetzt wird.
Nach diesen Änderungen gehen wir nun zu unserer
Vorlagendatei, um zu zeigen, wie wir diese
Fehler in unsere Vorlage für unser Formular dort widerspiegeln können.
Also, wechseln Sie zur Vorlagendatei.
Also zuerst, wir werden hier auf die Schaltfläche gehen, und
dann werden wir die Schaltfläche Deaktiviert machen.
Wenn das „FeedbackForm ungültig ist“.
Die Schaltfläche wird also nur dann aktiviert, wenn das FeedbackFormular gültig ist.
Wenn ich zu diesem Formular gehe, kann ich
das <mat-error *ngif="feedbackForm.get“ get
('firstname') .hasError ('required')
&&
feedbackForm.get ('firstname')
.touched“ hinzufügen, und die Nachricht lautet Vorname ist erforderlich.
Das wäre also die Nachricht, die Sie mit einer einzigen Zeile mit dem ausgeblendeten,
mit dieser Information dort zuweisen.
Lassen Sie mich das Gleiche auf den Nachnamen, die
Telefonnummer und die E-Mail anwenden.
Also werde ich nur kopieren, einfügen und bearbeiten,
damit Sie mit diesen fortfahren können, und ('Nachname').
Nachname.
Telnum.
Also wende ich das auf ('telnum') an.
Wieder die gleiche Idee dahinter und dann auch per E-Mail.
( 'E-Mail').
Lassen Sie uns in der Template-Variable fform zum Formular hinzufügen.
Also tippe ich #fform ="ngForm“.
Gehen Sie zu unserem Formular im Browser, lassen Sie mich den Vornamen eingeben,
und Sie sehen, dass, selbst wenn ich den Wert lösche, immer noch grün bleibt,
weil wir die berührt dort.
Aber in dem Moment, in dem ich mich davon wegziehe,
werden Sie in der Lage sein zu sehen, dass das eine rote Farbe wird.
So ähnlich für den Nachnamen werden Sie sehen, dass, wenn ich
den Nachname-Wert entferne, dann wird das dort ähnlich angezeigt.
Lassen Sie mich den Vornamen und den Nachnamen eingeben, und für die E-Mail auch.
Die, Gleiche Fall für die Telefonnummer auch.
So können Sie Formularvalidierung in unserer Anwendung durchführen.
Damit füllen wir diese Übung aus, in der wir
unser reaktives Formular in Form Validierung hinzugefügt haben.
Dies ist ein guter Zeitpunkt für Sie, ein Git-Commit mit der Nachricht zu machen,
reaktive bildet Teil zwei.
( MUSIK)