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

1/15/2025

is it possible to use form values as a useMemo dependency ?

so i have this ```typescript const calculatedTotal = useMemo(() => { ...

rare-sapphire

1/14/2025

form.setFieldValue with field array

I have a form defined like this: ``` const form = useForm<Partial<Recipe>>({ defaultValues: {...

generous-apricot

1/14/2025

Question about field.state.value typing with Vue

Hi, I'm new to this library and fairly new to TS, so please excuse the probably silly question. However, I've followed the async initial values example for Vue from the docs, and I'm finding that the TS linter is complaining because the possible types of the field.state.value across all fields is shown as all the types contained in the type I passed to useForm. However, for each field the types are limited by the model-value prop for the respective input/control type. I managed to fix this yeste...

adverse-sapphire

1/6/2025

Has anyone faces issues with rerenders in vite react project?

I created new app using vite-create-app and copypasted code from tanstack example. I checked rerenders with react dev tools and saw that it rerenders every field even when i change only one. Has anyone faced the same issue?

adverse-sapphire

12/26/2024

Validate single field when change happend

Hello everyone! I have a problem with next case: I have form with couple of fields, also I have my validation schema written using yup. That schema validates whole form, but I want to validate single field when user types anything there. Currently it looks like this ```<form.Field name={item.name as keyof FormSchema} key={index}...

rising-crimson

12/22/2024

Validation on form unfocus

Hi, i have this form https://stackblitz.com/edit/vitejs-vite-nkfr5ek6?file=src%2FApp.tsx 1) on initial render validation works correctly, if you click inside the input and type 2 letters and then unfocus the errors are displayed....

sensitive-blue

12/20/2024

[Partially solved] SSR/NextJS: "A component is changing an uncontrolled input to be controlled ..."

Hi all, I just followed this guide to get set up with TanStack Form + NextJS: https://tanstack.com/form/latest/docs/framework/react/guides/ssr I have been careful to pour over the code multiple times, and I believe I'm doing everything that the tutorial is doing, besides client-side validation (for the moment), and yet I still get the error/warning in the console that an input field is changing from uncontrolled to controlled. I've added logging to see that, indeed, the initial value of the inputs is undefined before being updated to empty string....

wee-brown

12/19/2024

Reactivity & form.Subscribe

I think this is a super basic question, but when I read the reactivity docs and see an example like pictured I know how to use the snippets with 'const...'. But how are you doing things like <form.Subscribe...? If I type that in VS code it doesn't like it at all whether inside our outside my render. There is no <form.Subscribe. I'm missing something fundamental here that I think will unlock much better use of the documentation. Help greatly appreciated. ❤️...

foreign-sapphire

12/19/2024

Generic Form Components

I figured Id drag my post from the general channel, over to here as I've hit a wall with the Ts that I'm working on. Here's my code sandbox https://codesandbox.io/p/sandbox/yv7zmh demo, and the original post that i made in general https://discord.com/channels/719702312431386674/1100437019857014895/1318637134667583508 Basically, I wanted to carry on from the discussion on this issue (https://github.com/TanStack/form/discussions/636) to open a PR with some documentation on reusable components. It's something that I'm trying to get working at work but I'm having massive Ts performance hits, and so I think it might be a good time to reach out to someone more familiar with the matter. ...

wee-brown

12/19/2024

Possible to update Zod schema and revalidate?

I have a toggle that makes an additional field required. I only want to validate it when the toggle is on. So I'm trying to merge in the additional Zod schema and validate against it. For this I have a useEffect (pictured) to listen for the toggle to change in form.store and merge an additional Zod schema. And it works! ...when I toggle it on. My otherwise valid form goes to canSubmit: false. However if I turn the toggle off it should be going back to the initial schema and validate the form. However this does not happen: the form stays in canSubmit: false and the fieldMeta for the unrequired field still displays an error....

constant-blue

12/14/2024

Using Suspense with form.Field

It's ok using suspense under form.field? Example: '''return ( <form .....>...

constant-blue

12/14/2024

Any ideas for this use case?

I'm dealing with a complex form with dropdowns, inputs, datepickers, etc. Most of these inputs are rendered conditionally based on other previous selections, apart from that some dropdowns get data from APIs. I need to split this big form in chunks and add some suspense wrappers....

rising-crimson

12/13/2024

Accessing Valibot schema params?

I have a schema: ``` import * as v from 'valibot'; ...

sunny-green

12/12/2024

undefined field.state.meta.errors

For some reason one field of my form is initializing with an undefined field.state.meta.errors. I'm not using form.setFieldMeta on this field. I checked the types, I checked the initial values. Any clues of what could possibly cause this? Below are two components of the form: <form.Field...

constant-blue

12/12/2024

Best approach for this use case?

I have a form with 2 tabs. It's a single schema using discriminatedUnions. If you click on tab A, it will display all the fields required for that variant, same if you click on the tab B. The thing is, for tab A I have this requirement:...

constant-blue

12/11/2024

canSubmit is true in onSubmit validator

I'm wondering why canSubmit is true when I choose onSubmit validation. Shouldn't be false because the form is not valid?

robust-apricot

12/10/2024

Array field get inferred as type never[]

When passing the empty array as a default value to an array field, it gets inferred as never[] instead of the type inferred from zod schema. And in general, it gets inferred as the type of whatever I pass to default value. Is this intended behavior?...

robust-apricot

12/10/2024

form.useStore is not a function

Version 0.39.0

passive-yellow

12/1/2024

React Aria Components Integration for TanStack Form

TanStack Forms currently does not expose a field ref, which makes it challenging to integrate with React Aria components. React Aria relies on assigning a ref to the input component for accessibility and focus management, but TanStack Forms lacks documentation or examples for this integration. Please provide an integration guide or example in the documentation for using TanStack Forms with React Aria components, similar to how React Hook Form handles this scenario. Here's an example of how React Hook Form integrates with React Aria: ``` import { Controller, useForm } from 'react-hook-form';...

equal-aqua

11/27/2024

Reusable Forms

Disclaimer: I think this came up already but I can't find it I have an Address-Form where I collect the Street, Postalcode and City of the user. I want to re-use the form for multiple purposes (Sign-Up, User-Profile, and Invoicing) ...

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