Читать книгу Angular - Manfred Steyer - Страница 60

Beim Einsatz von Formularen gilt es häufig, Eigenschaften aus der Komponente mit Eingabefeldern in der Anwendung abzugleichen: Die Werte der Eigenschaften sind also in Formularfelder zu übernehmen. Ändert der Anwender diese Felder, sind die neuen Werte in die jeweiligen Eigenschaften zurückzuschreiben. Diese Aufgabe übernimmt Angular mit sogenannten Two-Way-Bindings.

Wenn Sie mit einem Two-Way-Binding beispielsweise die Eigenschaft from aus unserer FlightSearchComponent an ein Eingabefeld binden wollen, müssen Sie in Angular folgende Schreibweise nutzen:

<input [(ngModel)]="from" name="from">

Kommt input innerhalb eines form-Elements zum Einsatz, muss es auch ein name-Attribut aufweisen. Details dazu finden sich in Kapitel 9.

Damit Sie auf den ersten Blick erkennen, dass es sich hier um ein Two-Way-Binding handelt, nutzt Angular eckige Klammern in Kombination mit runden. Die Community nennt diese Schreibkonvention auch Banana-in-a-Box. Zugegeben, dieser Einsatz von Sonderzeichen wirkt zunächst ein wenig seltsam. Allerdings hat sich das Angular-Team ganz bewusst für diese Schreibweise entschieden, um die Art der Datenbindung offensichtlich zu machen.

Bei ngModel handelt es sich um eine sogenannte Direktive. Direktiven sind von Angular bereitgestellte DOM-Erweiterungen, die Verhalten zur Seite hinzufügen. Im Fall von ngModel besteht dieses Verhalten im gewünschten Abgleich mit der angegebenen Eigenschaft. Gewissermaßen ist ngModel ein Experte für Eingabefelder: Es weiß, wie es die verschiedenen Eingabefelder – darunter Textfelder, Checkboxen, Radioboxen und Drop-down-Felder – mit den angegebenen Eigenschaften abgleichen kann.

Damit ngModel zur Verfügung steht, muss das FormsModule in unser AppModule importiert werden (siehe Beispiel 3-8).

Beispiel 3-8: FormsModule bei AppModule registrieren

// src/app/app.module.ts

[...]

// Diese Zeile einfügen:

import { FormsModule } from '@angular/forms';

@NgModule({

imports: [

// Diesen Eintrag hinzufügen:

FormsModule,

[...]

],

declarations: [

[...]

],

providers: [],

bootstrap: [

AppComponent

]

})

export class AppModule { }

Two-Way-Data-Binding funktioniert nur mit ausgewählten Eigenschaften. Unter diesen ist ngModel die einzige, die Angular ab Werk zur Verfügung steht. Sie können jedoch eigene Eigenschaften, die Two-Way-Data-Binding unterstützen, entwickeln. Details dazu finden Sie in Kapitel 4.