Vorlagengesteuerte Formulare in Angular

Name: Vorlagengesteuerte Formulare in Angular
Author: Michaela Ochnich

In diesem Kapitel geht es um die Erstellung von vorlagengesteuerten Formularen. Sie lernen, wie Sie die Formularvorlage erstellen und sie an ein Datenmodell binden. Sie lernen die Kontrollzustände von Angular kennen und erfahren, wie Sie diese für die Formularvalidierung und die Anzeige von Fehlerrückmeldungen an den Benutzer verwenden können.

Preview the first lesson free — get full access to all 6 lessons.

Demo anfragen Anmelden

Kurs: On-Demand

Diese Lektion führt Sie durch die Einrichtung die Vorlage für Ihr vorlagengesteuertes Formular. Für diese Demonstration Ich werde ein einfaches Benutzerregistrierungsformular erstellen. Zuerst erzeuge ich eine Komponente, die das Formular enthält und fügen Sie dann diese Komponente zum Stamm hinzu, und dann in dieser Stammvorlage, Ich werde diesen ganzen Startercode löschen und fügen Sie diese Formularkomponente hinzu. Wenn Sie nun vorlagengesteuerte Formulare erstellen, Sie müssen das FormsModule importieren. Also mache ich das jetzt im Root-Anwendungsmodul. Dieses Formularmodul enthält alle die Angular-Anweisungen, die Sie benötigen zum Bauen, Binden und Validierung dieses vorlagengesteuerten Formulars. NgModel und NgForm sind zwei der Anweisungen, die Sie verwenden werden, sind Teil dieses Moduls. NgModel ist die Direktive für die Zwei-Wege-Bindung und NgForm übernimmt die Formularübermittlung sowie Validierungsinformationen bereitzustellen. Nun, mit dem importierten, Ich kann mit dem Erstellen der Vorlage für das Formular beginnen. Öffnen Sie also diese Formularkomponentenvorlage. Dieses Formular enthält Felder für eine erste und Nachname und E-Mail-Adresse, ein Passwort, eine Telefonnummer und dann die Option, sich für eine Mailingliste anzumelden. Die Felder Vorname, E-Mail und Passwort werden benötigt, aber dann bleiben die anderen Felder optional. Hier erstelle ich zunächst ein Formular, und dann füge ich hier das Feld für den Vornamen hinzu und hier für die Eingabefelder, Sie möchten sowohl die ID- als auch die Namensattribute einschließen. Die ID wird verwendet, um die Eingabe mit dem Label abzugleichen und Angular benötigt das name-Attribut für die NgModel- und NgForm-Direktiven später. ich gehe auch um diese Formgruppenklasse schnell mit etwas Spielraum zu stylen damit diese Felder nicht alle übereinander liegen und dann zurück in die Komponentenvorlage, Ich werde diesen Code für den Rest wiederholen der Formularfelder, und für dieses E-Mail-Feld hier, Ich habe sichergestellt, dass der Eingabetyp auch E-Mail ist damit die später erforderliche Validierung korrekt funktioniert für dieses Feld, und hier für das E-Mail-Feld, Sie möchten sicherstellen, dass der Eingabetyp eingestellt ist um zu reflektieren, dass es sich um eine E-Mail-Adresse handelt damit die Validierung richtig funktioniert. Das gleiche mache ich auch für die nächsten beiden Felder, das Passwort und die Telefonnummer, und dann benötigt dieses Formular auch einen Absenden-Button und dann im Browser anzeigen, alle diese Felder werden hier eingerichtet und angezeigt. Das ist alles für diese Lektion zum Einrichten der Vorlage und in der nächsten lektion zeigen wir dir wie um diese Vorlage mit NgModel zu binden.

Mittelstufe Anbieter : Michaela Ochnich 6 Lektionen · 30m auf Arabisch, Deutsch, Englisch, Spanisch, Französisch, Portugiesisch, Chinese

Kursbeschreibung

Was Sie lernen werden

Erstellen Sie ein vorlagengesteuertes Formular, um Informationen vom Benutzer zu sammeln
Erstellen Sie die Formularvorlage und binden Sie sie an ein Datenmodell
Verwenden Sie Angulars Steuerzustände, um den Status des Formulars und der Eingabe zu verfolgen
Implementieren Sie Formularvalidierung und zeigen Sie dem Benutzer Fehlermeldungen an
Handhaben Sie die Formularübermittlung

Wichtige Erkenntnisse

Das Kapitel konzentriert sich auf die Erstellung vorlagengesteuerter Formulare in Angular, einschließlich der Erstellung der Formularvorlage und ihrer Bindung an ein Datenmodell.
Angulars Steuerzustände können verwendet werden, um die Formularvalidierung zu handhaben und dem Benutzer Fehlermeldungen anzuzeigen.
Das Kapitel behandelt die Formularübermittlung als Teil der Arbeit mit vorlagengesteuerten Formularen.
Die Formularvalidierung wird in zwei dedizierten Lektionen behandelt (Form Validation Part 1 und Part 2).

Häufig gestellte Fragen

Was behandelt dieses Kapitel?

Dieses Kapitel konzentriert sich auf die Erstellung vorlagengesteuerter Formulare in Angular, einschließlich der Erstellung der Formularvorlage, ihrer Bindung an ein Datenmodell, der Verwendung von Steuerzuständen, der Handhabung der Formularvalidierung mit Fehlermeldungen und der Formularübermittlung.

Was werde ich lernen, mit Formularen zu tun?

Sie lernen, wie Sie ein Formular erstellen, um Informationen vom Benutzer zu erhalten und wie Sie die Formularvalidierung und -übermittlung verwalten.

Wie wird die Angular-Formularvalidierung in diesem Kapitel unterrichtet?

Die Formularvalidierung wird durch Angulars Steuerzustände behandelt, die zur Handhabung der Validierung und zur Anzeige von Fehlermeldungen für den Benutzer verwendet werden, und ist auf zwei Lektionen verteilt: Form Validation Part 1 und Form Validation Part 2.

Welche Lektionen sind in diesem Kapitel enthalten?

Die Lektionen sind Building the Template, Binding the Form, Control States, Form Validation Part 1, Form Validation Part 2 und Form Submission.

Welche Fähigkeiten bezieht sich auf dieses Kapitel?

Es bezieht sich auf Angular (Web Framework), Angular Components, Angular Reactive Forms, Angular UI, Ng Controller und Templates.