Advertisement
  1. Code
  2. Angular

Einführung in Formulare in Angular 4: Vorlage-getriebene Formulare

by
Read Time:15 minsLanguages:
This post is part of a series called Introduction to Forms in Angular 4.
Introduction to Forms in Angular 4: Reactive Forms

German (Deutsch) translation by Valentina (you can also view the original English article)

Final product imageFinal product imageFinal product image
What You'll Be Creating

Formulare sind für jede moderne Front-End-Anwendung von entscheidender Bedeutung und werden täglich verwendet, auch wenn sie nicht erkannt werden. Formulare sind erforderlich, um einen Benutzer sicher bei der App anzumelden, nach allen verfügbaren Hotels in einer bestimmten Stadt zu suchen, ein Taxi zu buchen, eine Aufgabenliste zu erstellen und viele andere Dinge zu tun, die wir gewohnt sind. Einige Formulare enthalten nur einige Eingabefelder, während andere Formulare eine Reihe von Feldern enthalten können, die sich auf mehrere Seiten oder Registerkarten erstrecken.

In diesem Tutorial werden wir über verschiedene Strategien sprechen, die für die Entwicklung von Formularen in Angular verfügbar sind. Unabhängig von der gewählten Strategie sollten in einer Formularbibliothek folgende Punkte behandelt werden:

  • Unterstützt die bidirektionale Bindung, damit die Eingabesteuerungswerte mit dem Komponentenstatus synchronisiert sind.
  • Behalten Sie den Formularstatus im Auge und verwenden Sie visuelle Hinweise, um den Benutzer darüber zu informieren, ob der aktuelle Status gültig ist oder nicht. Wenn der Benutzername beispielsweise ungültige Zeichen enthält, sollte um das Eingabefeld für den Benutzernamen ein roter Rand angezeigt werden.
  • Haben Sie einen Mechanismus, um Validierungsfehler richtig anzuzeigen.
  • Aktivieren oder deaktivieren Sie bestimmte Teile des Formulars, sofern einige Validierungskriterien nicht erfüllt sind.

Einführung in Formen in Angular

Angular ist ein vollwertiges Front-End-Framework und verfügt über eigene Bibliotheken zum Erstellen komplexer Formulare. Die neueste Version von Angular verfügt über zwei leistungsstarke Strategien zum Erstellen von Formularen. Sie sind:

  • vorlagengesteuerte Formulare
  • modellgetriebene oder reaktive Formen

Beide Technologien gehören zur Bibliothek @angle/forms und basieren auf denselben Formularsteuerungsklassen. Sie unterscheiden sich jedoch erheblich in ihrer Philosophie, ihrem Programmierstil und ihrer Technik. Die Auswahl übereinander hängt von Ihrem persönlichen Geschmack und auch von der Komplexität der Form ab, die Sie erstellen möchten. Meiner Meinung nach sollten Sie zuerst beide Ansätze ausprobieren und dann einen auswählen, der zu Ihrem Stil und dem jeweiligen Projekt passt.

Der erste Teil des Tutorials behandelt vorlagengesteuerte Formulare anhand eines praktischen Beispiels: Erstellen eines Anmeldeformulars mit Validierung für alle Formularfelder. Im zweiten Teil dieses Tutorials werden wir die Schritte zum Erstellen desselben Formulars anhand eines modellgetriebenen Ansatzes nachvollziehen.

Vorlage-getriebene Formulare

Der vorlagengesteuerte Ansatz ist eine Strategie, die aus der AngularJS-Ära übernommen wurde. Meiner Meinung nach ist es die einfachste Methode zum Erstellen von Formularen. Wie funktioniert es? Wir werden einige Angular-Direktiven verwenden.

Mit Direktiven können Sie Elementen im DOM Verhalten hinzufügen.- Angular Dokumentation

Angular bietet formularspezifische Anweisungen, mit denen Sie die Formulareingabedaten und das Modell binden können. Die formularspezifischen Anweisungen fügen einem einfachen HTML-Formular zusätzliche Funktionen und Verhaltensweisen hinzu. Das Endergebnis ist, dass die Vorlage Bindungswerte mit der Modell- und Formularvalidierung berücksichtigt.

In diesem Tutorial verwenden wir vorlagengesteuerte Formulare, um die Anmeldeseite einer Anwendung zu erstellen. Das Formular behandelt die gängigsten Formularelemente und verschiedene Validierungsprüfungen für diese Formularelemente. Hier sind die Schritte, die Sie in diesem Tutorial ausführen werden.

  • Fügen Sie formsModule zu app.module.ts hinzu.
  • Erstellen Sie eine Klasse für das Benutzermodell.
  • Erstellen Sie die ersten Komponenten und das Layout für das Anmeldeformular.
  • Verwenden Sie Angular-Formularanweisungen wie ngModel, ngModelGroup und ngForm.
  • Fügen Sie die Validierung mit integrierten Validatoren hinzu.
  • Validierungsfehler sinnvoll anzeigen.
  • Behandeln Sie die Formularübermittlung mit ngSubmit.

Lassen Sie uns anfangen.

Voraussetzungen

Der Code für dieses Projekt ist auf meinem GitHub-Repo verfügbar. Laden Sie die Zip-Datei herunter oder klonen Sie das Repo, um es in Aktion zu sehen. Wenn Sie lieber von vorne beginnen möchten, stellen Sie sicher, dass Angular CLI installiert ist. Verwenden Sie den Befehl ng, um ein neues Projekt zu generieren.

Generieren Sie als Nächstes eine neue Komponente für die SignupForm.

Ersetzen Sie den Inhalt von app.component.html durch Folgendes:

Hier ist die Verzeichnisstruktur für das Verzeichnis src/. Ich habe einige nicht wesentliche Dateien entfernt, um die Dinge einfach zu halten.

Wie Sie sehen, wurde automatisch ein Verzeichnis für die SignupForm-Komponente erstellt. Dort wird der größte Teil unseres Codes abgelegt. Ich habe auch eine neue User.ts zum Speichern unseres Benutzermodells erstellt.

Die HTML-Vorlage

Bevor wir uns mit der eigentlichen Komponentenvorlage befassen, müssen wir eine abstrakte Vorstellung davon haben, was wir erstellen. Hier ist also die Formstruktur, die ich im Kopf habe. Das Anmeldeformular enthält mehrere Eingabefelder, ein Auswahlelement und ein Kontrollkästchen.

The HTML TemplateThe HTML TemplateThe HTML Template

Hier ist die HTML-Vorlage, die wir für unsere Registrierungsseite verwenden werden.

HTML-Vorlage

Die in der HTML-Vorlage verwendeten CSS-Klassen sind Teil der Bootstrap-Bibliothek, mit der die Dinge hübsch gemacht werden. Da dies kein Design-Tutorial ist, werde ich nicht viel über die CSS-Aspekte des Formulars sprechen, es sei denn, dies ist erforderlich.

Grundlegende Formulareinrichtung

Um die vorlagengesteuerten Formularanweisungen zu verwenden, müssen Sie das FormsModule aus @angular/forms importieren und dem imports-Array in app.module.ts hinzufügen.

app/app.module.ts

Erstellen Sie als Nächstes eine Klasse, die alle Eigenschaften der Benutzerentität enthält. Wir können entweder eine Schnittstelle verwenden und in der Komponente implementieren oder eine TypeScript-Klasse für das Modell verwenden.

app/User.ts

Erstellen Sie jetzt eine Instanz der Klasse in der SignupForm-Komponente. Ich habe auch eine zusätzliche Eigenschaft für das Geschlecht deklariert.

app/signup-form/signup-form.component.ts

Für die Datei signup-form.component.html verwende ich dieselbe HTML-Vorlage wie oben beschrieben, jedoch mit geringfügigen Änderungen. Das Anmeldeformular enthält ein Auswahlfeld mit einer Liste von Optionen. Obwohl dies funktioniert, werden wir es auf Angular-Weise tun, indem wir die Liste mit der ngFor-Direktive durchlaufen.

app/signup-form/signup-form.component.html

Als Nächstes möchten wir die Formulardaten an das Benutzerklassenobjekt binden, sodass beim Eingeben der Anmeldedaten in das Formular ein neues Benutzerobjekt erstellt wird, in dem diese Daten vorübergehend gespeichert werden. Auf diese Weise können Sie die Ansicht mit dem Modell synchron halten. Dies wird als Bindung bezeichnet.

Es gibt verschiedene Möglichkeiten, dies zu erreichen. Lassen Sie mich zunächst ngModel und ngForm vorstellen.

ngForm und ngModel

ngForm und ngModel sind Angular-Direktiven, die für die Erstellung vorlagengesteuerter Formulare unerlässlich sind. Beginnen wir zuerst mit ngForm. Hier ist ein Auszug über ngForm aus den Angular-Dokumenten.

Die NgForm-Direktive ergänzt das form-Element um zusätzliche Funktionen. Es enthält die Steuerelemente, die Sie für die Elemente mit einer ngModel-Direktive und einem name-Attribut erstellt haben, und überwacht deren Eigenschaften, einschließlich ihrer Gültigkeit. Es hat auch eine eigene valid-Eigenschaft, die nur dann wahr ist, wenn jedes enthaltene Steuerelement gültig ist.

Aktualisieren Sie zunächst das Formular mit der Anweisung ngForm:

app/signup-form/signup-form.component.html

#signupForm ist eine Vorlagenreferenzvariable, die auf die ngForm-Direktive verweist, die das gesamte Formular steuert. Das folgende Beispiel zeigt die Verwendung eines ngForm-Referenzobjekts zur Validierung.

app/signup-form/signup-form.component.html

Hier gibt signupForm.form.valid false zurück, es sei denn, alle Formularelemente bestehen ihre jeweiligen Validierungsprüfungen. Die Schaltfläche "Senden" wird deaktiviert, bis das Formular gültig ist.

Für das Binden der Vorlage und des Modells gibt es viele Möglichkeiten, dies zu tun, und ngModel verfügt über drei verschiedene Syntaxen, um diese Situation zu lösen. Sie sind:

  1. [(ngModel)]
  2. [ngModel]
  3. ngModel

Beginnen wir mit dem ersten.

Zweiwege-Bindung mit [(ngModel)]

[(ngModel)] führt eine bidirektionale Bindung zum Lesen und Schreiben von Eingabesteuerungswerten durch. Wenn eine [(ngModel)]-Direktive verwendet wird, nimmt das Eingabefeld einen Anfangswert aus der gebundenen Komponentenklasse und aktualisiert ihn zurück, wenn eine Änderung des Eingabesteuerungswerts erkannt wird (bei Tastendruck und Tastendruck). Das Bild unten beschreibt den bidirektionalen Bindungsprozess besser.

Two-way binding with ngModelTwo-way binding with ngModelTwo-way binding with ngModel

Hier ist der Code für das E-Mail-Eingabefeld:

[(ngModel)] = "user.email" bindet die E-Mail-Eigenschaft des Benutzers an den Eingabewert. Ich habe auch ein name-Attribut hinzugefügt und name ="email" gesetzt. Dies ist wichtig und Sie erhalten eine Fehlermeldung, wenn Sie bei der Verwendung von ngModel kein Namensattribut deklariert haben.

Fügen Sie in ähnlicher Weise jedem Formularelement ein [(ngModel)] und ein eindeutiges name-Attribut hinzu. Ihr Formular sollte jetzt ungefähr so aussehen:

app/signup-form/signup-form.component.html

Die ngModelGroup wird verwendet, um ähnliche Formularfelder zu gruppieren, sodass Validierungen nur für diese Formularfelder ausgeführt werden können. Da beide Kennwortfelder miteinander verbunden sind, werden sie unter einer einzigen ngModelGroup zusammengefasst. Wenn alles wie erwartet funktioniert, sollte die komponentengebundene user-Eigenschaft für das Speichern aller Formularsteuerungswerte verantwortlich sein. Fügen Sie nach dem Formular-Tag Folgendes hinzu, um dies in Aktion zu sehen:

Führen Sie die Benutzereigenschaft durch die JsonPipe, um das Modell im Browser als JSON zu rendern. Dies ist hilfreich beim Debuggen und Protokollieren. Sie sollten eine JSON-Ausgabe wie diese sehen.

An example of JSON output An example of JSON output An example of JSON output

Die Werte fließen von der Ansicht in das Modell ein. Was ist umgekehrt? Versuchen Sie, das Benutzerobjekt mit einigen Werten zu initialisieren.

app/signup-form/signup-form.component.ts

Und sie erscheinen automatisch in der Ansicht:

Mit der Zwei-Wege-Bindungssyntax [(ngModel)] können Sie mühelos Formulare erstellen. Es hat jedoch bestimmte Nachteile; Daher gibt es einen alternativen Ansatz, der ngModel oder [ngModel] verwendet.

Hinzufügen von ngModel zum Mix

Wenn ngModel verwendet wird, sind wir tatsächlich dafür verantwortlich, die Komponenteneigenschaft mit den Eingabesteuerungswerten zu aktualisieren und umgekehrt. Die Eingabedaten fließen nicht automatisch in die Benutzereigenschaft der Komponente.

Ersetzen Sie also alle Instanzen von [(ngModel)] = "" durch ngModel. Wir behalten das name-Attribut bei, da alle drei Versionen von ngModel das name-Attribut benötigen, um zu funktionieren.

app/signup-form/signup-form.component.html

Mit ngModel wird der Wert des Namensattributs zu einem Schlüssel des zuvor erstellten ngForm-Referenzobjekts signupForm. So speichert signupForm.value.email beispielsweise den Steuerwert für die E-Mail-ID.

Ersetzen Sie {{user | json}} mit {{signupForm.value | json}}, da dort gerade der gesamte Status gespeichert ist.

Einwegbindung mit [ngModel]

Was ist, wenn Sie den Anfangszustand über die gebundene Klassenkomponente festlegen müssen? Das macht das [ngModel] für Sie.

One-way binding with ngModelOne-way binding with ngModelOne-way binding with ngModel

Hier fließen die Daten vom Modell in die Ansicht. Nehmen Sie die folgenden Änderungen an der Syntax vor, um die Einwegbindung zu verwenden:

app/signup-form/signup-form.component.html

Welchen Ansatz sollten Sie wählen? Wenn Sie [(ngModel)] und ngForm zusammen verwenden, müssen Sie möglicherweise zwei Zustände verwalten - user und signupForm.value - und das kann möglicherweise verwirrend sein.

Daher werde ich empfehlen, stattdessen die Einwegbindungsmethode zu verwenden. Aber das müssen Sie selbst entscheiden.

Validierung und Anzeige von Fehlermeldungen

Hier sind unsere Anforderungen für die Validierung.

  • Alle Formularsteuerelemente sind erforderlich.
  • Deaktivieren Sie die Schaltfläche "Senden", bis alle Eingabefelder ausgefüllt sind.
  • Das E-Mail-Feld sollte ausschließlich eine E-Mail-ID enthalten.
  • Das Passwortfeld sollte eine Mindestlänge von 8 haben.
  • Sowohl das Passwort als auch die Bestätigung sollten übereinstimmen.
Form with Validation using Template-driven formsForm with Validation using Template-driven formsForm with Validation using Template-driven forms
Unser Formular mit vorhandener Validierung

Der erste ist einfach. Sie müssen jedem Formularelement wie folgt ein required-Validierungsattribut hinzufügen:

app/signup-form/signup-form.component.html

Neben dem required Attribut habe ich auch eine neue Referenzvariable für #email-Vorlagen exportiert. Auf diese Weise können Sie über die Vorlage selbst auf das Winkelsteuerelement des Eingabefelds zugreifen. Wir werden es verwenden, um Fehler und Warnungen anzuzeigen. Verwenden Sie nun die deaktivierte Eigenschaft der Schaltfläche, um die Schaltfläche zu deaktivieren:

app/signup-form/signup-form.component.html

Verwenden Sie zum Hinzufügen einer Einschränkung für E-Mails das Musterattribut, das mit Eingabefeldern funktioniert. Muster werden verwendet, um reguläre Ausdrücke wie den folgenden anzugeben:

Für das Kennwortfeld müssen Sie lediglich ein Attribut minlength="" hinzufügen:

app/signup-form/signup-form.component.html

Um die Fehler anzuzeigen, verwende ich die bedingte Direktive ngIf für ein div-Element. Beginnen wir mit dem Eingabesteuerungsfeld für E-Mail:

app/signup-form/signup-form.component.html

Hier ist viel los. Beginnen wir mit der ersten Zeile des Fehlerabschnitts.

Erinnern Sie sich an die Variable #email, die wir zuvor exportiert haben? Es enthält einige Informationen zum Eingabesteuerungsstatus des E-Mail-Felds. Dies umfasst: email.valid, email.invalid, email.dirty, email.pristine, email.touched, email.untouched und email.errors. Das folgende Bild beschreibt jede dieser Eigenschaften im Detail.

Different class properties for displaying errorsDifferent class properties for displaying errorsDifferent class properties for displaying errors

Das div-Element mit dem *ngIf wird also nur gerendert, wenn die E-Mail ungültig ist. Der Benutzer wird jedoch mit Fehlern begrüßt, dass die Eingabefelder leer sind, noch bevor er die Möglichkeit hat, das Formular zu bearbeiten.

Um dieses Szenario zu vermeiden, haben wir die zweite Bedingung hinzugefügt. Der Fehler wird erst angezeigt, nachdem das Steuerelement besucht oder der Wert des Steuerelements geändert wurde.

Die verschachtelten div-Elemente werden verwendet, um alle Fälle von Validierungsfehlern abzudecken. Wir verwenden email.errors, um alle möglichen Validierungsfehler zu überprüfen und sie dem Benutzer dann in Form von benutzerdefinierten Nachrichten wieder anzuzeigen. Befolgen Sie nun das gleiche Verfahren für die anderen Formularelemente. Hier ist, wie ich die Validierung für die Passwörter codiert habe.

app/signup-form/signup-form.component.html

Das fängt an, ein bisschen chaotisch auszusehen. Angular verfügt über eine begrenzte Anzahl von Validatorattributen: requiredminlengthmaxlength und pattern. Um ein anderes Szenario wie das des Kennwortvergleichs abzudecken, müssen Sie sich wie oben beschrieben auf verschachtelte ngIf-Bedingungen verlassen. Oder erstellen Sie im Idealfall eine benutzerdefinierte Validierungsfunktion, die ich im dritten Teil dieser Serie behandeln werde.

Im obigen Code habe ich die ngIf else-Syntax verwendet, die in der neuesten Version von Angular eingeführt wurde. So funktioniert es:

Senden Sie das Formular mit ngSubmit

Wir haben das Formular fast fertiggestellt. Jetzt müssen wir in der Lage sein, das Formular zu senden, und die Steuerung der Formulardaten sollte an eine Komponentenmethode übergeben werden, z. B. onFormSubmit().

app/signup-form/signup-form.component.ts

Nun zur Komponente:

app/signup-form/signup-form.component.ts

Letzte Demo

Hier ist die endgültige Version der Anwendung. Ich habe ein paar Bootstrap-Klassen hinzugefügt, um das Formular hübsch zu machen.

Zusammenfassung

Wir sind alle hier fertig. In diesem Tutorial haben wir alles behandelt, was Sie zum Erstellen eines Formulars in Angular mithilfe des vorlagengesteuerten Ansatzes wissen müssen. Vorlagengesteuerte Formulare sind wegen ihrer Einfachheit und Benutzerfreundlichkeit beliebt.

Wenn Sie jedoch ein Formular mit vielen Formularelementen erstellen müssen, wird dieser Ansatz unübersichtlich. Im nächsten Tutorial werden wir uns also mit der modellgetriebenen Methode zum Erstellen derselben Form befassen.

Teilen Sie Ihre Gedanken in den Kommentaren unten.

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.