Share
Was Sie erstellen werdenDies ist der zweite Teil der Serie "Einführung in Formulare in Winkel 4". Im ersten Teil haben wir ein Formular mit dem vorlagengesteuerten Ansatz erstellt. Wir verwendeten Richtlinien wie ngModel, ngModelGroup und ngForm um die Formularelemente zu überladen. In diesem Lernprogramm werden wir einen anderen Ansatz zum Erstellen von Formen verwenden - der reaktive Weg.
Reaktive Formulare haben einen anderen Ansatz als die von Vorlagen angetriebenen Formulare. Hier erstellen und initialisieren wir die Kontrollobjekte bilden in unserer Komponentenklasse. Sie sind Zwischenobjekte, die den Zustand des Formulars enthalten. Wir werden sie dann an das binden Steuerelemente bilden in der Vorlage.
Das Formularsteuerungsobjekt überwacht jede Änderung der Eingabesteuerungswerte und wird sofort im Status des Objekts angezeigt. Da die Komponente direkten Zugriff auf die Datenmodellstruktur hat, können alle Änderungen zwischen dem Datenmodell, dem Formularsteuerungsobjekt und den Eingabesteuerungswerten synchronisiert werden.
Wenn wir ein Formular zum Aktualisieren des Benutzerprofils erstellen, ist das Datenmodell praktisch das vom Server abgerufene Benutzerobjekt. Normalerweise wird dies häufig in der Benutzereigenschaft der Komponente gespeichert (this.user). Das Formularsteuerungsobjekt oder das Formularmodell wird an die eigentlichen Formularsteuerelemente der Vorlage gebunden.
Beide Modelle sollten ähnliche Strukturen haben, auch wenn sie nicht identisch sind. Die Eingabewerte sollten jedoch nicht direkt in das Datenmodell einfließen. Das Bild beschreibt, wie die Benutzereingaben aus der Vorlage in das Formularmodell gelangen.
Lass uns anfangen.
Sie müssen Teil 1 dieser Serie nicht befolgt haben, damit Teil 2 einen Sinn ergibt. Wenn Sie jedoch noch nicht mit Angular-Formularen vertraut sind, würde ich dringend empfehlen, die auf Vorlagen basierende Strategie durchzugehen. Der Code für dieses Projekt ist in meinem GitHub-Repository verfügbar. Stellen Sie sicher, dass Sie sich im richtigen Zweig befinden, und laden Sie dann die ZIP-Datei herunter. Alternativ können Sie auch das Repo klonen, um das Formular in Aktion zu sehen.
Wenn Sie lieber von vorne anfangen möchten, vergewissern Sie sich, dass Angular CLI installiert ist. Verwenden Sie die ng Befehl zum Erzeugen eines neuen Projekts.
$ ng neues SignupFormProject
Generieren Sie anschließend eine neue Komponente für die Anmeldeformular oder manuell erstellen.
ng generiert die Komponente SignupForm
Ersetzen Sie den Inhalt von app.component.html mit diesem:
Hier ist die Verzeichnisstruktur für die src / Verzeichnis. Ich habe einige nicht wesentliche Dateien entfernt, um die Dinge einfach zu halten.
. ├── app │ app.component.css app.component.html ├── ├── app.component.ts ts. App.module.ts ├── ├── Anmeldeformular-├── ├ ── signup-form.component.css │ up up up up signup-form.component.html │ └── up up up up up up up up up up up... .ts ├── polyfills.ts ├── styles.css ├── tsconfig.app.json └── typings.d.ts
Wie Sie sehen, ein Verzeichnis für die Anmeldeformular Komponente wurde automatisch erstellt. Das ist, wo der größte Teil unseres Codes gehen wird. Ich habe auch ein neues erstellt User.ts zur Speicherung unseres Benutzermodells.
Bevor wir in die eigentliche Komponentenvorlage eintauchen, müssen wir eine abstrakte Vorstellung davon haben, was wir bauen. Hier ist also die Formstruktur, die ich im Kopf habe. Das Anmeldeformular enthält mehrere Eingabefelder, ein Auswahlelement und ein Kontrollkästchenelement.
Hier ist die HTML-Vorlage, die wir für unsere Registrierungsseite verwenden werden.
Die in der HTML-Vorlage verwendeten CSS-Klassen sind Teil der Bootstrap-Bibliothek, mit der Dinge schön gemacht werden. Da dies kein Design-Tutorial ist, werde ich nicht viel über die CSS-Aspekte des Formulars sprechen, sofern dies nicht erforderlich ist.
Um ein Reactive-Formular zu erstellen, müssen Sie das importieren ReactiveFormsModule von @ eckig / formen und fügen Sie es dem Import-Array in hinzu app.module.ts.
// Importieren von ReactiveFormsModule Import ReactiveFormsModule aus '@ angle / forms'; @NgModule (… // Fügen Sie das Modul den Importen hinzu. Array-Importe: [BrowserModule, ReactiveFormsModule…) Exportklasse AppModule
Als Nächstes erstellen Sie ein Benutzermodell für das Registrierungsformular. Wir können entweder eine Klasse oder eine Schnittstelle zum Erstellen des Modells verwenden. Für dieses Tutorial werde ich eine Klasse mit den folgenden Eigenschaften exportieren.
Exportklasse Benutzer ID: Nummer; E-Mail: Zeichenfolge; // Beide Passwörter befinden sich in einem einzigen Objekt. Password: pwd: string; confirmPwd: Zeichenfolge; ; Geschlecht: String; Begriffe: boolean; Konstruktor (Werte: Object = ) // Konstruktorinitialisierung Object.assign (this, values);
Erstellen Sie nun eine Instanz des Benutzermodells in der Anmeldeformular Komponente.
import Component, OnInit aus '@ angle / core'; // Importieren Sie das Benutzermodell importieren User aus './… / User'; @Component (Selector: 'app-signup-form', templateUrl: './signup-form.component.html', styleUrls: ['./signup-form.component.css']) export-Klasse SignupFormComponent implementiert OnInit // Liste der Geschlechter für das ausgewählte Steuerelement private genderList: string []; // Eigenschaft für den privaten Benutzer des Benutzers: User; ngOnInit () this.genderList = ['männlich', 'weiblich', 'andere'];
Für die Anmeldeformular.component.html Datei, ich werde die gleiche HTML-Vorlage verwenden, die oben beschrieben wurde, jedoch mit geringfügigen Änderungen. Das Anmeldeformular enthält ein Auswahlfeld mit einer Liste von Optionen. Obwohl dies funktioniert, machen wir es auf die Angular-Weise, indem wir die Liste mit der Schleife durchlaufen ngFor Richtlinie.
Hinweis: Möglicherweise wird eine Fehlermeldung angezeigt Kein Anbieter für ControlContainer. Der Fehler wird angezeigt, wenn eine Komponente über eine
Wir haben eine Komponente, ein Modell und eine Formularvorlage zur Hand. Was jetzt? Es ist an der Zeit, uns die Hände schmutzig zu machen und sich mit den APIs vertraut zu machen, die Sie zum Erstellen reaktiver Formulare benötigen. Das beinhaltet FormControl und Gruppe formen.
Beim Erstellen von Formularen mit der Strategie für reaktive Formulare werden Sie nicht auf die Direktiven ngModel und ngForm stoßen. Stattdessen verwenden wir die zugrunde liegende FormControl- und FormGroup-API.
Ein FormControl ist eine Anweisung, die zum Erstellen einer FormControl-Instanz verwendet wird, mit der Sie den Status eines bestimmten Formularelements und dessen Validierungsstatus verfolgen können. So funktioniert FormControl:
/ * FormControl zuerst importieren * / import FormControl aus '@ angle / forms'; / * Beispiel für das Erstellen einer neuen FormControl-Instanz * / export-Klasse SignupFormComponent email = new FormControl ();
Email ist jetzt eine FormControl-Instanz, die Sie wie folgt an ein Eingabesteuerelement in Ihrer Vorlage binden können:
Anmelden
Das Vorlagenformularelement ist jetzt an die FormControl-Instanz in der Komponente gebunden. Dies bedeutet, dass jede Änderung des Eingabesteuerwerts am anderen Ende angezeigt wird.
Ein FormControl-Konstruktor akzeptiert drei Argumente - einen Anfangswert, ein Array von Synchronisationsprüfern und ein Array von Asynchronprüfern - und, wie Sie vielleicht schon vermutet haben, sind sie alle optional. Wir werden hier die ersten beiden Argumente behandeln.
Accentsconagua
Validators aus '@ angle / forms' importieren;… / * FormControl mit Anfangswert und Validator * / email = new FormControl ('[email protected] ', Validators.required); Angular verfügt über eine begrenzte Anzahl eingebauter Validatoren. Die gängigen Validator-Methoden umfassen Validators.required, Validators.minLength, Validators.maxlength, und Validators.pattern. Um sie zu verwenden, müssen Sie jedoch zunächst die Validator-API importieren.
Für unser Anmeldeformular haben wir mehrere Eingabesteuerungsfelder (für E-Mail und Passwort), ein Auswahlfeld und ein Kontrollkästchen. Anstatt individuell zu schaffen FormControl würde es nicht sinnvoller sein, all diese Objekte zu gruppieren FormControls unter einer einzigen Einheit? Dies ist vorteilhaft, da wir jetzt den Wert und die Gültigkeit aller Sub-FormControl-Objekte an einer Stelle verfolgen können. Das ist, was Gruppe formen ist für. Also registrieren wir eine übergeordnete FormGroup mit mehreren untergeordneten FormControls.
Um eine FormGroup hinzuzufügen, importieren Sie sie zuerst. Als nächstes deklarieren Sie signupForm als Klasseneigenschaft und initialisieren Sie es wie folgt:
// Importiere die API zum Erstellen eines Formularimports FormControl, FormGroup, Validators aus '@ angle / forms'; Exportklasse SignupFormComponent implementiert OnInit genderList: String []; signupForm: FormGroup;… ngOnInit () this.genderList = ['männlich', 'weiblich', 'andere']; this.signupForm = new FormGroup (email: new FormControl (", Validators.required), pwd: new FormControl (), confirmPwd: new FormControl (), gender: new FormControl (), Begriffe: new FormControl ()) Binden Sie das FormGroup-Modell wie folgt an das DOM:
