Angular bietet zwei Ansätze für Formulare. Templategesteuerte Formulare sind einfach und im HTML definiert; reaktive Formulare sind in TypeScript definiert und bieten mehr Kontrolle — besser für komplexe, dynamische oder umfangreich validierte Formulare.
// just import FormsModule; minimal TS
Submit
Die Formularstruktur und Validierung leben im Template über ngModel Direktiven. Einfach zu einzurichten, aber das Formularmodell ist implizit und schwieriger zu testen/programmgesteuert zu manipulieren.
import { FormBuilder, Validators } from "@angular/forms";
export class SignupComponent {
constructor(private fb: FormBuilder) {}
form = this.fb.group({
email: ["", [Validators.required, Validators.email]],
password: ["", [Validators.required, Validators.minLength(8)]],
});
onSubmit() {
if (this.form.valid) console.log(this.form.value);
}
}
<form [formGroup]="form" (ngSubmit)="onSubmit()">
<input formControlName="email" />
<input formControlName="password" type="password" />
<button [disabled]="form.invalid">Submit</button>
</form>
Das Formular ist ein explizites Objekt (FormGroup/FormControl), das Sie in TS erstellen. Dies macht es Observable, testbar und einfach zu manipulieren (Felder hinzufügen/entfernen, auf Änderungen über valueChanges reagieren).
Template-driven Reactive
Where defined HTML (ngModel) TypeScript (FormBuilder)
Form model implicit/async explicit, synchronous object
Validation directives in template validators in code
Dynamic forms hard easy (add/remove controls in code)
Testability harder straightforward (it's just an object)
Best for simple forms complex/dynamic/validated forms
this.form.get("email")!.valueChanges.subscribe(v => ...); // react to changes
this.form.valid; // synchronous validity check
Die Wahl des richtigen Formularansatzes ist wichtig für die Wartbarkeit: templategesteuert für schnelle, einfache Formulare; reaktiv für alles Komplexe — mehrstufige Assistenten, dynamische Feldgruppen, feldübergreifende Validierung oder Formulare, die Unit-Tests benötigen.
Das explizite, Observable-Modell reaktiver Formulare wird in ernsthaften Anwendungen allgemein bevorzugt, da es mächtiger, testbar und skalierbar ist, obwohl es anfangs mehr Code erfordert.