Die Validierung von Formularfeldern gehört für jeden Angular Developer zum Alltag. Das Anzeigen von Hinweisen in Formularen kann aber schnell zu viel repetetivem Boilerplate-Code führen - und den mag bekanntlich niemand.
Deshalb zeige ich in diesem Beitrag, wie man diesen Boilerplate-Code vermeidet und die Anzeige der Validierungshinweise streamlined - und sogar nachträglich einfach auf bestehenden Reactive Forms anwenden kann.
Setup
Bevor wir mit der Implementierung beginnen, richten wir ein neues Angular-Projekt ein. Ich nutze in diesem Beispiel Angular 18.
Initialisieren des Projekts:
ng new form-autovalidation-demo --style=scss --routing=false
Ins Projektverzeichnis wechseln:
cd form-autovalidation-demo
Nun erstellen wir die Komponenten / Directives die wir für die Demonstration benötigen:
ng generate component components/login-form
ng generate component components/form-validation-hint
ng generate directive directives/form-auto-validation-hint
ng generate directive directives/form-auto-validation-hint-location
Jetzt haben wir unser Grundgerüst:
- Eine LoginFormComponent, die Repräsentativ für alle weiteren Formulare steht.
- Eine FormValidationHinComponent, welche die Darstellung der Validiation-Hints übernimmt.
- Eine FormAutoValidationHintDirective sowie eine FormAutoValidationHintLocationDirective, welche die Automatisierung der Anzeige übernehmen und es ermöglichen, Fehler an einer spezifischen Stelle und nicht nur Direct am FormControl anzuzeigen.
Ein kleiner Hinweis: Fürs Aussehen habe ich Tailwind mittels dieser Zeile in der index.html inkludiert:
<script src="https://cdn.tailwindcss.com"></script>
Für das richtige Einbinden in produktive Applikationen bitte entsprechend das NPM-Package nutzen.
Das Design der Login Form habe ich von
SOCIAL SHARE CARD GENERATOR