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

other-emerald

6/19/2025

Show API validations in the Form

I validate my forms on the backend, here's an example ```json { "json": { "defined": false,...

other-emerald

6/19/2025

uestion: Coercing FormData values for server-side Zod validation

Hey everyone! I’m using Zod for validation both on the client and server. On the client, validation works perfectly. But when I send the form to a server action using FormData, things fall apart. Specifically: The browser correctly sends all form fields as strings, but my server-side schema expects num to be a number: ```ts...

fascinating-indigo

6/17/2025

onChangeAsync errors not in the form state errors

I noticed something: When we have a field with onChangeAsync validation, the error throwed by the validation doesnt update form state errors (form state errors is still empty, even though canSubmit and isValid are falses). Is this a bug or intentional?...

fascinating-indigo

6/17/2025

How to async load defaultValues from a global state?

I should load my defaultValues for useAppForm from a global store. However, i dont want to block the rendering of the form with a loading or a spinner, so i am doing this: ``` useEffect(() => { form.setFieldValue('delivery_method', delivery_method)...

harsh-harlequin

6/17/2025

dependent select dropdowns

I have a requirement where I need one form dropdown to trigger the options in another based on the selection. The common general use case for this would be the example of three dropdowns about location. The first is often the 'city', the second 'town' and the third would be the 'suburb'. Obviously the child options are not available until the parent has been selected. I use this pattern in react-hook-form and I now have it working with tanstack form, but I'm using listeners to achieve this. But it doesn't seem quite right. I was wondering if anyone has had any experience with this for tanstack form? ...

inland-turquoise

6/17/2025

Correct validation/error display on both field and form components

I'm curious what everyone's using. I love tanstack form but I feel it's difficult to achieve good defaults on the form and field validation - using zod v4 for useAppForm.validators. What I have right now: ```tsx...

deep-jade

6/13/2025

Validation schema withtout default value keys

Is there a way to use a validation schema with missing default values keys : Something like this : const userSchema = z.object({...

wise-white

6/12/2025

Reset isDefaultValue

Hi! Is there a way to say that the current form state is the new DefaultValue? I need it because when I submit a form I want it to reset....

quickest-silver

6/10/2025

Remove value from the form on field unmount

I have 2 fields: name and description. The description is optional, and there is logic that hides the description field. By saying "hides," I mean this: ```tsx...

eastern-cyan

6/9/2025

Should I preventDefault with Next.js server actions?

I am using Next server actions, but I want to include client side validation that prevents submit if there are any errors. If I include e.preventDefault, nothing happens. If I exclude e.preventDefault, the post is always sent. When I try to type into the input again, it does not change the value until 2 characters are entered. ``` const [state, action] = useActionState(logExample, initialFormState); ...

wee-brown

6/6/2025

How to get data from a backend api validation in the onSubmit?

I'm migrating an app from Conform to Tanstack Form, and i had this kind of validation ```ts const submission = await parseWithZod(formData, { schema: (intent) => schema.transform(async (data, ctx) => {...

wise-white

6/6/2025

Recommended way to get fields errors in a "form composition" scenario

I used to only do that:

const field = useFieldContext<string>()
const errors = field.state.meta.errors

const field = useFieldContext<string>()
const errors = field.state.meta.errors

...

ambitious-aqua

6/4/2025

Not using index as key while looping values lead to `field.state.value is undefined` when deleting

Here is my minimal example of one of my complex forms in a project: ```ts const formOpts = formOptions({ defaultValues: { values: [] as { id: number; value: string }[] }, });...

dependent-tan

6/3/2025

Zod optional value in schema complains with default value

Hey team, I'm running into an issue where if my zod schema has an optional value in it, and I set that defaultValue then I get a type error. I don't have a reproduction, but if you go to https://tanstack.com/form/latest/docs/framework/react/examples/standard-schema?panel=sandbox and change a value to optional you can see the type error in the sandbox (I've included screen shots). I would have thought that a zod schema that is optional string should allow a default of string and not complain that...

fair-rose

6/3/2025

How do you manage fields with the type `Record<string, ...>` ?

I wonder if it is possible to have such field value with TanStack Form. Pretty sure it should (and is) but the types seem wrong: ```ts function App() { const form = createForm(() => ({ defaultValues: {...

vicious-gold

6/3/2025

Form Composition + Object

Hey! Loving Form so far. I've come across a more complex use case that I'd love some help with. I have the following zod set up: ``` address: z.object({ address1: z.string().min(1, 'Address is required'), address2: z.string().optional(),...

robust-apricot

6/2/2025

defaultValue and defalutState.value

Hi guys, I have question regarding filling up initial form values While using form I had this expectation for my needs: defaultValue: the 'empty' value of each field, for example when there is no defaultState.value the defaultValue is used as initial value or when user resets the form the defaultValue is used defaultState.value: the 'initial' value for each field, for example when I want to prefill certain fields or load the values from datasource for 'edit mode'....

itchy-amethyst

5/31/2025

isDefaultValue remains false after successful form submission

Hey guys, after successfully submitting a form and invalidating the data, the newly introduced isDefaultValue remains false, while it should become true. Has anyone experienced this issue?

gradual-turquoise

5/30/2025

I've identified some structural issues with form core and would like to suggest improvements.

- FormApi: 1000+ lines, 19 generic parameters - FieldApi: 800+ lines, complex validation logic - Memory leak risks (timers/AbortControllers) - Difficult to test and maintain ...

like-gold

5/29/2025

Is it expected to have validations run multiple times when submitting a form?

so if I have a zod schema and I want to run more narrow validations without having to parse my zod error schema, is it expected that this onChangeAsync function runs once after the change/debounce and again when the field is submitted? In my current form I am making an API request, but I am essentially making a double request once after the change and another when I submit the form. Am I expected to have these validators run twice if I implement my form this way? ```tsx const schema = z.object({ name: z.string(),...

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