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

fair-rose

2/6/2025

Visible fields are always isTouched

I'd really like to use the isTouched meta value on fields but I've yet to see a field on the page with isTouched: false. No matter how I initialize or defaultValue to null, the fields are always isTouched. The only ones I've been able to have not touched are ones that are hidden. What am I missing - how can initialize a form with visible fields and not touch them?...

fair-rose

2/6/2025

How to sync with external store like Zustand?

Hey there 👋 what is the best way to sync the form store with an external store? I am using Zustand to initialize form values and also to persist form store values using Zustand's persist() middleware. My current solution utilizes the internal Store api to subscribe to store changes. I then update the Zustand store with new store values as they come. In the following snippet, you'll see that I have tried subscribing in two ways. Directly calling subscribe outside of a useEffect causes nearly 100 store updates. The current approach only updates the store 5 times, and this may be acceptable since this causes no rendering issues (the store values are only grabbed at component mount). Here is my current solution: ```TypeScript...

fair-rose

2/5/2025

Custom Meta value for field?

We want to show our users when a field has been prefilled (and change some styling when they edit it). I'd love to have the ability to add a custom meta field like field.meta.isPrefilled (boolean) to keep track of this. The AI Orama chatbot seems to think it's possible, which leads me to believe it was possible with older versions. const { field } = useField('yourFieldName');...

statutory-emerald

2/1/2025

Get index of pushed value in field array

Is there a way to get access to the index of a field that was pushed to a field array? It doesn't look like anything is returned from the pushValue() method. For context, I have an add/edit modal that renders an item in the modal that I am either adding or editing, and that is determined by the index in the array. This is fine with selecting an item to edit because the index was already defined, but when adding I would have to do something like `setSelectedIndex(form.state.values.items?.length...

flat-fuchsia

1/30/2025

Array of Forms

What is the best approach to have a list of forms with multiple fields? Use Case: List of task cards with select box and editable content. User can modify content and toggle select, then use submit to add all tasks. I tried following the example for array fields, but not sure how to relate to form arrays. Should TaskCard accept form directly? How to properly tell TaskCard which item in task array?...

fair-rose

1/23/2025

Resetting validation errors

I have a large form of over 100 fields. Large sections of it can be added/removed so there is a need for clearing out validation errors if a section that has errors is removed. Otherwise the user could be unable to submit because there are validation errors in fields they can't see. Currently I'm going about it this way: If a section is removed I loop through the fields in that section:...

metropolitan-bronze

1/22/2025

valibotValidator deprecated

'valibotValidator' is deprecated.ts(6385)
validator.d.ts(11, 4): The declaration was marked as deprecated here.

'valibotValidator' is deprecated.ts(6385)
validator.d.ts(11, 4): The declaration was marked as deprecated here.

...

harsh-harlequin

1/21/2025

Does onMount not show validation errors?

Hi! I'm working on a form with an onChange validator and our issue is that validation is running only onChange (expectedly) so the user could submit an empty form. I saw the discussion on GH and added the same validator onMount. I am happy I do not see the validation errors we have defined (eg 'field required') onMount. However, I am not sure if this is expected with 'onMount' validation or I have done something wrong elsewhere? I couldn't find anything on the docs, so could someone please clarify - do validation errors now show onMount?...

absent-sapphire

1/20/2025

Solid Start Actions + TanStack Form

is it possible to use solid start actions and tanstack forms together (for progressige enhancement)

adverse-sapphire

1/16/2025

UseField example?

Is there an example on the proper usage of the UseField hook? hopeully someone can point me to a repo with an eaxmple? thanks in advance

rising-crimson

1/15/2025

Linked fields and onChangeAsync

Hi! I have a form where at least one of two fields must be present (nationalId and/or passport). The problem is that when I change one field, it does fire the other field validation but not his own. I am using onChangeAsync. onChangeListenTo does not work when using onChangeAsync? When I change to onChange it works as intended. Maybe I am not approaching this problem the way I should....

message.txt

secure-lavender

1/15/2025

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

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

statutory-emerald

1/14/2025

form.setFieldValue with field array

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

ambitious-aqua

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

fascinating-indigo

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?

fascinating-indigo

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

national-gold

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

absent-sapphire

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

fair-rose

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

extended-salmon

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

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