tanstack-form

TanStack Form to biblioteka do zarządzania stanem formularzy w Svelte 5. Obsługuje walidację pól za pomocą schematów Zod, automatyczne obsługiwanie błędów oraz integrację z odpowiedziami błędów z backendu (ProblemDetails). Schemat walidacji generujesz z modeli backendu i rozszerzasz w poszczególnych modułach aplikacji. Umożliwia obsługę zarówno synchronicznych, jak i asynchronicznych operacji wysyłania formularza.

1. Zainstaluj pakiet @tanstack/svelte-form w swoim projekcie Svelte 5 oraz upewnij się, że masz dostępną bibliotekę Zod do walidacji schematów.
2. Zdefiniuj schemat walidacji Zod w pliku schematów (np. src/lib/features/auth/schemas.ts). Możesz importować wygenerowane schematy z backendu i rozszerzać je o dodatkowe pola lub reguły walidacji za pomocą metody extend() i refine().
3. W komponencie Svelte zaimportuj funkcję createForm z @tanstack/svelte-form oraz swój schemat walidacji. Utwórz instancję formularza, przekazując schemat jako parametr.
4. Powiąż pola formularza z komponentami UI (Input, Button) używając komponentu Field. Każde pole automatycznie będzie śledzić swoją wartość i błędy walidacji.
5. Obsłuż zdarzenie onSubmit lub onSubmitAsync na formularzu. Jeśli backend zwróci błędy w formacie ProblemDetails, użyj funkcji problemDetailsToFormErrors do automatycznego mapowania błędów na odpowiednie pola.
6. Wyświetl błędy walidacji obok pól formularza, korzystając z funkcji mapFieldErrors do formatowania komunikatów błędów.