Template-driven forms in Angular

Template-driven forms ist die einfachste Variante für Formulare in Angular: Sie basieren auf den regulären Angular Templates in Verbindung mit ngModel für Databinding.

Um die Template-driven forms überhaupt verwenden zu können, muss FormsModule in der Applikation (app.module.ts) importiert werden:

...
import { FormsModule }   from '@angular/forms';
...
@NgModule({
  imports: [
    ...,
    FormsModule
  ],
  ...

Um ein Formular mit Template-driven forms zu gestallten, können wir die übliche Template Syntax in Angular verwenden:

<form #foobarForm="ngForm">
...
<input type="text" name="foobar.name" required [(ngModel)]="foobar.name">
...
</form>

Angular verbindet automatisch die ngForm Direktive mit dem <form> Formular-Element:

• ngForm überwacht den Status (valid, changed, touched, pristine) einzelner Eingabe-Elemente innerhalb der Form
• ngForm hält auch den gesamt Status aller Formelemente (valid-Property, zB. foobarForm.form.valid)
• Jedes Eingabe-Element innerhalb der Form muss eine "name" Property besitzen

Angular setzt in Abhängigkeit vom Status einer Form Komponente eine entsprechende CSS-Klasse/Klassen:

• ng-touched vs ng-untouched: In Abhängigkeit davon ob die Eingabe-Komponente bearbeitet wurde
• ng-dirty vs ng-pristine: In Abhängigkeit davon ob der Wert der Eingabe-Komponente geändert wurde
• ng-valid vs ng-invalid: In Abhängigkeit davon ob der eingegebene Wert gültig ist

Zur Anzeige von Fehlermeldungen benötigen wir noch eine Referenz auf die NgModel-Direktive der Eingabekomponente. Das bekommt man über eine "template reference variable" #foobarName="ngModel" :

<div>
    <label for="foobar-name">Name</label>
    <input type="text" id="foobar-name" 
           name="foobarName"
           #foobarName="ngModel" 
           [(ngModel)]="foobar.name" required>
    <div [hidden]="foobarName.valid || foobarName.pristine" class="danger">
        Das Feld darf nicht leer sein
    </div>
</div>

Damit kann man den Status des Eingabefeldes abfragen, zB: foobarName.valid und in Abhängigkeit davon eine Fehlermeldung anzeigen.

Als letztes behandeln wir noch das Submit/Absenden der Daten eines Formulars:

<form #foobarForm="ngForm" (ngSubmit)="submitFoobar()">
...
<button type="submit" [disabled]="!foobarForm.form.valid">Absenden</button>
...
</form>

Hier wird über die ngSubmit event-Eigenschaft die Methode submitFoobar aufgerufen, die in der zugehörigen Komponente definiert sein muss. Wir benötigen keinen zusätzlichen (click)-Handler an dem Submit-Button: Standardmäßig ruft ein mit type="submit" definierter Button immer die Submit-Routine des Formulars.