Template-driven forms in Angular

Anfänger Jul 11 (14:16) 0
"Cheat sheet" zu 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.

Alle Kommentare
Durch die Nutzung dieser Website erklären Sie sich mit der Verwendung von Cookies einverstanden. Außerdem werden teilweise auch Cookies von Diensten Dritter gesetzt. Genauere Informationen finden Sie in unserer Datenschutzerklärung sowie im Impressum.