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

conscious-sapphire

3/27/2025

onBlur form field validator doesn't seem to do what I expect it to do

<form.Field name="price" validators={{ onBlur: ({ value }) => value < 8...

conscious-sapphire

3/27/2025

IsSubmitting not working nextjs server action submit

Hey Everyone, I used the tanstack form nextjs example but the issubmitting is not working. <form.Subscribe...

sunny-green

3/26/2025

Re-using a generic sub-form agnostic of it's parent form gives TS errors

Hi! First off: thanks for creating an amazing form library. I'm super happy with it so far! Really good stuff. What I've stumbled across may just be a typescript bug. I'm not sure if it's me using the library wrong, if it's a bug or if it's simply not supported. But what I'm trying to do is to have two separate forms (with different schemas) re-use the same sub-form by leveraging the withForm-HoC. ...

deep-jade

3/25/2025

Updating field meta errors from server validation

Following the Tanstack Start example - I am trying to update field meta errors from server validation. The state coming from the form is merged - and the errors and the error map shows correctly in the form state. However, the errors are not trickled down to field level. I tried to use setFieldMeta from form level but the errors do not make it to the field. Here is the basic setup: ```useEffect(() => {...

like-gold

3/25/2025

Usage of createFormHookContexts and getting basic type of form

While I've seen a couple of threads touching some similar questions, I wanted to ask this once more explicitly: 1. Am I right that I run createFormHookContexts ONCE per application and have all forms in my app -although totally unrelated- using the same useAppForm hook based on the createFormHook using the above defined context? Do I need to wrap my application in the "formContext" (like used to with other createContext's using formContext.Provider)? 2. What is the recommended/easiest way to keep my old behavior on passing the formApi to hooks that MUST NOT BE Functional Components, i.e., hooks. While withForm() allows to wrap my FC's and force them to take a form, i have plenty of hooks (useXXXX) that also need to access the form + need to know the overall DataType. My current approach (using the 1.X version) is doing as following:...

correct-apricot

3/25/2025

Handling zod and backend errors

Assume, there is a form-level validation for fields - this is zod. Another validation happens during submit - backend API can return submission errors, e.g. "username taken". How can I store and handle those backend errors? I was thinking useState with backend errors which are returned in another form-level validator. However, having any errors in the form will block submission (canSubmit is then false and onSubmit won't be triggered). Am I missing any obvious solution? Beside clearing each field backend errors on change - I would prefer to handle it on form level instead of pushing listeners to each field....

optimistic-gold

3/24/2025

Can I add more on an validator onChange besides zod validator?

Currently the docs show this: ```ts validators: { // DEMO: You can switch between schemas seamlessly onChange: ZodSchema,...

adverse-sapphire

3/24/2025

React hook to extract errors?

I got the following hook, I'm not sure how to properly take the message for StandardSchema errors, any insight would be great! We basically always use either string OR zod for validators. ```ts const useFormatErrors = (errors: unknown[]): string[] => { return errors.map((error) => {...

stormy-gold

3/23/2025

mode="array" with appField in dynamic array

Hey, I have a bit of a complicated usecase I think. I have a dynamic form in which a user can add different segments to it (these segments or subforms can vary based on what the user selects). I build an AppField component for this segment and added it to my createFormHook under the fieldComponents (Let's call it ExamSegmentField). In my main form I now want to show all the segments the user has added like so:...

optimistic-gold

3/21/2025

form.Field ts error

Hi! Im currently facing an issue, i found a hacky workaround but i wonder why Ts yells like this when using form.Field as a component Ive attached the ts error and my useForm invocation....

correct-apricot

3/20/2025

eslint no-unused-var triggers on AppField rendering (vite/react/js)

Any idea why would pnpm create vite my-react-app --template react with tanstack form mark this field as unused var? Ofc it goes away if I destruct const { Component } = field;, but I prefer to keep this inlined. ```jsx <form.AppField name="{name}">...

correct-apricot

3/20/2025

Suggested way of handling multiple checkboxes with indeterminate state on group headers

Hi there. I am looking through docs and trying to find the best/easiest approach for checkbox grid, where each "header" toggles entire group, and each item in group can set "header" checkbox to indeterminate state. I was looking through api, specifically useStore, Subscribe, transform, listeners, Linked fields etc and I am not sure which approach would render the easiest solution with Tanstack Forms philosophy. I'm trying to avoid splitting the code too much as so far I only got mess of passthrough checked/indeterminate states. I have:...

deep-jade

3/20/2025

array with form composition

How can I use https://tanstack.com/form/latest/docs/framework/react/guides/arrays arrays with form composition. There are no examples of it and I cant type the useFormContext hook to make it work

flat-fuchsia

3/20/2025

Form data after validation

Hi, in the validators, the formdata gets decoded and validated but the decoded formdata is not returned when validation is succesfull. I was wondering what the reasoning behind that was?

fair-rose

3/19/2025

canSubmit true on mount

Hey everyone! I’m using TanStack Form v1 with Valibot for validation in a sign-in form. I ran into canSubmit is true on mount: My "Sign In" button uses form.Subscribe with state.canSubmit, but it’s enabled on mount even though the form is invalid (empty fields). I want it disabled until all fields pass validation.

apparent-cyan

3/19/2025

Zod Types not inferring

Hey! Love this library I just encountered a strange error and I am unsure if its a Tanstack error, Zod or zod-drizzle error. I just wanted to mention this in case other run in to the same bug....

xenial-black

3/19/2025

formOpts.onSubmit example

Does anyone have an example of how to move their onSubmit() to the formOpts? I would need to pass quite a bit of state and I can't figure it out. It would be really nice if I could set new state for tanstack store for postError to use in the onSubmit as well so I could then use it in A form component without passing it as props.

extended-salmon

3/18/2025

Tanstack Form + Start with isSubmitting handling?

I'm trying to use Tanstack Form + Start together. I can get it mostly working. But, I never see isSubmitting as true, so the UI doesn't show the pending state. The example at https://github.com/TanStack/form/tree/main/examples/react/tanstack-start has this problem, as does the integration guide for Start + Form at https://tanstack.com/form/latest/docs/framework/react/guides/ssr I think it's because they both use

  <form action={handleForm.url} method="post" encType={'multipart/form-data'}>

  <form action={handleForm.url} method="post" encType={'multipart/form-data'}>

, instead of handling submit themselves. ...

other-emerald

3/18/2025

How do I use a form with React Query for debounced search/filter?

I just tried using TanStack React Form, and I want to use it with React Query for a searching feature. But how can I get a debounced value that I can pass to React Query to reduce requests on change? Should I use a custom hook, or does TanStack Form have that feature?...

xenial-black

3/17/2025

Forms with a CMS

All the examples show building forms with static name fields to maintain strict typing. With a CMS like Payload I do not know the names ahead of time. The issue I have is I need to create wrappers around a withForm() component so I can pass the function that generates the def ault fields. This works fine besides having to pass the form as a prop typed as any. Has anyone figured out a clean way of creating reusable components and fields this way? Another wall was useFormContext() returns a form w...

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