1 00:00:00,000 --> 00:00:04,735 [MUSIK] 2 00:00:04,735 --> 00:00:09,734 Nun, da wir in der 3 00:00:09,734 --> 00:00:14,901 vorherigen Vorlesung eine schnelle Einführung in die reaktive Formularvalidierung hatten, fahren wir mit der nächsten Übung fort, in der wir die 4 00:00:14,901 --> 00:00:20,926 Formularvalidierung auf das reaktive Formular anwenden konnten, das wir in der vorherigen Übung erstellt haben. 5 00:00:20,926 --> 00:00:26,101 Gehen wir also zu unserer Kontaktkomponente Typoskriptdatei, 6 00:00:26,101 --> 00:00:34,463 lassen Sie uns in der Form Validatoren zu jeder dieser Eigenschaften innerhalb unseres Formularmodells hinzufügen. 7 00:00:34,463 --> 00:00:42,264 Also für den Vornamen würde ich innerhalb des Arrays sagen, Validators. 8 00:00:45,794 --> 00:00:50,830 Erforderlich, In ähnlicher Weise werde ich 9 00:00:50,830 --> 00:00:55,977 das gleiche auf die, Nachname anwenden. 10 00:00:58,032 --> 00:01:02,361 Dann E-Mail, und auch für das Telnum, so für 11 00:01:02,361 --> 00:01:09,030 das Telnum würde ich sagen, für die restlichen drei Ich kann sie offen lassen, 12 00:01:09,030 --> 00:01:16,066 weil ich stimme entweder falsch oder wahr zu sein und ihnen andere Werte geben. 13 00:01:16,066 --> 00:01:21,117 Da es sich um einen leichten Umschalter handelt und Kontakttyp kann nur einen 14 00:01:21,117 --> 00:01:26,166 der drei Werte annehmen und Default-Wert ist bereits dort angegeben, 15 00:01:26,166 --> 00:01:30,470 und für Nachricht können wir es nicht zu einem erforderlichen Wert machen. 16 00:01:30,470 --> 00:01:32,595 Wenn der Benutzer keine Kommentare eingeben möchte, 17 00:01:32,595 --> 00:01:36,030 können Sie ihm erlauben, keine Kommentare einzugeben, aber wenn Sie möchten, 18 00:01:36,030 --> 00:01:39,619 können Sie die Validators.Erforderlich auch für Nachricht hinzufügen. 19 00:01:39,619 --> 00:01:46,890 Wenn Sie das Formular in der onSubmit-Methode hier zurücksetzen, 20 00:01:46,890 --> 00:01:52,910 können Sie auch das Formular auf seinen Anfangswert zurücksetzen, wie wir 21 00:01:52,910 --> 00:01:57,630 in der Methode angegeben haben, in der wir das Formular erstellt haben. 22 00:01:57,630 --> 00:02:05,100 Innerhalb des Reset-Werts nimmt es hier ein Objekt als Parameter. 23 00:02:05,100 --> 00:02:10,479 Dieses Objekt wird von der Reset-Methode verwendet, indem wir die 24 00:02:10,479 --> 00:02:17,447 Methode des Sollwerts verwenden, die wir zuvor in der Vorlesung gesehen haben, um 25 00:02:17,447 --> 00:02:24,192 das Formular auf die Bedingung zurückzusetzen, wie es war, wenn es ursprünglich erstellt wurde. 26 00:02:24,192 --> 00:02:28,467 Also, hier können wir 27 00:02:28,467 --> 00:02:35,442 Parameter wie Vorname: '', 28 00:02:35,442 --> 00:02:41,745 Nachname: '', telnum: 0, 29 00:02:43,660 --> 00:02:47,219 Dann email: '', 30 00:02:49,160 --> 00:02:53,690 zustimmen: false, 31 00:02:53,690 --> 00:03:01,132 Kontakttyp: 'None', 32 00:03:01,132 --> 00:03:07,940 Nachricht: ''});. 33 00:03:07,940 --> 00:03:11,206 Diese Werte, die wir in diesem 34 00:03:14,042 --> 00:03:19,081 JavaScript-Objekt angegeben haben, die wir uns den Parameter für die 35 00:03:19,081 --> 00:03:23,514 Reset-Methode geben, werden genau die gleichen Werte haben, wie wir für 36 00:03:23,514 --> 00:03:28,168 diese Eigenschaften gesehen haben, als wir dieses Feedback-Formular erstellt haben. 37 00:03:28,168 --> 00:03:32,325 Wir müssen das Formular auch vollständig in der Vorlage zurücksetzen. 38 00:03:32,325 --> 00:03:36,532 Um das zu tun, gehen Sie zurück zum Import hier oben, und 39 00:03:36,532 --> 00:03:43,130 dann importieren wir auch das ViewChild} von '@angular /core';. 40 00:03:43,130 --> 00:03:45,950 Dies ermöglicht es uns, Zugriff auf 41 00:03:45,950 --> 00:03:49,910 jedes der untergeordneten dom-Elemente in meiner Vorlage zu erhalten. 42 00:03:49,910 --> 00:03:54,054 Nachdem ich dies getan habe, in den Code gekommen bin, 43 00:03:54,054 --> 00:03:59,321 hier in der ContactComponent, kann ich @ViewChild sagen, 44 00:03:59,321 --> 00:04:04,250 und dann werde ich in der Lage sein, auf das FeedbackForm zu verweisen, indem ich 45 00:04:04,250 --> 00:04:09,088 ihm eine Template-Variable mit dem Namen fform gebe. 46 00:04:09,088 --> 00:04:14,698 Sie werden das im nächsten Schritt tun, und dann 47 00:04:14,698 --> 00:04:19,770 werde ich dazu mit FeedbackFormDirective darauf verweisen. 48 00:04:21,890 --> 00:04:27,030 Dies ermöglicht es uns, Zugriff auf das Vorlagenformular zu erhalten und 49 00:04:27,030 --> 00:04:34,200 es dann vollständig zurückzusetzen, so dass das Formular selbst auf seinen ursprünglichen Wert zurückgesetzt wird. 50 00:04:34,200 --> 00:04:38,710 Dies ist also ein weiterer zusätzlicher Schritt, den wir tun müssen, um sicherzustellen, dass das Formular 51 00:04:38,710 --> 00:04:43,470 hier vollständig auf seinen Anfangswert zurückgesetzt wird. 52 00:04:43,470 --> 00:04:50,268 Nachdem wir das in der onSubject-Methode getan haben, nachdem wir das 53 00:04:53,241 --> 00:04:58,669 FeedbackForm-Objekt selbst hier zurückgesetzt haben, müssen wir auch 54 00:04:58,669 --> 00:05:06,242 dies.FeedbackFormDirective.resetForm () hinzufügen; 55 00:05:08,355 --> 00:05:10,060 Dort. 56 00:05:10,060 --> 00:05:15,045 Dadurch wird sichergestellt, dass mein FeedbackForm an 57 00:05:15,045 --> 00:05:18,400 dieser Stelle vollständig auf seinen ursprünglichen Wert zurückgesetzt wird. 58 00:05:18,400 --> 00:05:23,273 Nach diesen Änderungen gehen wir nun zu unserer 59 00:05:23,273 --> 00:05:29,050 Vorlagendatei, um zu zeigen, wie wir diese 60 00:05:29,050 --> 00:05:33,630 Fehler in unsere Vorlage für unser Formular dort widerspiegeln können. 61 00:05:33,630 --> 00:05:35,730 Also, wechseln Sie zur Vorlagendatei. 62 00:05:35,730 --> 00:05:39,490 Also zuerst, wir werden hier auf die Schaltfläche gehen, und 63 00:05:39,490 --> 00:05:44,705 dann werden wir die Schaltfläche Deaktiviert machen. 64 00:05:46,924 --> 00:05:56,470 Wenn das „FeedbackForm ungültig ist“. 65 00:05:56,470 --> 00:06:01,280 Die Schaltfläche wird also nur dann aktiviert, wenn das FeedbackFormular gültig ist. 66 00:06:01,280 --> 00:06:06,403 Wenn ich zu diesem Formular gehe, kann ich 67 00:06:06,403 --> 00:06:15,674 das 00:08:22,187 Gehen Sie zu unserem Formular im Browser, lassen Sie mich den Vornamen eingeben, 86 00:08:22,187 --> 00:08:28,240 und Sie sehen, dass, selbst wenn ich den Wert lösche, immer noch grün bleibt, 87 00:08:28,240 --> 00:08:31,501 weil wir die berührt dort. 88 00:08:31,501 --> 00:08:36,522 Aber in dem Moment, in dem ich mich davon wegziehe, 89 00:08:36,522 --> 00:08:42,586 werden Sie in der Lage sein zu sehen, dass das eine rote Farbe wird. 90 00:08:42,586 --> 00:08:47,659 So ähnlich für den Nachnamen werden Sie sehen, dass, wenn ich 91 00:08:47,659 --> 00:08:54,020 den Nachname-Wert entferne, dann wird das dort ähnlich angezeigt. 92 00:08:54,020 --> 00:08:57,710 Lassen Sie mich den Vornamen und den Nachnamen eingeben, und für die E-Mail auch. 93 00:08:59,736 --> 00:09:07,411 Die, Gleiche Fall für die Telefonnummer auch. 94 00:09:07,411 --> 00:09:12,287 So können Sie Formularvalidierung in unserer Anwendung durchführen. 95 00:09:12,287 --> 00:09:16,943 Damit füllen wir diese Übung aus, in der wir 96 00:09:16,943 --> 00:09:21,285 unser reaktives Formular in Form Validierung hinzugefügt haben. 97 00:09:21,285 --> 00:09:26,493 Dies ist ein guter Zeitpunkt für Sie, ein Git-Commit mit der Nachricht zu machen, 98 00:09:26,493 --> 00:09:28,750 reaktive bildet Teil zwei. 99 00:09:28,750 --> 00:09:34,925 ( MUSIK)