tanstack-form

TanStack Form with Zod validation in Svelte 5. Form state management, field validation,\nerror handling, and ProblemDetails integration.\nKeywords: TanStack Form, createForm, Field, form validation, zod schema, form errors,\nonSubmit, onSubmitAsync, problemDetailsToFormErrors

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.