1 00:00:03,890 --> 00:00:09,395 Wir haben gerade über Angular-Unterstützung für Formulare 2 00:00:09,395 --> 00:00:12,125 und insbesondere die vorlagengesteuerte Form erfahren. 3 00:00:12,125 --> 00:00:17,520 In dieser Übung erstellen wir ein vorlagengesteuertes Formular und fügen dieses dann 4 00:00:17,520 --> 00:00:23,375 in unseren Login-Komponentendialog ein, den wir in der vorherigen Übung erstellt haben. 5 00:00:23,375 --> 00:00:29,580 In dieser Vorlesung 6 00:00:29,580 --> 00:00:34,850 ermöglicht das vorlagengesteuerte Formular, dass der Benutzer seinen Benutzernamen und sein Passwort in das Anmeldeformular eingeben 7 00:00:34,850 --> 00:00:37,700 und diese Informationen dann an unsere Bewerbung senden kann. 8 00:00:37,700 --> 00:00:41,825 Nun, wie diese Informationen von der Serverseite verarbeitet werden, 9 00:00:41,825 --> 00:00:44,990 das bleibt einem späteren Kurs überlassen. 10 00:00:44,990 --> 00:00:49,310 Aber im Moment haben wir eine Möglichkeit, den Benutzernamen und das Passwort zu erfassen, der 11 00:00:49,310 --> 00:00:54,285 vom Benutzer über das Anmeldevorlagengesteuerte Formular übermittelt 12 00:00:54,285 --> 00:00:58,210 wird, das wir in dieser Übung entwerfen werden. 13 00:00:58,210 --> 00:01:01,115 Der 14 00:01:01,115 --> 00:01:05,030 erste Schritt, um die Verwendung 15 00:01:05,030 --> 00:01:08,890 von vorlagengesteuerten Formularen nutzen zu können, besteht darin, zur 16 00:01:08,890 --> 00:01:17,140 Datei app module.ts zu gehen und dann ein paar unterstützende Module für unsere Anwendung zu importieren. 17 00:01:17,140 --> 00:01:20,764 Also, das erste, was ich importieren werde, ist 18 00:01:20,764 --> 00:01:33,155 das MatFormFieldModule aus Angular 19 00:01:33,155 --> 00:01:38,085 Materialformularfeld. 20 00:01:38,085 --> 00:01:44,600 Dies ermöglicht es uns, dort eine Reihe von Elementen in einem Formularfeld zu gruppieren. 21 00:01:44,600 --> 00:01:52,190 Dann werden wir auch das MatInputModule importieren. 22 00:01:52,190 --> 00:01:58,100 Das Eingabemodul unterstützt die Eingabekomponente, die 23 00:01:58,100 --> 00:02:03,650 eine stilisierte Angular Material-Komponente ist 24 00:02:03,650 --> 00:02:09,690 , die das Eingabe-Formularfeld aus HTML-Formularen hier unterstützt. 25 00:02:09,690 --> 00:02:15,520 Lassen Sie mich dann auch eine MatCheckBox importieren, 26 00:02:18,680 --> 00:02:29,895 das entsprechende Modul aus Angular Material Checkbox. 27 00:02:29,895 --> 00:02:32,690 Diese drei unterstützen also 28 00:02:32,690 --> 00:02:36,410 drei Formularelemente, die wir verwenden werden, wenn wir unsere Anwendung erstellen. 29 00:02:36,410 --> 00:02:42,420 Das Formularfeld-Modul ermöglicht es uns, dort eine Reihe von Formularelementen zu gruppieren. 30 00:02:42,420 --> 00:02:46,240 Das Eingabemodul ermöglicht es uns, dort ein Eingabefeld zu erstellen. 31 00:02:46,240 --> 00:02:48,460 Das Checkbox-Modul 32 00:02:48,460 --> 00:02:50,570 ermöglicht uns, wie Sie es erwarten würden, eine Checkbox zu erstellen. 33 00:02:50,570 --> 00:02:53,670 Darüber hinaus muss ich auch 34 00:02:53,670 --> 00:03:06,190 das FormsModule aus Angular-Formularen importieren. 35 00:03:06,190 --> 00:03:10,130 Das FormsModule ist derjenige, der Formulare in Angular unterstützt. 36 00:03:10,130 --> 00:03:12,445 Dies ist derjenige, der vorlagengesteuerte Formulare unterstützt. 37 00:03:12,445 --> 00:03:15,280 Also, jetzt, da wir diese importiert haben, 38 00:03:15,280 --> 00:03:23,775 ist der nächste Schritt, in den NGModule Dekorator zu gehen und dann diese hier an Ort und Stelle zu ziehen. 39 00:03:23,775 --> 00:03:30,560 Also, wir gehen hier rein und geben dann das FormsModule ein. 40 00:03:30,660 --> 00:03:38,200 Lassen Sie mich das FormFieldModule, 41 00:03:38,200 --> 00:03:45,075 das InputModule, das CheckboxModule hier eingeben. 42 00:03:45,075 --> 00:03:49,325 Dann, jetzt ist mein App-Modul 43 00:03:49,325 --> 00:03:55,125 bereit, die Verwendung von vorlagengesteuerten Formularen in unserer Anwendung zu unterstützen. 44 00:03:55,125 --> 00:03:57,485 Nun, da wir dies abgeschlossen haben, 45 00:03:57,485 --> 00:03:59,530 gehen wir zur Login-Komponente. 46 00:03:59,530 --> 00:04:02,320 Ein Großteil unserer Arbeit ist in der Login-Komponente. 47 00:04:02,320 --> 00:04:04,090 Lassen Sie mich zuerst das Formular entwerfen. 48 00:04:04,090 --> 00:04:07,975 Also, in die Login-Komponenten-Vorlagendatei gehen, 49 00:04:07,975 --> 00:04:14,345 lassen Sie mich in der Vorlage für unser Formular hinzufügen, um das Formular hier zu erstellen. 50 00:04:14,345 --> 00:04:16,190 Also, oben, 51 00:04:16,190 --> 00:04:25,940 werde ich ein p erstellen, 52 00:04:25,940 --> 00:04:30,715 das die Informationen anzeigt, die ich in das Formular eingegeben habe. 53 00:04:30,715 --> 00:04:36,750 Im Code haben wir eine JavaScript-Variable namens user, 54 00:04:36,750 --> 00:04:41,175 die an die Felder in diesem Formular gebunden wird. 55 00:04:41,175 --> 00:04:42,500 Jetzt, wenn wir das schaffen, 56 00:04:42,500 --> 00:04:43,690 dann wird klarer. 57 00:04:43,690 --> 00:04:45,490 Nun, hier, 58 00:04:45,490 --> 00:04:50,100 indem ich dies einschließe, ist es, die Änderungen zu zeigen. 59 00:04:50,100 --> 00:04:56,390 Wenn wir Informationen in das Formular eingeben, 60 00:04:56,390 --> 00:05:00,880 können die entsprechenden Änderungen, die im Code passieren, um den Formularzustand widerzuspiegeln, direkt dort angezeigt werden. 61 00:05:00,880 --> 00:05:04,500 Nun, außerdem werde ich jetzt das Formular hier erstellen. 62 00:05:04,500 --> 00:05:07,210 Also, wir gehen hinein und fügen dann das Formularelement hier hinzu. 63 00:05:07,210 --> 00:05:09,470 Auf dieses Formularelement 64 00:05:09,470 --> 00:05:11,000 werde ich 65 00:05:11,000 --> 00:05:15,260 das novalidate-Attribut hier anwenden, weil 66 00:05:15,260 --> 00:05:19,625 wir möchten, dass die Formularvalidierung von Angular und nicht 67 00:05:19,625 --> 00:05:28,820 von der Standard-HTML-Formularvalidierung, die der 68 00:05:28,820 --> 00:05:30,230 Browser unterstützt, gepflegt wird. 69 00:05:30,230 --> 00:05:38,810 Also werden wir diese Verantwortung in unsere Angular-Anwendung selbst übertragen. 70 00:05:38,810 --> 00:05:44,800 Deshalb gebe ich das novalidate-Attribut für mein Telefon an. 71 00:05:44,800 --> 00:05:47,310 Also, das schafft meine Form hier. 72 00:05:47,310 --> 00:05:53,720 Hier drinnen werde ich den mat-dialog-content verwenden. 73 00:05:53,790 --> 00:05:58,360 Nun ist der mat-dialog-Inhalt, wie Sie es erwarten würden, 74 00:05:58,360 --> 00:06:03,740 ein Bereich, der den Inhalt des Dialogs selbst enthält. 75 00:06:03,740 --> 00:06:06,970 Deshalb haben wir diesen mat-dialog-Inhalt hier reingesteckt. 76 00:06:06,970 --> 00:06:14,265 Dann, hier drin, werde ich mein Formular hier erstellen. 77 00:06:14,265 --> 00:06:16,675 Also, ich habe ein P dorthin gelegt. 78 00:06:16,675 --> 00:06:23,915 In diesem p werde ich hier ein Mat-Form-Feld verwenden. 79 00:06:23,915 --> 00:06:28,805 Das Mat-Form-Feld ermöglicht es mir, eine Reihe 80 00:06:28,805 --> 00:06:33,845 von formularbezogenen Elementen zusammenzufassen, die ich zusammen verwende. 81 00:06:33,845 --> 00:06:39,765 Also, hier drin, werde ich die Eingabe hier eintragen. 82 00:06:39,765 --> 00:06:44,505 Also, das Eingabe-Formularfeld aus HTML-Dateiformularen. 83 00:06:44,505 --> 00:06:50,255 Dann werde ich das matInput-Attribut anwenden, mit 84 00:06:50,255 --> 00:06:57,360 dem wir das Materialdesign-Styling für diese Eingabe anwenden können. 85 00:06:57,360 --> 00:07:04,635 Dann werden wir einen Platzhalter für diesen als Benutzername geben, 86 00:07:04,635 --> 00:07:06,569 und wie Sie es erwarten würden, 87 00:07:06,569 --> 00:07:12,220 und der Typ wird hier Texttyp sein. 88 00:07:15,140 --> 00:07:19,830 Lassen Sie mich das NGModel hinzufügen. 89 00:07:19,830 --> 00:07:30,000 So wird ein vorlagengesteuertes Formular durch das ngModel Attribut hier unterstützt. 90 00:07:30,000 --> 00:07:31,520 Also, mit dem NGModel. 91 00:07:31,520 --> 00:07:36,130 Sie können also die Bananeneingangsart sehen, dies zu deklarieren. 92 00:07:36,130 --> 00:07:40,270 Dann sagen wir user.username. 93 00:07:40,270 --> 00:07:48,345 Dieser Benutzer wird also ein JavaScript-Objekt in meiner TypeScript-Datei sein, 94 00:07:48,345 --> 00:07:52,440 das dort eine Benutzernameneigenschaft enthält, 95 00:07:52,440 --> 00:07:58,540 die den Wert verfolgt, den Sie in dieses Eingabefeld in meiner Form eingeben. 96 00:07:58,540 --> 00:08:06,320 Deshalb binden wir diese Eingabefeld-Informationen in dieses JavaScript-Objekt. 97 00:08:06,320 --> 00:08:08,890 Dies ist also die bidirektionale Datenbindung, die wir 98 00:08:08,890 --> 00:08:13,250 zwischen dem Formularelement und dem entsprechenden JavaScript-Code durchführen. 99 00:08:13,250 --> 00:08:19,640 Dann geben wir diesem hier einen Namen als Benutzername. 100 00:08:19,640 --> 00:08:24,495 Also, das ist meine ersten Formularfelder, die ich hier hinzugefügt habe. 101 00:08:24,495 --> 00:08:29,330 Nun werde ich in ähnlicher Weise das zweite Formularfeld für das Passwort hinzufügen. 102 00:08:29,330 --> 00:08:36,255 Also, dafür, lassen Sie mich das einfach kopieren und dann hier unten einfügen. 103 00:08:36,255 --> 00:08:41,820 Also, das zweite Feld wäre Input, MatInput, 104 00:08:41,820 --> 00:08:47,760 Platzhalter ist Passwort, 105 00:08:47,760 --> 00:08:52,360 und dann ist der Typ Passwort. 106 00:08:52,360 --> 00:09:01,385 Also, das Passwort-Eingabe-Element von HTML5-Formular Unterstützung. 107 00:09:01,385 --> 00:09:11,050 Das ngModel selbst wird in das Benutzerkennwort gebunden und der Name wäre Passwort. 108 00:09:11,050 --> 00:09:16,335 Sie sehen also, dass das JavaScript-Objekt des Benutzers jetzt zwei Eigenschaften enthält, 109 00:09:16,335 --> 00:09:20,700 Benutzername und Kennwort, die die Anmeldeinformationen des Benutzers hier verfolgen. 110 00:09:20,700 --> 00:09:24,995 Also, diese beiden Formularfelder innerhalb dieses p hier, 111 00:09:24,995 --> 00:09:27,740 und dann werden wir auch in einem 112 00:09:27,740 --> 00:09:35,795 weiteren als mat-Checkbox genannt hinzufügen. 113 00:09:35,795 --> 00:09:41,050 Sie haben gesehen, dass wir das Checkbox-Modul früher eingeschlossen hatten. 114 00:09:41,050 --> 00:09:43,290 Also, wir werden in diesem hinzufügen. 115 00:09:43,290 --> 00:09:48,735 Nun, dieses Kontrollkästchen, das, wenn es angekreuzt wird, informiert 116 00:09:48,735 --> 00:09:55,990 meine Angular-Anwendung, dass der Benutzername und das Passwort in der Anwendung gespeichert werden sollen. 117 00:09:55,990 --> 00:10:01,220 Lassen Sie mich dies also mit dem NG-Modell an 118 00:10:01,220 --> 00:10:09,730 eine entsprechende Eigenschaft namens remember im Benutzerobjekt binden. 119 00:10:09,730 --> 00:10:11,060 Dies wird also sein, 120 00:10:11,060 --> 00:10:14,020 diese Eigenschaft wird entweder wahr oder falsch sein, je nachdem, 121 00:10:14,020 --> 00:10:17,315 ob das Kontrollkästchen aktiviert oder deaktiviert ist. 122 00:10:17,315 --> 00:10:19,830 Das ist die Art und Weise, wie wir verfolgen. 123 00:10:19,830 --> 00:10:24,795 Also, wir machen die bidirektionale Datenbindung zwischen diesem Kontrollkästchen und 124 00:10:24,795 --> 00:10:32,330 dieser Eigenschaft namens erinnern Sie sich an das JavaScript-Objekt des Benutzers in meinem Code. 125 00:10:32,330 --> 00:10:36,260 Dann würde der Name erinnern, 126 00:10:36,260 --> 00:10:43,590 und dann geben wir diesem ein Etikett, wie erinnere mich. 127 00:10:43,850 --> 00:10:46,620 Also, wenn der Benutzer dies überprüft, 128 00:10:46,620 --> 00:10:50,200 dann werden die Informationen des Benutzers hier in Erinnerung bleiben. 129 00:10:50,200 --> 00:10:52,410 Also, das ist die mat-Checkbox, die wir hinzugefügt haben. 130 00:10:52,410 --> 00:10:54,270 Also, wir haben drei Felder hier, 131 00:10:54,270 --> 00:10:56,585 den Benutzernamen, das Passwort, 132 00:10:56,585 --> 00:11:02,880 und dann ein Kontrollkästchen hier in meiner Form hier. 133 00:11:02,880 --> 00:11:06,090 Also, das ist ein Mat-Dialog Inhalt hier. 134 00:11:06,090 --> 00:11:08,800 Nun 135 00:11:08,800 --> 00:11:14,985 kann ich hier neben dem Mat-Dialog auch Mat-Dialoge-Aktionen hinzufügen. 136 00:11:14,985 --> 00:11:23,820 Nun können die Dialogaktionen die Schaltflächen enthalten, die diesem Dialog entsprechen. 137 00:11:23,820 --> 00:11:28,145 Also, das wird als Aktionstasten im Dialog fungieren, 138 00:11:28,145 --> 00:11:32,210 und auch da sie innerhalb des Formulars eingeschlossen sind, 139 00:11:32,210 --> 00:11:36,485 fungieren diese Schaltflächen auch als Formulareinreichungsschaltflächen für mich. 140 00:11:36,485 --> 00:11:44,530 Also, hier, lassen Sie mich eine Span-Klasse Flex-Abstandshalter machen, 141 00:11:46,580 --> 00:11:52,670 und dann lassen Sie mich eine Schaltfläche hinzufügen, 142 00:11:55,950 --> 00:12:02,140 mat-button, und dann diese Schaltfläche, 143 00:12:02,140 --> 00:12:07,090 werde ich das auch in einen mat-Dialog schließen Button verwandeln. 144 00:12:07,090 --> 00:12:12,115 Also, dies wäre ein Abbrechen-Button, den ich in mein Formular hier einfügen werde, 145 00:12:12,115 --> 00:12:14,925 dann wird dies geklickt, der Dialog wird verworfen, 146 00:12:14,925 --> 00:12:17,960 und im Wesentlichen bedeutet, dass Sie das Formular nicht dort einreichen. 147 00:12:17,960 --> 00:12:20,505 Das fungiert also auch als Abbruch-Button für das Formular 148 00:12:20,505 --> 00:12:23,595 und schließt dann gleichzeitig den Dialog aus. 149 00:12:23,595 --> 00:12:27,180 Also, indem wir dieses Attribut zu dieser Schaltfläche verwenden, 150 00:12:27,180 --> 00:12:31,595 deklarieren wir dies als die Schaltfläche, die den Fehler ablehnt, 151 00:12:31,595 --> 00:12:36,940 genauso wie wir diese Schaltfläche in der Symbolleiste haben. 152 00:12:36,940 --> 00:12:38,990 Also, der mat-Dialog schließt sich dort. 153 00:12:38,990 --> 00:12:42,470 Dann ist eine andere Schaltfläche, die wir haben, 154 00:12:42,470 --> 00:12:49,490 zum Senden, so dass 155 00:12:49,490 --> 00:12:55,030 dieser Button-Typ die Submit-Button innerhalb eines Formulars dort sein würde. 156 00:12:55,030 --> 00:12:56,315 Also, wenn dies angeklickt wird, 157 00:12:56,315 --> 00:13:01,495 löst das die Formulareinreichung für dieses Formular hier aus, 158 00:13:01,495 --> 00:13:06,420 und dann lassen Sie mich in einer Klasse hinzufügen, 159 00:13:06,420 --> 00:13:13,795 werden wir Hintergrundprimär und Text floral sagen. 160 00:13:13,795 --> 00:13:19,345 Diese Klassen habe ich dort bereits in meine Styles.acss-Datei hinzugefügt. 161 00:13:19,345 --> 00:13:24,800 Also, Text floral weiß, 162 00:13:24,800 --> 00:13:31,620 und diese Schaltfläche würde als Login-Button dort beschriftet werden. 163 00:13:31,620 --> 00:13:36,090 Dies wäre also ein blauer Knopf, der dort auf dem Bildschirm angezeigt wird. 164 00:13:36,090 --> 00:13:43,275 Damit wird meine Formularstruktur in der Vorlage dort erstellt. 165 00:13:43,275 --> 00:13:49,355 Nun, der nächste Schritt besteht darin, in den Code zu gehen und dann die Formularübermittlung selbst zu behandeln. 166 00:13:49,355 --> 00:13:54,070 Also, jetzt gehen, um component.ts Datei anmelden, 167 00:13:54,070 --> 00:13:57,400 müssen wir die Formulareinreichung hier behandeln. 168 00:13:57,400 --> 00:14:02,070 Nun, der erste Schritt, den ich tun werde, ist, wenn diese Login-Komponente erstellt 169 00:14:02,070 --> 00:14:12,110 wird, werden wir hier ein Benutzerobjekt mit dem Eigenschaften-Benutzernamen erstellen, der 170 00:14:12,110 --> 00:14:16,550 eine leere Zeichenfolge wäre, mit dem zu beginnen, 171 00:14:16,610 --> 00:14:22,570 Passwort, das auch eine leere Zeichenfolge sein wird, 172 00:14:22,570 --> 00:14:27,050 und dann merken Sie sich, was falsch ist. 173 00:14:27,050 --> 00:14:29,640 Indem wir dies hier erklären, 174 00:14:29,640 --> 00:14:33,530 sagen wir auch, dass wir jetzt 175 00:14:33,530 --> 00:14:40,210 diese drei Eigenschaften an die drei Formularelemente in meiner Vorlage binden können. 176 00:14:40,210 --> 00:14:43,920 Also, das ist es, was wir hier erreicht haben. 177 00:14:43,920 --> 00:14:46,440 Lassen Sie 178 00:14:46,440 --> 00:14:55,640 mich für den Konstruktor den Dialog ref hier injizieren, 179 00:14:55,880 --> 00:15:05,410 mat-dialog ref, und dieser Matte Dialog ref wird die entsprechende Komponente nehmen. 180 00:15:05,410 --> 00:15:08,755 Dies ist also ein Verweis auf diese Login-Komponente hier. 181 00:15:08,755 --> 00:15:11,990 Also, das sagt uns, wann diese- wenn dies eingereicht wird, 182 00:15:11,990 --> 00:15:14,060 wie man damit umgeht. 183 00:15:14,060 --> 00:15:21,985 Also, hier, lassen Sie mich hier eine On Submit-Funktion hinzufügen, 184 00:15:21,985 --> 00:15:24,155 und innerhalb der On Submit-Funktion 185 00:15:24,155 --> 00:15:27,935 werde ich mich einfach anmelden, 186 00:15:27,935 --> 00:15:32,145 die entsprechenden Benutzerinformationen protokollieren, 187 00:15:32,145 --> 00:15:35,690 also klickt der Benutzer auf das Anmeldeformular, 188 00:15:35,690 --> 00:15:39,430 das Anmeldeformular und sendet das Anmeldeformular. 189 00:15:39,430 --> 00:15:44,585 Ich werde gerade die Informationen des Benutzers auf der Konsole im Moment protokollieren. 190 00:15:44,585 --> 00:15:49,150 Später werden wir im serverseitigen Kurs entwerfen. 191 00:15:49,150 --> 00:15:52,310 Wir werden den eigentlichen Anmeldeprozess erledigen, wenn 192 00:15:52,310 --> 00:15:57,280 unser Server bereit ist und in der Lage ist, die Anmeldung des Benutzers zu bearbeiten. 193 00:15:57,280 --> 00:16:03,710 Also, danach, werden wir sagen, dass dieser Dialog ref close. 194 00:16:03,710 --> 00:16:06,255 Warum schließen wir das hier ein? 195 00:16:06,255 --> 00:16:08,105 Also, wenn das Formular eingereicht wird, 196 00:16:08,105 --> 00:16:13,960 wollen wir auch die Komponente dort entlassen, 197 00:16:13,960 --> 00:16:15,190 die Dialogkomponente dort. 198 00:16:15,190 --> 00:16:16,800 Also, indem wir 199 00:16:16,800 --> 00:16:19,120 diesen Dialog ref close aufrufen, 200 00:16:19,120 --> 00:16:23,620 bitten wir die Dialogkomponente, hier geschlossen zu werden. 201 00:16:23,620 --> 00:16:29,650 Also, das ist der Grund, warum ich hier einen Verweis auf die Login-Komponente bekomme, 202 00:16:29,650 --> 00:16:33,655 die hier als meine Dialogkomponente fungiert. 203 00:16:33,655 --> 00:16:37,445 So werden wir in der Lage sein, die Dialogkomponente zu schließen, indem wir dies tun. 204 00:16:37,445 --> 00:16:39,350 Sobald der Benutzer das Formular übermittelt hat, 205 00:16:39,350 --> 00:16:41,440 protokollieren Sie die Benutzerinformationen 206 00:16:41,440 --> 00:16:46,415 und schließen dann das Dialogfeld. Das war's. 207 00:16:46,415 --> 00:16:51,640 Lassen Sie uns die Änderungen speichern und dann gehen und werfen Sie einen Blick auf die aktualisierte Anwendung. 208 00:16:51,640 --> 00:16:54,590 Gehen Sie in unsere Anwendung im Browser, 209 00:16:54,590 --> 00:17:02,900 lassen Sie mich die JavaScript-Konsole öffnen, damit Sie die Informationen sehen können, die angemeldet sind. 210 00:17:02,900 --> 00:17:09,890 Lassen Sie mich hier den Login-Dialog öffnen, wobei das Formular bereits vorhanden ist, 211 00:17:09,890 --> 00:17:12,425 der Benutzername und das Passwort bereits vorhanden sind. 212 00:17:12,425 --> 00:17:15,820 Also, lassen Sie mich den Namen eines Benutzers eingeben. 213 00:17:15,820 --> 00:17:19,165 Ich bin hier narzisstisch. 214 00:17:19,165 --> 00:17:22,710 Also, ich tippe hier den Benutzernamen und das Passwort ein. 215 00:17:22,710 --> 00:17:26,495 Beachten Sie nun, dass, wenn ich die Informationen hier eingebe, 216 00:17:26,495 --> 00:17:33,570 da ich hier den Wert des JavaScript-Objekts des Benutzers anzeige, 217 00:17:33,570 --> 00:17:42,775 alle Änderungen, die ich mache, sofort auf den Bildschirm hier reflektiert werden. 218 00:17:42,775 --> 00:17:50,110 Auch das Kontrollkästchen erinnern, das hier an- und ausgeschaltet wird. 219 00:17:50,110 --> 00:17:53,360 Wenn ich dann das Formular hier absende, 220 00:17:53,360 --> 00:17:56,040 können Sie sehen, dass in der Konsole 221 00:17:56,040 --> 00:17:59,350 die Benutzerinformationen an der Konsole protokolliert werden, 222 00:17:59,350 --> 00:18:00,595 der Benutzername, das Kennwort 223 00:18:00,595 --> 00:18:03,440 und der Erinnerungswert an die Konsole gesperrt sind. 224 00:18:03,440 --> 00:18:06,170 So können Sie jetzt sehen, dass mein Anmeldeformular, 225 00:18:06,170 --> 00:18:09,275 das Template-gesteuerte Formular korrekt funktioniert. 226 00:18:09,275 --> 00:18:12,305 Damit schließen wir diese Übung ab, 227 00:18:12,305 --> 00:18:18,965 wo wir gesehen haben, wie wir ein Template-getriebenes Formular in unserer Angular-Anwendung entwerfen können. 228 00:18:18,965 --> 00:18:22,870 Dies ist ein guter Zeitpunkt für Sie, ein Git-Commit mit der Nachricht 229 00:18:22,870 --> 00:18:26,000 Template Driven Forms Teil 1 zu machen.