1 00:00:03,170 --> 00:00:05,820 Nun, da wir in der 2 00:00:05,820 --> 00:00:11,165 vorherigen Vorlesung über vorlagengesteuerte Formularvalidierung in Angular 3 00:00:11,165 --> 00:00:14,625 gelernt haben, lassen Sie uns das Gelernte auf 4 00:00:14,625 --> 00:00:18,330 das Anmeldeformular anwenden, das wir in der vorherigen Übung entworfen haben. 5 00:00:18,330 --> 00:00:21,395 Wir werden eine einfache Formularvalidierung für das Anmeldeformular durchführen. 6 00:00:21,395 --> 00:00:26,160 Insbesondere geben wir den Benutzernamen und das Kennwort 7 00:00:26,160 --> 00:00:32,430 nach Bedarf an und prüfen dann, ob der Benutzer Informationen in diese Felder eingibt 8 00:00:32,430 --> 00:00:37,125 und Fehlermeldungen anzeigen kann, wenn die Felder leer sind. 9 00:00:37,125 --> 00:00:46,180 Lassen Sie uns mit dieser Änderung an der Anwendung in dieser Übung fortfahren. 10 00:00:46,180 --> 00:00:49,215 Um mit dieser Übung zu beginnen, 11 00:00:49,215 --> 00:00:53,600 gehen wir hier zum Anmeldeformular, 12 00:00:53,600 --> 00:00:57,090 das wir in der Login-Komponenten-Vorlage hier haben. 13 00:00:57,090 --> 00:01:02,400 Wir haben bereits das novalidate-Attribut zum Anmeldeformular hinzugefügt. 14 00:01:02,400 --> 00:01:10,780 Also, lassen Sie uns in der Template-Variable namens LogInform zu dieser Vorlage hinzufügen, 15 00:01:10,780 --> 00:01:18,835 und dann setzen Sie dies auf ngForm, wie wir aus der vorherigen Vorlesung hier verstanden. 16 00:01:18,835 --> 00:01:20,170 Also, indem wir dies tun, 17 00:01:20,170 --> 00:01:26,500 spezifizieren wir, dass diese Template-Variable es uns ermöglicht, den Zustand des Formulars zu verfolgen. 18 00:01:26,500 --> 00:01:31,330 So können wir sogar auf den gültigen oder ungültigen Zustand für dieses Formular überprüfen. 19 00:01:31,330 --> 00:01:34,485 Jetzt 20 00:01:34,485 --> 00:01:43,620 werden wir zusätzlich für jede dieser Eingaben auch die entsprechenden Template-Variablen hier hinzufügen. 21 00:01:43,620 --> 00:01:45,220 Also, lassen Sie mich zur nächsten Zeile hier gehen, 22 00:01:45,220 --> 00:01:52,670 und dort werde ich sagen, Benutzername ist ngModel. 23 00:01:52,670 --> 00:01:58,360 Dann geben wir dies auch hier wie erforderlich an. 24 00:01:58,360 --> 00:02:00,660 In ähnlicher Weise 25 00:02:00,660 --> 00:02:09,545 werden wir für das Passwort die entsprechende Template-Variable hier hinzufügen, da das Passwort in ngModel ist, 26 00:02:09,545 --> 00:02:15,700 und geben Sie dies dann wie hier erforderlich an. 27 00:02:15,700 --> 00:02:19,700 Nun, da wir die Template-Variablen angegeben haben, 28 00:02:19,700 --> 00:02:23,870 können wir dann einige der Formular-Validierungsprüfungen hier durchführen. 29 00:02:23,870 --> 00:02:26,490 Nun, da wir dies bei Bedarf angeben, 30 00:02:26,490 --> 00:02:28,280 bedeutet das, dass, wenn diese 31 00:02:28,280 --> 00:02:30,455 Felder die 32 00:02:30,455 --> 00:02:34,525 Eingabefelder leer sind, der erforderliche Fehler dafür gekennzeichnet wird. 33 00:02:34,525 --> 00:02:40,105 In ähnlicher Weise 34 00:02:40,105 --> 00:02:47,380 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. 35 00:02:47,380 --> 00:02:49,255 Also, für die Schaltfläche Senden, 36 00:02:49,255 --> 00:02:53,270 was wir hier tun, ist 37 00:02:53,270 --> 00:03:01,080 das deaktivierte Feld hier zu verwenden, 38 00:03:01,080 --> 00:03:03,500 und dann werden wir das deaktivierte Feld 39 00:03:03,500 --> 00:03:12,270 auf LogInform.Form.Invalid setzen. 40 00:03:12,270 --> 00:03:14,030 Also, indem wir dies tun, 41 00:03:14,030 --> 00:03:18,030 werden wir diese Schaltfläche deaktivieren, wenn das Formular ungültig ist. 42 00:03:18,030 --> 00:03:23,925 Somit kann der Benutzer das Formular nicht einmal absenden, wenn das Formular ungültige Eingabe enthält. 43 00:03:23,925 --> 00:03:27,355 Wenn beispielsweise der Benutzername leer ist oder das Kennwort leer ist, ist 44 00:03:27,355 --> 00:03:29,520 das Anmeldeformular ungültig, 45 00:03:29,520 --> 00:03:32,290 und daher kann der Benutzer dieses Formular nicht senden. 46 00:03:32,290 --> 00:03:36,950 Nun, dies ist ein Teil der Formularvalidierung, die wir tun können, 47 00:03:36,950 --> 00:03:40,385 wodurch wir verhindern können, dass das Formular gesendet wird. 48 00:03:40,385 --> 00:03:43,285 Darüber hinaus 49 00:03:43,285 --> 00:03:47,945 können wir für jedes dieser Felder sogar eine Fehlermeldung anzeigen, um 50 00:03:47,945 --> 00:03:53,875 anzuzeigen, welche Art von Fehler in diesem speziellen Feld auftritt. Um 51 00:03:53,875 --> 00:03:58,230 dies zu tun, 52 00:03:58,230 --> 00:04:07,650 werden wir zu jedem dieser Formularfeldelemente das mat-error-Tag dort hinzufügen, 53 00:04:07,650 --> 00:04:12,270 und dann sagen wir stop nGIF, 54 00:04:12,270 --> 00:04:18,345 und wir sagen username.errors. 55 00:04:18,345 --> 00:04:23,920 Beachten Sie also, dass wir dieser Vorlage bereits eine Variable namens username gegeben haben, 56 00:04:23,920 --> 00:04:28,665 so dass wir in username.errors verwenden können, wenn es Fehler gibt und 57 00:04:28,665 --> 00:04:34,930 wenn dieser Fehlertyp erforderlich ist. 58 00:04:34,930 --> 00:04:41,810 Also, wenn der Fehler eine erforderliche Art von Fehler ist, die dort verursacht wird, 59 00:04:41,810 --> 00:04:44,060 dann 60 00:04:44,060 --> 00:04:54,140 können wir an diesem Punkt angeben, dass der entsprechende Fehler angezeigt werden Benutzername erforderlich ist. 61 00:04:54,140 --> 00:04:59,305 Das ist also der Fehler, der hier für dieses Feld angezeigt wird. 62 00:04:59,305 --> 00:05:03,810 In ähnlicher Weise lassen Sie mich die gleiche Art von Sache für das Passwortfeld hier hinzufügen. 63 00:05:03,810 --> 00:05:06,610 Also, lassen Sie mich das kopieren und dann fügen Sie es hier ein, 64 00:05:06,610 --> 00:05:09,110 und dann sagen wir password.errors. 65 00:05:09,110 --> 00:05:17,395 Dann wird die Nachricht Passwort erforderlich sein. 66 00:05:17,395 --> 00:05:19,070 Indem wir dies hinzufügen, 67 00:05:19,070 --> 00:05:22,535 werden wir Fehlermeldungen unten unter 68 00:05:22,535 --> 00:05:27,665 diesen Feldern anzeigen, wenn das Feld keine Informationen enthält. 69 00:05:27,665 --> 00:05:29,950 Geringfügige Korrektur hier. 70 00:05:29,950 --> 00:05:34,820 Das sollte Benutzername sein? errors.hier erforderlich, 71 00:05:34,820 --> 00:05:38,470 und in ähnlicher Weise sollte dieser auch hier erforderlich.required sein. 72 00:05:38,470 --> 00:05:40,375 Mit diesen Änderungen 73 00:05:40,375 --> 00:05:43,280 ist meine Login-Komponente nun bereit, 74 00:05:43,280 --> 00:05:47,275 die Formularvalidierung durchzuführen und dann Fehlermeldungen anzuzeigen. 75 00:05:47,275 --> 00:05:52,505 Also, lassen Sie uns die Änderungen speichern und dann gehen und werfen Sie einen Blick auf die aktualisierte Anwendung. 76 00:05:52,505 --> 00:05:55,705 Gehen wir zu unserer Anwendung im Browser, 77 00:05:55,705 --> 00:05:58,475 lassen Sie uns das Anmeldeformular hier öffnen. 78 00:05:58,475 --> 00:06:01,720 So können Sie sehen, dass jetzt sowohl der Benutzername als auch das Passwort 79 00:06:01,720 --> 00:06:05,355 einen Stern tragen, um anzuzeigen, dass beide erforderlich sind. 80 00:06:05,355 --> 00:06:07,550 Also, lassen Sie mich eintippen. 81 00:06:09,870 --> 00:06:16,130 Hier sehen Sie also, dass das Formular gültig ist, weil es Informationen enthält, 82 00:06:16,130 --> 00:06:20,375 und so wird die Login-Schaltfläche aktiviert. 83 00:06:20,375 --> 00:06:24,840 Lassen Sie mich die Informationen aus dem Passwortfeld entfernen, 84 00:06:24,840 --> 00:06:27,950 und dann bemerken Sie sofort, dass 85 00:06:27,950 --> 00:06:32,405 der Fehler hier angezeigt wird, dass Passwort erforderlich ist. 86 00:06:32,405 --> 00:06:37,040 Beachten Sie auch, dass die Login-Schaltfläche nicht mehr aktiviert ist. 87 00:06:37,040 --> 00:06:40,760 Es wird deaktiviert sein. So können Sie das Formular hier nicht absenden. 88 00:06:40,760 --> 00:06:43,960 Aber in dem Moment, in dem ich etwas in das Passwort ausfülle, 89 00:06:43,960 --> 00:06:47,060 wird die Login-Schaltfläche aktiviert, 90 00:06:47,060 --> 00:06:49,670 und wir können das Formular hier absenden. 91 00:06:49,670 --> 00:06:51,390 Ähnlich für den Benutzernamen. 92 00:06:51,390 --> 00:06:55,045 Wenn ich dort die Benutzernameninformationen entferne, 93 00:06:55,045 --> 00:06:58,115 wird der Fehler hier angezeigt, 94 00:06:58,115 --> 00:07:04,670 und Sie werden auch sehen, dass die Login-Schaltfläche an dieser Stelle nicht aktiviert ist. 95 00:07:04,670 --> 00:07:10,270 So kann in diesem Fall die Formularvalidierung durchgeführt werden. 96 00:07:10,270 --> 00:07:15,960 Wie Sie gesehen haben, 97 00:07:15,960 --> 00:07:18,515 können wir durch Hinzufügen einer einfachen Formularvalidierung zu unserer Anwendung überprüfen, um sicherzustellen, dass 98 00:07:18,515 --> 00:07:22,925 die Felder die Informationen enthalten, die sie enthalten sollen, 99 00:07:22,925 --> 00:07:24,725 und im richtigen Format. 100 00:07:24,725 --> 00:07:30,290 Wir werden ein wenig mehr von der Formularvalidierung in einer der späteren Übungen untersuchen, 101 00:07:30,290 --> 00:07:33,020 vor allem für reaktive Formen. 102 00:07:33,020 --> 00:07:35,945 Damit schließen wir diese Übung ab. 103 00:07:35,945 --> 00:07:38,840 Dies ist ein guter Zeitpunkt für Sie, ein 104 00:07:38,840 --> 00:07:43,080 Git-Commit mit den Nachrichtenvorlagengesteuerten Formularen zu machen, Teil zwei.