TanStack

TanStack is a community of passionate software engineers striving for high-quality, open-source software for web devs

Join

TanStack

TanStack is a community of passionate software engineers striving for high-quality, open-source software for web devs

Join

react-query-questions

solid-query-questions

table-questions

virtual-questions

router-questions

react-charts-questions

ranger-questions

vue-query-questions

svelte-query-questions

bling-questions

form-questions

angular-query-questions

start-questions

db-questions

start-showcase

router-showcase

📣-announcements

rare-sapphire

4/16/2025

Need to re-visit unmounted fields in order for the validators to update the errors

Hello! I've encountered a pretty strange behaviour in my form setup. Here's a minimal reproducible example showcasing this issue I'm facing. https://stackblitz.com/edit/vitejs-vite-p3tjgchh?file=src%2Fmain.tsx This form is organised in multiple tabs, and has two submit actions; publish and draft. These two actions have different requirements (schemas). I found that sometimes the form won't let me submit a draft even though it should because it still has some errors of the previous "publish" validation. In order to mitigate this I'm using canSubmitWhenInvalid, but I'm getting a pretty inconsistent behaviour if some of the fields are not mounted on the DOM....

manual-pink

4/15/2025

Form state is inconsistent when using with server action

The following is a simplified version of what I'm currently doing, which is basically aligned with the example shown in the dic: ```tsx const [{ successReturn, formState }, action, isSubmitting] = useActionState( submitForm,...

continuing-cyan

4/15/2025

Server Side validation as part of submit: Handling 422 responses

I do not want to use client side validation: My server side mutation (tanstack query) does the validation and responds with a 422 error response which contains the validation errors. This pattern is necessary anyway, when you have validation issues, that might depend on complex database state, which can only be checked in the same transaction you would like to change and commit the data. However, in the docs I do not see a good way how to do that. So, as of now I do...

old-apricot

4/14/2025

TypeScript Error: "Property 'Field' does not exist on type 'AnyFormApi'" when accessing form.Field

Hello everoyne, I have a react component which i want to use to render a form UI. To this component i want to pass a form as a prop which I do using form: AnyFormApi And then later on when i am rendering the actual form and do:...

gradual-turquoise

4/12/2025

Adding to an array field outside of the field.

I have a separate button that I want to populate the field that isn't inside the field. How would I go about inserting it?

extended-salmon

4/12/2025

using i18n (react-i18next) with tanstack form

How do I use i18n with ts form in a typesafe way? Currently I'm doing it like this: ```ts //validation.tsx export const zCreateTaskInputSchema = (t: TFunction<'tasks'>) => z.object({...

gradual-turquoise

4/12/2025

Sub form separate submit/validation

I basically have a multi-page form and I believe using withForm would be a perfect addition for this feature. I'm looking to maintain one form with specific validators for each page. One page might build upon data from another. E.g. page 1 should validate title and list of friends E.g. page 2 should validate each friend has a correct phone number ...

conscious-sapphire

4/11/2025

Is it possible that autocomplete does not work for tanstack form?

I have a basic tanstack form with 3 fields email and pass and repass and for some reason the autocomplete doesn't work, if I copy a plain form it works fine. I tried to 1pass, lastpass. What could be the problem? Thanks for the answer in advance....

rare-sapphire

4/11/2025

Is it possible to alternate between validation schemas depending on the action being performed?

Hi there! I've been trying to find a solution to this problem I'm facing but I feel like I'm hitting a wall here... I have this huge form that needs to be filled manually with data extracted from a PDF file. Right now I'm using a zod schema to run the validation and it's working as expected. The problem comes when I need to add a "Save draft" button, because the "complete" and "draft" versions have different requirements even though they have the the same structure (AKA some of the required fields in the "complete" version are optional for the "draft"). I've created a simple example to showcase this issue and how I'm approaching it:...

correct-apricot

4/11/2025

Conditionally rendered fields validation

Is there a better way to check validation for conditionally rendered fields? Here is an example of what I have got working: ```...

correct-apricot

4/11/2025

Clearing errors for linked fields

https://stackblitz.com/edit/tanstack-form-jgfxxqwd?file=src%2Findex.tsx Repro of issues on stackblitz: Issue 1 Toggle 'show people' to true...

metropolitan-bronze

4/10/2025

isSubmitting issue in NextJs tanstack Form with demonstration repo

Hello there! I love tanstack form but the isSubmitting is driving me crazy. It's such a simple use case still I was able to spend 3h trying to figure out the difference between two repos, one working one not. ...

vicious-gold

4/10/2025

export interface FormButtonProps<TFormData> extends ActionButtonProps { form: ReactFormExtendedApi

Generic type 'ReactFormExtendedApi' requires 10 type argument(s).ts(2314) (alias) type ReactFormExtendedApi<TFormData, TOnMount extends undefined | FormValidateOrFn<TFormData>, TOnChange extends undefined | FormValidateOrFn<TFormData>, TOnChangeAsync extends undefined | FormAsyncValidateOrFn<TFormData>, TOnBlur extends undefined | FormValidateOrFn<TFormData>, TOnBlurAsync extends undefined | FormAsyncValidateOrFn<TFormData>, TOnSubmit extends undefined | FormValidateOrFn<TFormData>, TOnSubmitAsync extends undefined | FormAsyncValidateOrFn<TFormData>, TOnServer extends undefined | FormAsyncValidateOrFn<TFormData>, TSubmitMeta> = FormApi<TFormData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TOnServer, TSubmitMeta> & ReactFormApi<...> import ReactFormExtendedApi why this typeError comed.Has any update happened in TanStack? ? how can i fix this error?...

deep-jade

4/10/2025

Array of Objects with unique IDs

What's the way to go to handle ```ts type Person = { id: string; firstName: string;...

harsh-harlequin

4/9/2025

How to use form composition ui component blocks for subfields

I follow examples and its straightforward and nice to be able to reuse declare field components, like field.TextField etc, but in the example again, its not certain how to use those ui components for subfields when form has array fields.

const field = useFieldContext<string>()

const field = useFieldContext<string>()

...

crude-lavender

4/9/2025

Is there a way to have a custom onChange handler for AppFormFields ?

I have a form that have a name field and a slug field. I am using form composition to create the form like this: ```ts...

fair-rose

4/9/2025

Form field error type

Hi there! I'm using TanStack form with Zod Validation and was wondering if it's correct, that errors are of type any and I have to cast them to ZodIssue. I followed the basics examples on the website. Am I missing something? Form looks like this:...

extended-salmon

4/8/2025

Default Values handling VUE form

`const defaultValues = computed(() => ({ rocketType: { value: device.value?.data.brand.id '', label: device.value?.data.brand.name '' }, launchModel: { value: device.value?.data.model.id '', label: device.value?.data.model.name '' }, orbitZone: { value: timezone.value null, label: timezone.value null }, pilotProfile: {...

stormy-gold

4/7/2025

Validating a form with sections

Hi I'd like to make a form that has sections (so the overall data structure is smth like ``` type FormData = { key_1: DataForKey1;...

crude-lavender

4/7/2025

Submitting form with Axios

I wanted to submit a TanStack Form with Axios, but how can I handle an error that might be thrown inside the onSubmit function? Or is this not the right way to go? Let's say, I have a login form, which should validate on client side if username and password were entered. Then I would pass the data to the onSubmit function and send it to the server where it is also validated and a token is created and returned if the user is valid. Or otherwise an error should be returned. Thank you if you can help me....

Previous Next

Gaming

Programming

TanStack

TanStack is a community of passionate software engineers striving for high-quality, open-source software for web devs

TanStack

TanStack is a community of passionate software engineers striving for high-quality, open-source software for web devs