Balastrong's Tutorial

TanStack Form Maintainer Balastrong hat eine Reihe von Video-Tutorials erstellt, die die relevantesten Funktionen der Bibliothek vorstellen. Sie finden Schritt-für-Schritt-Anleitungen, die Ihnen zusätzliche Einblicke in das geben, was Sie mit TanStack Form erstellen können, sowie einige nette Tipps und Tricks.

Sehen Sie sich die vollständige Playlist an

1. Setup und Validierung

Die ersten Schritte in TanStack Form zum Erlernen aller Grundlagen, vom Einrichten der Bibliothek bis zur Erstellung eines einfachen Formulars mit Textfeldern und Validierung (synchron, entprellt und asynchron). Video ansehen (8:16)

2. Erweiterte Validierung

Ein Beispiel für die Validierung von Daten über eine Backend-API, während eine reibungslose Benutzererfahrung durch die Steuerung des Ladestatus, von Fehlermeldungen und verknüpften Feldern gewährleistet wird. Video ansehen (8:05)

3. Array-Felder

Umgang mit Array-Feldern mit Primitiven (Zeichenketten, Zahlen) und Objekten (verschachtelte Felder) mit Validierung und Neuordnung. Video ansehen (6:53)

4. Reaktivität

Erfahren Sie, warum Formularwerte möglicherweise nicht in Echtzeit aktualisiert werden, warum dieses Verhalten beabsichtigt ist und wie Sie UI-Updates effizient auslösen. Video ansehen (4:26)

5. Formularvalidierung mit Schema-Bibliotheken

Verwenden Sie Schema-Bibliotheken wie zod, yup oder valibot, um Ihr Schema mit Validierungsregeln zu definieren. Übergeben Sie es über einen Adapter an TanStack Form, um alle Felder auf einmal zu validieren. Video ansehen (6:29)

6. Nebeneffekte und Listener

Ähnlich wie bei Feld-Validatoren können Sie Ereignisse an Feld-Listener anhängen und darauf reagieren, z. B. um ein Feld zurückzusetzen, wenn sich ein anderes Feld, von dem es abhängt, geändert hat. Video ansehen (5:50)

7. Komponierbare Felder für große Formulare

Mit den Composition APIs können Sie wiederverwendbare Komponenten erstellen, die vorab gebunden und mit einem generischen Formular-Kontext verbunden sind, wodurch wiederholender Code in allen Formularinstanzen in der App erheblich reduziert wird. Dies ist besonders nützlich für große Formulare mit vielen Feldern. Video ansehen (11:01)