Angular 2 Formularen

In diesem Kapitel stellen wir vor, wie man ein Angular-Formular unter Verwendung von Komponenten und Templates erstellt.

Mit Angular-Templates können wir verschiedene Arten von Formularen erstellen, wie Anmeldeformulare, Kontaktformulare, Produktdetailformulare usw., und wir können auch Datenvalidierung zu den Feldern dieser Formulare hinzufügen.

Als Nächstes implementieren wir die Formularfunktionalität Schritt für Schritt.

Projekt erstellen

Importieren Sie das initiale Projekt.

Für die vollständige Projekterstellung siehe:Angular 2 TypeScript-Umgebung einrichten

Oder laden Sie den Quellcode direkt herunter:Klicken Sie hier zum Herunterladen

Nach dem Entpacken benennen Sie das Verzeichnis in angular-forms um und ändern Sie Folgendes in der Datei angular-forms/package.json:"name": "angular-quickstart"is"name": "angular-forms"。

Wenn Sie fertig sind, führen wircnpm installaus, um die Abhängigkeitspakete zu laden.

Site-Modell erstellen

Das Folgende erstellt eine einfache Modellklasse Site, die drei Pflichtfelder enthält: id, name, url, und ein optionales Feld: alexa.

Erstellen Sie die site.ts-Datei im Verzeichnis angular-forms/app mit dem folgenden Code:

app/site.ts-Datei:

export class Site { constructor( public id: number, public name: string, public url: string, public alexa?: number ) { } }

Im folgenden Code sind als public markierte Felder öffentliche Felder, und ein nach alexa hinzugefügtes Fragezeichen (?) kennzeichnet ein optionales Feld.

Formularkomponente erstellen

Jedes Angular-Formular besteht aus zwei Teilen: einem HTML-basierten Template und einer codebasierten Komponente, die Daten und Benutzerinteraktion verarbeitet.

Erstellen Sie die site-form.component.ts-Datei im Verzeichnis angular-forms/app mit dem folgenden Code:

app/site-form.component.ts-Datei:

import { Component } from '@angular/core'; import { Site } from './site'; @Component({ moduleId: module.id, selector: 'site-form', templateUrl: 'site-form.component.html' }) export class SiteFormComponent { urls = ['www.example.com', 'www.google.com', 'www.taobao.com', 'www.facebook.com']; model = new Site(1, 'Beispiel', this.urls[0], 10000); submitted = false; onSubmit() { this.submitted = true; } //TODO: Remove after completion get diagnostic() { return JSON.stringify(this.model); } }

Im Beispiel werden der Component-Dekorator und das Site-Modell importiert.

Der @Component-Selektor "site-form" bedeutet, dass wir ein<site-form>-Tag verwenden können, um dieses Formular in das übergeordnete Template einzufügen.

Die templateUrl-Eigenschaft verweist auf eine eigenständige HTML-Template-Datei namens site-form.component.html.

Die diagnostic-Eigenschaft wird verwendet, um die JSON-Form dieses Modells zurückzugeben.

App-Root-Modul definieren

Modifizieren Sie app.module.ts, um das Root-Modul der App zu definieren, das externe Referenzen angibt und Komponenten deklariert, die zu diesem Modul gehören, wie SiteFormComponent.

Da template-gesteuerte Formulare ein eigenes Modul haben, müssen wir FormsModule zum imports-Array der Anwendung hinzufügen, damit wir Formulare verwenden können.

Der Code für die Datei app/app.module.ts sieht wie folgt aus:

app/app.module.ts-Datei:

import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { FormsModule } from '@angular/forms'; import { AppComponent } from './app.component'; import { SiteFormComponent } from './site-form.component'; @NgModule({ imports: [ BrowserModule, FormsModule ], declarations: [ AppComponent, SiteFormComponent ], bootstrap: [ AppComponent ] }) export class AppModule { }

Root-Komponente erstellen

Modifizieren Sie die Root-Komponentendatei app.component.ts, um SiteFormComponent darin zu platzieren.

app/app.component.ts-Datei:

import { Component } from '@angular/core'; @Component({ selector: 'my-app', template: '<site-form></site-form>' }) export class AppComponent { }

Ein initiales HTML-Formulartemplate erstellen

Erstellen Sie die Template-Datei site-form.component.html mit dem unten gezeigten Code:

app/site-form.component.html-Datei:

<div class="container"> <h1>Website-Formular</h1> <form> <div class="form-group"> <label for="name">Website-Name</label> <input type="text" class="form-control" id="name" required> </div> <div class="form-group"> <label for="alexa">Alexa-Rang</label> <input type="text" class="form-control" id="alexa"> </div> <button type="submit" class="btn btn-default">Submit</button> </form> </div>

Das Attribut required macht das Feld zu einem Pflichtfeld; wenn es nicht gesetzt ist, ist es optional.

Geben Sie den folgenden Befehl im Verzeichnis angular-forms ein:

cnpm install bootstrap --save

Öffnen Sie die Datei index.html und fügen Sie die folgenden Style-Links zum <head> hinzu:

Führen Sienpm startaus. Besuchen Sie anschließend: http://localhost:3000/, das Ergebnis sieht wie folgt aus:

Verwendung von ngModel für Two-Way-Data-Binding

Als Nächstes verwenden wir ngModel für das bidirektionale Datenbindung (Two-Way-Data-Binding) und aktualisieren die Eigenschaften der Komponente, indem wir auf DOM-Ereignisse lauschen.

Ändern Sie app/site-form.component.html, um unser Formular mithilfe von ngModel an das Modell zu binden. Der Code wird unten gezeigt:

app/site-form.component.html-Datei:

<div class="container"> <h1>Website-Formular</h1> <Form> {{diagnostic}} <div class="form-group"> <label for="name">Website-Name</label> <input type="text" class="form-control" id="name" required [(ngModel)]="model.name" name="name"> </div> <div class="form-group"> <label for="alexa">Alexa-Rang</label> <input type="text" class="form-control" id="alexa" [(ngModel)]="model.alexa" name="alexa"> </div> <div class="form-group"> <label for="url">Website URL</label> <select class="form-control" id="url" required [(ngModel)]="model.url" name="url"> <option *ngFor="let p of urls" [value]="p">{{p}}</option> </select> </div> <button type="submit" class="btn btn-default">Submit</button> </form> </div>

Jedes Eingabeelement hat ein id-Attribut, das vom for-Attribut des label-Elements verwendet wird, um das Label dem entsprechenden Eingang zuzuordnen.
Jedes Eingabeelement hat ein name-Attribut, das das Formularmodul von Angular benötigt, um das Steuerelement für das Formular zu registrieren.

Führen Sie das obige Beispiel aus; das Ausgabeergebnis ist wie folgt:

{{diagnostic}} Es wird nur zur Datenausgabe während des Testens verwendet.

Wir können ngModel auch verwenden, um den Änderungsstatus und die Validierung zu verfolgen. Es verwendet drei CSS-Klassen, um die Steuerelemente zu aktualisieren und den aktuellen Status widerzuspiegeln.

State	Klasse bei true	Klasse bei false
Das Steuerelement wurde besucht	`ng-touched`	`ng-untouched`
Der Wert des Steuerelements wurde geändert	`ng-dirty`	`ng-pristine`
Der Wert des Steuerelements ist gültig	`ng-valid`	`ng-invalid`

Auf diese Weise können wir benutzerdefiniertes CSS hinzufügen, um den Status des Formulars widerzuspiegeln.

Erstellen Sie die Datei forms.css im Verzeichnis angular-forms. Der Code sieht wie folgt aus:

Datei forms.css:

.ng-valid[required], .ng-valid.required { border-left: 5px solid #4276A9; /* green */ } .ng-invalid:not(form) { border-left: 5px solid #a94442; /* red */ }

Öffnen Sie die Datei index.html und fügen Sie die folgenden Style-Links zum <head> hinzu:

Ändern Sie app/site-form.component.html. Der Code wird unten gezeigt:

app/site-form.component.html-Datei:

<div class="container"> <h1>Website-Formular</h1> <Form> {{diagnostic}} <div class="form-group"> <label for="name">Website-Name</label> <input type="text" class="form-control" id="name" required [(ngModel)]="model.name" name="name" #name="ngModel" > <div [hidden]="name.valid || name.pristine" class="alert alert-danger">Website name is required</div> </div> <div class="form-group"> <label for="alexa">Alexa-Rang</label> <input type="text" class="form-control" id="alexa" [(ngModel)]="model.alexa" name="alexa"> </div> <div class="form-group"> <label for="url">Website URL</label> <select class="form-control" id="url" required [(ngModel)]="model.url" name="url"> <option *ngFor="let p of urls" [value]="p">{{p}}</option> </select> </div> <button type="submit" class="btn btn-default">Submit</button> </form> </div>

Durch das Binden des hidden-Attributs des div-Elements an die Eigenschaften des name-Steuerelements in der Vorlage können wir die Sichtbarkeit der Fehlermeldung für das "name"-Feld steuern.

Löschen Sie die Daten im Namensfeld, und das angezeigte Ergebnis sieht wie folgt aus:

Eine Website hinzufügen
Als Nächstes erstellen wir ein Formular zum Hinzufügen einer Website. Fügen Sie einen Button in app/site-form.component.html hinzu:

app/site-form.component.html-Datei:

<button type="button" class="btn btn-default" (click)="newSite()">Add website</button>

Binden Sie das obige Button-Ereignis an eine Methoden der Komponente:

app/site-form.component.ts-Datei:

active = true; newSite() { this.model = new Site(5, '', ''); this.active = false; setTimeout(() => this.active = true, 0); }

Wir fügen der Komponente ein active-Flag hinzu und initialisieren es mit true. Wenn wir eine neue Website hinzufügen, wird das active-Flag auf false gesetzt und dann über eine schnelle setTimeout-Funktion schnell wieder auf true zurückgesetzt.

Formular über ngSubmit absenden

Wir können die Direktive NgSubmit von Angular verwenden, um das Formular abzusenden, und es über den Ereignisbindungsmechanismus an die Methode SiteFormComponent.submit() binden.

Wir haben eine Vorlagenreferenzvariable #siteForm definiert und sie mit "ngForm" initialisiert.

Diese siteForm-Variable verweist nun auf die NgForm-Direktive, die das Formular als Ganzes darstellt.

Der vollständige Code der Datei site-form.component.ts lautet wie folgt:

app/site-form.component.ts-Datei:

import { Component } from '@angular/core'; import { Site } from './site'; @Component({ moduleId: module.id, selector: 'site-form', templateUrl: 'site-form.component.html' }) export class SiteFormComponent { urls = ['www.example.com', 'www.google.com', 'www.taobao.com', 'www.facebook.com']; model = new Site(1, 'Example Tutorial', this.urls[0], 10000); submitted = false; onSubmit() { this.submitted = true; } //TODO: remove after completion get diagnostic() { return JSON.stringify(this.model); } active = true; newSite() { this.model = new Site(5, '', ''); this.active = false; setTimeout(() => this.active = true, 0); } }

Der vollständige Code von app/site-form.component.html lautet wie folgt:

app/site-form.component.html-Datei:

<div class="container"> <div [hidden]="submitted"> <h1>Website Form</h1> <form *ngIf="active" (ngSubmit)="onSubmit()" #siteForm="ngForm"> {{diagnostic}} <div class="form-group"> <label for="name">Website Name</label> <input type="text" class="form-control" id="name" required [(ngModel)]="model.name" name="name" #name="ngModel" > <div [hidden]="name.valid || name.pristine" class="alert alert-danger">Website name is required</div> </div> <div class="form-group"> <label for="alexa">Alexa Rank</label> <input type="text" class="form-control" id="alexa" [(ngModel)]="model.alexa" name="alexa"> </div> <div class="form-group"> <label for="url">Website URL</label> <select class="form-control" id="url" required [(ngModel)]="model.url" name="url"> <option *ngFor="let p of urls" [value]="p">{{p}}</option> </select> </div> <button type="submit" class="btn btn-default" [disabled]="!siteForm.form.valid">Submit</button> <button type="button" class="btn btn-default" (click)="newSite()">Add Website</button> </form> </div> <div [hidden]="!submitted"> <h2>The information you submitted is as follows:</h2> <div class="row"> <div class="col-xs-3">Website Name</div> <div class="col-xs-9 pull-left">{{ model.name }}</div> </div> <div class="row"> <div class="col-xs-3">Website Alexa Rank</div> <div class="col-xs-9 pull-left">{{ model.alexa }}</div> </div> <div class="row"> <div class="col-xs-3">Website URL</div> <div class="col-xs-9 pull-left">{{ model.url }}</div> </div> <br> <button class="btn btn-default" (click)="submitted=false">Edit</button> </div> </div>

Im Template binden wir das hidden-Attribut an die Eigenschaft submitted der SiteFormComponent.

Das Hauptformular ist von Anfang an sichtbar, da die Eigenschaft submitted den Wert false hat. Wenn wir das Formular absenden, wird es ausgeblendet und die Eigenschaft submitted wird auf true gesetzt:

submitted = false; onSubmit() { this.submitted = true; }

Die finale Verzeichnisstruktur sieht wie folgt aus:

Der in diesem Artikel verwendete Quellcode kann wie folgt heruntergeladen werden (ausgenommen sind die Verzeichnisse node_modules und typings).

Quellcode-Download

Das vollständige Beispiel-Demo-GIF sieht wie folgt aus:

Andere Erweiterungen