Wir haben gerade über Angular-Unterstützung für Formulare
und insbesondere die vorlagengesteuerte Form erfahren.
In dieser Übung erstellen wir ein vorlagengesteuertes Formular und fügen dieses dann
in unseren Login-Komponentendialog ein, den wir in der vorherigen Übung erstellt haben.
In dieser Vorlesung
ermöglicht das vorlagengesteuerte Formular, dass der Benutzer seinen Benutzernamen und sein Passwort in das Anmeldeformular eingeben
und diese Informationen dann an unsere Bewerbung senden kann.
Nun, wie diese Informationen von der Serverseite verarbeitet werden,
das bleibt einem späteren Kurs überlassen.
Aber im Moment haben wir eine Möglichkeit, den Benutzernamen und das Passwort zu erfassen, der
vom Benutzer über das Anmeldevorlagengesteuerte Formular übermittelt
wird, das wir in dieser Übung entwerfen werden.
Der
erste Schritt, um die Verwendung
von vorlagengesteuerten Formularen nutzen zu können, besteht darin, zur
Datei app module.ts zu gehen und dann ein paar unterstützende Module für unsere Anwendung zu importieren.
Also, das erste, was ich importieren werde, ist
das MatFormFieldModule aus Angular
Materialformularfeld.
Dies ermöglicht es uns, dort eine Reihe von Elementen in einem Formularfeld zu gruppieren.
Dann werden wir auch das MatInputModule importieren.
Das Eingabemodul unterstützt die Eingabekomponente, die
eine stilisierte Angular Material-Komponente ist
, die das Eingabe-Formularfeld aus HTML-Formularen hier unterstützt.
Lassen Sie mich dann auch eine MatCheckBox importieren,
das entsprechende Modul aus Angular Material Checkbox.
Diese drei unterstützen also
drei Formularelemente, die wir verwenden werden, wenn wir unsere Anwendung erstellen.
Das Formularfeld-Modul ermöglicht es uns, dort eine Reihe von Formularelementen zu gruppieren.
Das Eingabemodul ermöglicht es uns, dort ein Eingabefeld zu erstellen.
Das Checkbox-Modul
ermöglicht uns, wie Sie es erwarten würden, eine Checkbox zu erstellen.
Darüber hinaus muss ich auch
das FormsModule aus Angular-Formularen importieren.
Das FormsModule ist derjenige, der Formulare in Angular unterstützt.
Dies ist derjenige, der vorlagengesteuerte Formulare unterstützt.
Also, jetzt, da wir diese importiert haben,
ist der nächste Schritt, in den NGModule Dekorator zu gehen und dann diese hier an Ort und Stelle zu ziehen.
Also, wir gehen hier rein und geben dann das FormsModule ein.
Lassen Sie mich das FormFieldModule,
das InputModule, das CheckboxModule hier eingeben.
Dann, jetzt ist mein App-Modul
bereit, die Verwendung von vorlagengesteuerten Formularen in unserer Anwendung zu unterstützen.
Nun, da wir dies abgeschlossen haben,
gehen wir zur Login-Komponente.
Ein Großteil unserer Arbeit ist in der Login-Komponente.
Lassen Sie mich zuerst das Formular entwerfen.
Also, in die Login-Komponenten-Vorlagendatei gehen,
lassen Sie mich in der Vorlage für unser Formular hinzufügen, um das Formular hier zu erstellen.
Also, oben,
werde ich ein p erstellen,
das die Informationen anzeigt, die ich in das Formular eingegeben habe.
Im Code haben wir eine JavaScript-Variable namens user,
die an die Felder in diesem Formular gebunden wird.
Jetzt, wenn wir das schaffen,
dann wird klarer.
Nun, hier,
indem ich dies einschließe, ist es, die Änderungen zu zeigen.
Wenn wir Informationen in das Formular eingeben,
können die entsprechenden Änderungen, die im Code passieren, um den Formularzustand widerzuspiegeln, direkt dort angezeigt werden.
Nun, außerdem werde ich jetzt das Formular hier erstellen.
Also, wir gehen hinein und fügen dann das Formularelement hier hinzu.
Auf dieses Formularelement
werde ich
das novalidate-Attribut hier anwenden, weil
wir möchten, dass die Formularvalidierung von Angular und nicht
von der Standard-HTML-Formularvalidierung, die der
Browser unterstützt, gepflegt wird.
Also werden wir diese Verantwortung in unsere Angular-Anwendung selbst übertragen.
Deshalb gebe ich das novalidate-Attribut für mein Telefon an.
Also, das schafft meine Form hier.
Hier drinnen werde ich den mat-dialog-content verwenden.
Nun ist der mat-dialog-Inhalt, wie Sie es erwarten würden,
ein Bereich, der den Inhalt des Dialogs selbst enthält.
Deshalb haben wir diesen mat-dialog-Inhalt hier reingesteckt.
Dann, hier drin, werde ich mein Formular hier erstellen.
Also, ich habe ein P dorthin gelegt.
In diesem p werde ich hier ein Mat-Form-Feld verwenden.
Das Mat-Form-Feld ermöglicht es mir, eine Reihe
von formularbezogenen Elementen zusammenzufassen, die ich zusammen verwende.
Also, hier drin, werde ich die Eingabe hier eintragen.
Also, das Eingabe-Formularfeld aus HTML-Dateiformularen.
Dann werde ich das matInput-Attribut anwenden, mit
dem wir das Materialdesign-Styling für diese Eingabe anwenden können.
Dann werden wir einen Platzhalter für diesen als Benutzername geben,
und wie Sie es erwarten würden,
und der Typ wird hier Texttyp sein.
Lassen Sie mich das NGModel hinzufügen.
So wird ein vorlagengesteuertes Formular durch das ngModel Attribut hier unterstützt.
Also, mit dem NGModel.
Sie können also die Bananeneingangsart sehen, dies zu deklarieren.
Dann sagen wir user.username.
Dieser Benutzer wird also ein JavaScript-Objekt in meiner TypeScript-Datei sein,
das dort eine Benutzernameneigenschaft enthält,
die den Wert verfolgt, den Sie in dieses Eingabefeld in meiner Form eingeben.
Deshalb binden wir diese Eingabefeld-Informationen in dieses JavaScript-Objekt.
Dies ist also die bidirektionale Datenbindung, die wir
zwischen dem Formularelement und dem entsprechenden JavaScript-Code durchführen.
Dann geben wir diesem hier einen Namen als Benutzername.
Also, das ist meine ersten Formularfelder, die ich hier hinzugefügt habe.
Nun werde ich in ähnlicher Weise das zweite Formularfeld für das Passwort hinzufügen.
Also, dafür, lassen Sie mich das einfach kopieren und dann hier unten einfügen.
Also, das zweite Feld wäre Input, MatInput,
Platzhalter ist Passwort,
und dann ist der Typ Passwort.
Also, das Passwort-Eingabe-Element von HTML5-Formular Unterstützung.
Das ngModel selbst wird in das Benutzerkennwort gebunden und der Name wäre Passwort.
Sie sehen also, dass das JavaScript-Objekt des Benutzers jetzt zwei Eigenschaften enthält,
Benutzername und Kennwort, die die Anmeldeinformationen des Benutzers hier verfolgen.
Also, diese beiden Formularfelder innerhalb dieses p hier,
und dann werden wir auch in einem
weiteren als mat-Checkbox genannt hinzufügen.
Sie haben gesehen, dass wir das Checkbox-Modul früher eingeschlossen hatten.
Also, wir werden in diesem hinzufügen.
Nun, dieses Kontrollkästchen, das, wenn es angekreuzt wird, informiert
meine Angular-Anwendung, dass der Benutzername und das Passwort in der Anwendung gespeichert werden sollen.
Lassen Sie mich dies also mit dem NG-Modell an
eine entsprechende Eigenschaft namens remember im Benutzerobjekt binden.
Dies wird also sein,
diese Eigenschaft wird entweder wahr oder falsch sein, je nachdem,
ob das Kontrollkästchen aktiviert oder deaktiviert ist.
Das ist die Art und Weise, wie wir verfolgen.
Also, wir machen die bidirektionale Datenbindung zwischen diesem Kontrollkästchen und
dieser Eigenschaft namens erinnern Sie sich an das JavaScript-Objekt des Benutzers in meinem Code.
Dann würde der Name erinnern,
und dann geben wir diesem ein Etikett, wie erinnere mich.
Also, wenn der Benutzer dies überprüft,
dann werden die Informationen des Benutzers hier in Erinnerung bleiben.
Also, das ist die mat-Checkbox, die wir hinzugefügt haben.
Also, wir haben drei Felder hier,
den Benutzernamen, das Passwort,
und dann ein Kontrollkästchen hier in meiner Form hier.
Also, das ist ein Mat-Dialog Inhalt hier.
Nun
kann ich hier neben dem Mat-Dialog auch Mat-Dialoge-Aktionen hinzufügen.
Nun können die Dialogaktionen die Schaltflächen enthalten, die diesem Dialog entsprechen.
Also, das wird als Aktionstasten im Dialog fungieren,
und auch da sie innerhalb des Formulars eingeschlossen sind,
fungieren diese Schaltflächen auch als Formulareinreichungsschaltflächen für mich.
Also, hier, lassen Sie mich eine Span-Klasse Flex-Abstandshalter machen,
und dann lassen Sie mich eine Schaltfläche hinzufügen,
mat-button, und dann diese Schaltfläche,
werde ich das auch in einen mat-Dialog schließen Button verwandeln.
Also, dies wäre ein Abbrechen-Button, den ich in mein Formular hier einfügen werde,
dann wird dies geklickt, der Dialog wird verworfen,
und im Wesentlichen bedeutet, dass Sie das Formular nicht dort einreichen.
Das fungiert also auch als Abbruch-Button für das Formular
und schließt dann gleichzeitig den Dialog aus.
Also, indem wir dieses Attribut zu dieser Schaltfläche verwenden,
deklarieren wir dies als die Schaltfläche, die den Fehler ablehnt,
genauso wie wir diese Schaltfläche in der Symbolleiste haben.
Also, der mat-Dialog schließt sich dort.
Dann ist eine andere Schaltfläche, die wir haben,
zum Senden, so dass
dieser Button-Typ die Submit-Button innerhalb eines Formulars dort sein würde.
Also, wenn dies angeklickt wird,
löst das die Formulareinreichung für dieses Formular hier aus,
und dann lassen Sie mich in einer Klasse hinzufügen,
werden wir Hintergrundprimär und Text floral sagen.
Diese Klassen habe ich dort bereits in meine Styles.acss-Datei hinzugefügt.
Also, Text floral weiß,
und diese Schaltfläche würde als Login-Button dort beschriftet werden.
Dies wäre also ein blauer Knopf, der dort auf dem Bildschirm angezeigt wird.
Damit wird meine Formularstruktur in der Vorlage dort erstellt.
Nun, der nächste Schritt besteht darin, in den Code zu gehen und dann die Formularübermittlung selbst zu behandeln.
Also, jetzt gehen, um component.ts Datei anmelden,
müssen wir die Formulareinreichung hier behandeln.
Nun, der erste Schritt, den ich tun werde, ist, wenn diese Login-Komponente erstellt
wird, werden wir hier ein Benutzerobjekt mit dem Eigenschaften-Benutzernamen erstellen, der
eine leere Zeichenfolge wäre, mit dem zu beginnen,
Passwort, das auch eine leere Zeichenfolge sein wird,
und dann merken Sie sich, was falsch ist.
Indem wir dies hier erklären,
sagen wir auch, dass wir jetzt
diese drei Eigenschaften an die drei Formularelemente in meiner Vorlage binden können.
Also, das ist es, was wir hier erreicht haben.
Lassen Sie
mich für den Konstruktor den Dialog ref hier injizieren,
mat-dialog ref, und dieser Matte Dialog ref wird die entsprechende Komponente nehmen.
Dies ist also ein Verweis auf diese Login-Komponente hier.
Also, das sagt uns, wann diese- wenn dies eingereicht wird,
wie man damit umgeht.
Also, hier, lassen Sie mich hier eine On Submit-Funktion hinzufügen,
und innerhalb der On Submit-Funktion
werde ich mich einfach anmelden,
die entsprechenden Benutzerinformationen protokollieren,
also klickt der Benutzer auf das Anmeldeformular,
das Anmeldeformular und sendet das Anmeldeformular.
Ich werde gerade die Informationen des Benutzers auf der Konsole im Moment protokollieren.
Später werden wir im serverseitigen Kurs entwerfen.
Wir werden den eigentlichen Anmeldeprozess erledigen, wenn
unser Server bereit ist und in der Lage ist, die Anmeldung des Benutzers zu bearbeiten.
Also, danach, werden wir sagen, dass dieser Dialog ref close.
Warum schließen wir das hier ein?
Also, wenn das Formular eingereicht wird,
wollen wir auch die Komponente dort entlassen,
die Dialogkomponente dort.
Also, indem wir
diesen Dialog ref close aufrufen,
bitten wir die Dialogkomponente, hier geschlossen zu werden.
Also, das ist der Grund, warum ich hier einen Verweis auf die Login-Komponente bekomme,
die hier als meine Dialogkomponente fungiert.
So werden wir in der Lage sein, die Dialogkomponente zu schließen, indem wir dies tun.
Sobald der Benutzer das Formular übermittelt hat,
protokollieren Sie die Benutzerinformationen
und schließen dann das Dialogfeld. Das war's.
Lassen Sie uns die Änderungen speichern und dann gehen und werfen Sie einen Blick auf die aktualisierte Anwendung.
Gehen Sie in unsere Anwendung im Browser,
lassen Sie mich die JavaScript-Konsole öffnen, damit Sie die Informationen sehen können, die angemeldet sind.
Lassen Sie mich hier den Login-Dialog öffnen, wobei das Formular bereits vorhanden ist,
der Benutzername und das Passwort bereits vorhanden sind.
Also, lassen Sie mich den Namen eines Benutzers eingeben.
Ich bin hier narzisstisch.
Also, ich tippe hier den Benutzernamen und das Passwort ein.
Beachten Sie nun, dass, wenn ich die Informationen hier eingebe,
da ich hier den Wert des JavaScript-Objekts des Benutzers anzeige,
alle Änderungen, die ich mache, sofort auf den Bildschirm hier reflektiert werden.
Auch das Kontrollkästchen erinnern, das hier an- und ausgeschaltet wird.
Wenn ich dann das Formular hier absende,
können Sie sehen, dass in der Konsole
die Benutzerinformationen an der Konsole protokolliert werden,
der Benutzername, das Kennwort
und der Erinnerungswert an die Konsole gesperrt sind.
So können Sie jetzt sehen, dass mein Anmeldeformular,
das Template-gesteuerte Formular korrekt funktioniert.
Damit schließen wir diese Übung ab,
wo wir gesehen haben, wie wir ein Template-getriebenes Formular in unserer Angular-Anwendung entwerfen können.
Dies ist ein guter Zeitpunkt für Sie, ein Git-Commit mit der Nachricht
Template Driven Forms Teil 1 zu machen.