Philosophie

Jedes etablierte Projekt sollte eine Philosophie haben, die seine Entwicklung leitet. Ohne eine Kernphilosophie kann die Entwicklung in endlosen Entscheidungsfindungen verkümmern und als Ergebnis schwächere APIs haben.

Dieses Dokument beschreibt die Kernprinzipien, die die Entwicklung und den Funktionsumfang von TanStack Form antreiben.

APIs sind mit Kompromissen verbunden. Daher kann es verlockend sein, jeden Kompromiss durch verschiedene APIs für den Benutzer verfügbar zu machen. Dies kann jedoch zu einer fragmentierten API führen, die schwieriger zu lernen und zu verwenden ist.

Auch wenn dies eine höhere Lernkurve bedeuten mag, bedeutet es, dass Sie sich nicht fragen müssen, welche API intern verwendet werden soll, oder einen höheren kognitiven Aufwand beim Wechsel zwischen APIs haben.

TanStack Form ist flexibel und anpassbar konzipiert. Während viele Formulare ähnlichen Mustern folgen können, gibt es immer Ausnahmen; insbesondere wenn Formulare eine Kernkomponente Ihrer Anwendung sind.

Daher unterstützt TanStack Form mehrere Methoden zur Validierung

• Zeitliche Anpassungen: Sie können bei Verlust des Fokus, Änderung, Absendung oder sogar beim Mounten validieren.
• Validierungsstrategien: Sie können einzelne Felder, das gesamte Formular oder eine Teilmenge von Feldern validieren.
• Benutzerdefinierte Validierungslogik: Sie können Ihre eigene Validierungslogik schreiben oder eine Bibliothek wie Zod oder Valibot verwenden.
• Benutzerdefinierte Fehlermeldungen: Sie können die Fehlermeldungen für jedes Feld anpassen, indem Sie bei einem Validator ein beliebiges Objekt zurückgeben.
• Asynchrone Validierung: Sie können Felder asynchron validieren und gängige Hilfsmittel wie Debouncing und Abbruch werden für Sie behandelt.

In einer Welt, in der kontrollierte vs. unkontrollierte Eingaben ein heißes Thema sind, ist TanStack Form fest im kontrollierten Lager angesiedelt.

Dies hat eine Reihe von Vorteilen

• Vorhersehbar: Sie können den Zustand Ihres Formulars jederzeit vorhersagen.
• Einfacheres Testen: Sie können Ihre Formulare einfach testen, indem Sie Werte übergeben und die Ausgabe überprüfen.
• Nicht-DOM-Unterstützung: Sie können TanStack Form mit React Native, Framework-Adaptern für Three.js oder jedem anderen Framework-Renderer verwenden.
• Erweiterte bedingte Logik: Sie können Felder einfach bedingt ein-/ausblenden, basierend auf dem Formularzustand.
• Debugging: Sie können den Formularzustand einfach in der Konsole protokollieren, um Probleme zu beheben.

Sie sollten niemals ein Generic übergeben oder einen internen Typ verwenden müssen, wenn Sie TanStack Form nutzen. Dies liegt daran, dass wir die Bibliothek so konzipiert haben, dass alles aus Laufzeitstandards abgeleitet wird.

Wenn Sie ausreichend korrekten TanStack Form-Code schreiben, sollten Sie keinen Unterschied zwischen JavaScript- und TypeScript-Nutzung feststellen können, mit Ausnahme von Typumwandlungen, die Sie möglicherweise von Laufzeitwerten durchführen.

Anstatt

useForm<MyForm>()

useForm<MyForm>()

Sie sollten tun

interface Person {
  name: string
  age: number
}

const defaultPerson: Person = { name: 'Bill Luo', age: 24 }

useForm({
  defaultValues: defaultPerson,
})

interface Person {
  name: string
  age: number
}

const defaultPerson: Person = { name: 'Bill Luo', age: 24 }

useForm({
  defaultValues: defaultPerson,
})

Eines der Hauptziele von TanStack Form ist, dass Sie es in Ihr eigenes Komponentensystem oder Designsystem integrieren sollten.

Um dies zu unterstützen, haben wir eine Reihe von Dienstprogrammen, die den Aufbau eigener Komponenten und angepasster Hooks erleichtern

// Exported from your own library with pre-bound components for your forms.
export const { useAppForm, withForm } = createFormHook(/* options */)

// Exported from your own library with pre-bound components for your forms.
export const { useAppForm, withForm } = createFormHook(/* options */)

Wenn Sie dies nicht tun, fügen Sie Ihren Apps erheblich mehr Boilerplate hinzu und machen Ihre Formulare inkonsistenter und weniger benutzerfreundlich.