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

useful-bronze

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

eastern-cyan

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

conventional-tan

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

conscious-sapphire

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

absent-sapphire

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.

conscious-sapphire

4/5/2025

Using hidden fields

Can't seem to find how you handle a hidden field that has a value set "inside" the field and not on the default values. Use case i'm iterating over "delete" buttons and want to have a form for each thats initialized outside the UI, but with a hidden value corresponding to that "Delete" action. Is there a simple way to achieve this with tanstack forms?...

absent-sapphire

4/5/2025

Activate onChange validation only after submitting once?

```ts useForm({ ... validators: { onChange: ({ formApi }) =>...

absent-sapphire

4/5/2025

Excessive rerenders with SolidJS and classList

https://stackblitz.com/edit/solidjs-templates-zqhzdfcv?file=src%2Findex.tsx Open the preview in a new tab and open up the console. Click and then blur the input field. Console logs 10 rerenders initially and then 4 on each blur. Removing the name attribute fixes the issue. Am I missing something silly? Otherwise I'll post an issue...

plain-purple

4/1/2025

Proper way of passing useForm to child

I am getting the error

(destructured parameter) is undefined

(destructured parameter) is undefined

...

conscious-sapphire

4/1/2025

Nested form with subForm validation

The use case is something like having user: { firstName, lastName, address: { ... }...

eastern-cyan

4/1/2025

Handling defaultValues for a required number field

I know this is more of a general React issue than a TF-specific one, but I didn’t run into it with RHF since they don’t use controlled components by default. I have a required amount field that should be a number. If I use z.number(), I run into the default value issue—I don’t want 0 (bad UX), "" isn’t assignable to number, and undefined causes React’s controlled/uncontrolled warning. Would it be better to keep it as a string (""), then parse it before submission? Or is there a cleaner approach?...

multiple-amethyst

4/1/2025

What is the correct form generic for V1

Hello, I asked a similar question yesterday (thanks all for the help), but wanted to focus the conversation because I'm compromising a lot on typing that I had before V1. In my app, I use forms as props very often. I used to use this type to do that before: ...

exotic-emerald

3/31/2025

Type-Safe name prefix

I’m creating a dynamic form, that gets assembled based on an API response. It consists of a couple of groups of fields. Each group renders many dynamic fields. Dynamic field takes care of rendering an appropriate input based on some value in payload. ...

multiple-amethyst

3/31/2025

Questions regarding migration to 1.x

Hello, I'm migrating from 0.35 to the latest. In my react app, I have a lot of forms that are passed as props so I usually need to type them. I used to do so with:...

generous-apricot

3/28/2025

Form Validator onSubmit seems to be ignored if a field validator is also present

I'm not sure if this is a bug or an issue on my side but I have a weird behavior. I have a onSubmit form validator to validate all my schema on submit. This work well. Then I also want to have an onChange validator specific for field where I want to validate while the user type or blur. This also work on the field level....

optimistic-gold

3/28/2025

Error Using Zod as Form Validator

I was planning to migrate my form from RHF to TF and tried implementing a simple user validator using Zod, but I encountered an error

xenial-black

3/27/2025

Setting a Form wide error

How can I set a form wide error? e.g. not related to a particular field.

deep-jade

3/27/2025

Next js server actions with tanstack form and zod

I've been looking at the tanstack form validation with the zod schema. I've followed the documentation and made a client side component with zod and everything works great. Now i've been looking at the Next Server Actions example https://tanstack.com/form/latest/docs/framework/react/examples/next-server-actions?path=examples%2Freact%2Fnext-server-actions%2Fsrc%2Fapp%2Fclient-component.tsx And if I try that it works fine as well, however when I try to add the zodSchema validator the formErrors that were previously undefined now give a Record<string, StandardSchemaV1Issue[]> | undefined)[] from zod. It is unclear to me how I now would throw/show the right errors in this case. And is it possible in the action.ts to use the zod schema as well instead of using onServerValidate and then throw custom errors in case someone somehow passed the client side validation?...

eastern-cyan

3/27/2025

Strict mode gives weird ts errors

hello, why do i getBinding element 'isSubmitting' implicitly has an 'any' type and Parameter 'field' implicitly has an 'any' type. for every field or state in the form. form works and i see correct types when hover, no any at all `import { createFormHook, createFormHookContexts, formOptions } from '@tanstack/react-form' export const { fieldContext, formContext, useFieldContext, useFormContext } = createFormHookContexts() export const { useAppForm, withForm } = createFormHook({ fieldContext,...

inland-turquoise

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

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