Template-driven Forms

In dieser Lektion lernen Sie Template-driven Forms in Angular kennen, mit denen Sie schnell einfache Formulare erstellen können.

Was sind Template-driven Forms?

Template-driven Forms verwenden HTML-Templates und Angular-Direktiven, um Formulare einfach zu erstellen, zu validieren und abzusenden.

FormsModule importieren

Um Template-driven Forms zu verwenden, importieren Sie FormsModule in Ihr Angular-Modul:

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

Ein einfaches Formular erstellen

Definieren Sie ein einfaches Formular in Ihrem Template mithilfe der Direktive ngForm:

<form #form="ngForm">
  <input name="username" ngModel>
</form>

Two-way Binding mit ngModel

ngModel bindet Formularsteuerelemente mithilfe der bidirektionalen Datenbindung an Eigenschaften der Komponente:

<input [(ngModel)]="user.name" name="username">

Formularübermittlung

Verarbeiten Sie die Formularübermittlung einfach mithilfe von Angulars Event Binding:

<form (ngSubmit)="onSubmit(form)" #form="ngForm">

Formularvalidierung

Angular stellt einfache Validierungsdirektiven wie required und minlength bereit:

<input name="username" ngModel required minlength="4">

Auf den Formularzustand zugreifen

Greifen Sie über Template-Variablen auf den Formularzustand zu, beispielsweise auf die Gültigkeit oder den Status „berührt“:

<div *ngIf="form.invalid && form.touched">Form is invalid!</div>

Zusammenfassung

Sie haben gelernt, wie Sie mit Template-driven Forms Formulare einfach erstellen, binden, validieren und übermitteln. Üben Sie weiter!