Mitarbeiterprofil-Formular
Ein produktionsnahes `react-hook-form`-Beispiel zusammen mit einer kompakten Referenz zum Formularzustand.

useForm

Erzeugt die Formular-API, Default-Werte, den Validierungsmodus und den State, aus dem alles andere liest.

register

Verbindet native Inputs mit dem Formular und hängt Regeln ohne zusätzliche Wrapper an.

controller

Bindet kontrollierte Komponenten an denselben Formularzustand an, wenn direkte Registrierung nicht möglich ist.

reset

Stellt Default-Werte wieder her, löscht Fehler und kann Teile des aktuellen Zustands behalten.

Zustandsinteraktionen

Initiales Rendern

Pflichtfeld: Regeln sind registriert, aber unberührte Felder zeigen meist noch keine Fehler.

Geändert: `isDirty` ist false, weil Werte noch den Defaults entsprechen.

Gültigkeit: `isValid` hängt vom gewählten Validierungsmodus ab.

Zurücksetzen: `reset()` kehrt zu dieser sauberen Basis zurück.

Gültiger Nutzereingang

Pflichtfeld: Die Pflichtfeldregel ist jetzt erfüllt.

Geändert: Der Dirty-State wird true, weil sich der Wert vom Default unterscheidet.

Gültigkeit: Die Gültigkeit wird true, sobald Validierung läuft und keine weiteren Fehler mehr bestehen.

Zurücksetzen: `reset()` stellt den Originalwert wieder her und löscht den Dirty-State.

Pflichtfeld wieder leeren

Pflichtfeld: Das Feld verletzt erneut die Pflichtfeldregel.

Geändert: Das Feld bleibt dirty, bis es wieder exakt dem Default entspricht.

Gültigkeit: `isValid` wird false, sobald Validierung läuft.

Zurücksetzen: `reset()` entfernt den Fehler, wenn die Defaults gültig sind.

reset(newValues)

Pflichtfeld: Die Regeln bleiben an den Felddefinitionen hängen.

Geändert: Dirty-Tracking wird gegen die neuen Defaults neu berechnet.

Gültigkeit: Die Gültigkeit wird aus dem neuen Reset-Zustand neu berechnet.

Zurücksetzen: Diese neuen Werte werden zum frischen, sauberen Schnappschuss.

Mitarbeiterprofil-Formular
Diese Seite zeigt react-hook-form mit zehn Feldern und integrierter Validierung.