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

robust-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:...

conscious-sapphire

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?

like-gold

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({...

conscious-sapphire

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 ...

evident-indigo

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....

sensitive-blue

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:...

absent-sapphire

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: ```...

absent-sapphire

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...

correct-apricot

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. ...

stormy-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?...

automatic-azure

4/10/2025

Array of Objects with unique IDs

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

conscious-sapphire

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>()

...

fair-rose

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...

equal-aqua

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:...

deep-jade

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: {...

absent-sapphire

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;...

correct-apricot

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....

fair-rose

4/6/2025

What is the correct way to validate image files using zod validator?

I tried doing something like this: ```ts const ACCEPTED_IMAGE_TYPES = ['jpeg', 'jpg', 'png', 'webp']; const formSchema = z.object({ ...

optimistic-gold

4/5/2025

form.Field TS Error: Property name does not exist on type IntrinsicAttributes

When I try to use <form.Field /> Typescript is complaining that the name property does not exist, even though hovering over Field the type looks correct to me. I cannot reproduce this on codesandbox unfortunately, there it just works so I guess it's something with my setup? I'm on React 19, Nextjs 15, Tanstack Form ^1.3.0

probable-pink

4/5/2025

Getting redirected on submitting a form with TanStack start server functions.

Is this a problem on the Start side or am I doing something wrong? I was following the SSR guide on the form docs.

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