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

xenial-black

5/28/2024

how to get the change value of specific field at the root level

How to get the onchanged (like react hook form useWatch hook) value from the useForm for the trigger useEffect in my case.

solid-orange

5/28/2024

Making a hook that encapsulates a form

HI im trying to figure out how to do this: ```ts export function useSitemaps(): UseSitemapsReturnObject {...

ambitious-aqua

5/27/2024

How i can solve problem with "Max update depth"

if i try get field value which have type array i get error

ERROR
Maximum update depth exceeded.

ERROR
Maximum update depth exceeded.

...

maxUpdateExample.js

quaint-moccasin

5/25/2024

How can I show success on client using server action?

I am trying to useForm method. I want to show some nice UI when the form submits correctly. I am using NextJS and server actions. In my useForm config, I am trying to do this: ```js onSubmit: async (test) => { console.log('T', test)...

correct-apricot

5/24/2024

Can I use a selector for the `store.subscribe` method?

In my project I am building a form wizard with multiple steps. Each step should report to a progress bar as soon as it becomes valid. For this I have two approaches right now. The first one is via form.subscribe: ```tsx const Validator = ({ isValid }: ValidatorProps) => {...

other-emerald

5/23/2024

What is mode="array" doing?

I noticed I forgot it on a couple of form.Field with arrays, but everything seems to be working so the question, what is it actually doing?

quickest-silver

5/17/2024

Is array mode working correctly?

Hi, I'm struggling to make array mode working correctly. I made this very simple example on codesandbox, which I brought code from tests for array mode on tanstack react-form and add console.log at form.Field for subField. Like the screenshot below, on first render, value is correctly set. But on second render, it became undefined and react warns me it is changing from controlled to uncontrolled....

correct-apricot

5/7/2024

Is there a way to update the entire form's value at once, without touching the default value?

A specific user interaction will set the value of every field from state A to state B, and since there are a lot of them I'd like to do this with one operation. I'd also like to avoid touching the default values so that reset() can change them to the default state C.

eastern-cyan

5/4/2024

Form Status

I have questions regarding Tanstack Form. No separate channel for this. So I ask those here. 1. Why isSubmitted is not trure? Even when all are valid and click submit. (Submit Count 1 and 2 photo) 2. FormValid will be true when form level validation true. is it right? 3. Why valid is true when page load and without doing anything? (Submit Count 0 photo)...

xenial-black

4/28/2024

How to handle a nullable object in the form.

I have an object that is nullable but if I try to access it using <form.Field name="item.nullable_object"></form.Field> and it's null, an error is thrown. Think as the structure like this: ```ts type Item = {...

xenial-black

4/25/2024

onMount error not being revalidated.

I have set an onMount validation but I don't know how to remove it's error after user changes its value. For example the users username on mount has a problem and we add and error but if user updates it the error that onMount added persists. How should I handle that?...

like-gold

4/17/2024

Delay between <form> onSubmit and react-form onSubmit callback called

When I add a console log to both the form's onSubmit callback, and the useForm hook's options onSubmit callback, I see there is a slight, but noticeable, delay between the two logs.

like-gold

4/17/2024

Performance issues with TypeScript language server

TypeScript language server (v4.9) is working fine, except when I interact with anything related to @tanstack/react-form. For example, hovering over the form variable returned from useForm causes the language server to hang for quite a while. Has anyone else experienced this? I haven't had the same issues with other tanstack libraries, and I'm considering uninstalling. 😦 Thanks....

metropolitan-bronze

4/16/2024

Type Errors in Sample Example

I'm following this Example to create a sample form (https://tanstack.com/form/latest/docs/framework/react/examples/simple) and noticed that form.Subscribe has type errors in the selector and children prop, I can reproduce this in my local as well. Is the example incorrect or did the API change? Looking for an easy way to create a Submit button for a form, thanks!

equal-aqua

3/30/2024

Is it possible to do nested arrays with multiple `mode="array"`?

At the moment to achieve the wanted behavior I need to remove the nested mode="array" which again later on ruin some type safety when trying to use ex handleChange. What I currently need to do is: ```typescrict onValueChange={(value) => handleChange(value as never) }...

deep-jade

3/19/2024

Form field with arrays

A question about tanstak form, more precisely on the management of tables in view3. Arrays example, in this example the :name field does not have the correct PrefixObjectAccessor typing. A solution ?

extended-salmon

3/19/2024

how to remove errors properly when typing with onBlur validation

I’d like to achieve a nice UX following ideas like https://ux.stackexchange.com/a/134385 ``` Once the field is validated, and shows some errors, the user wants the error to vanish as soon as the edited value is correct, not when he leaves the field or submits the form (which probably will be disabled anyways as long as there are errors displayed). ...

extended-salmon

3/19/2024

Does it make sense to trigger onChangeAsync when onSubmit is called?

As onChangeAsync is mostly there for devs to make API calls which are debounceable, does it make sense to have it retriggered when onSubmit is called? Should we add an option to disable this behaviour?...

rival-black

3/16/2024

How to get field error when using createFormFactory with Nextjs with App router?

Hi I'm switching from react-hook-form to @tanstack/react-form and I'm trying to understand how the validation works with zod and creatFormFactory. I've followed this example: https://tanstack.com/form/latest/docs/framework/react/guides/ssr I've created this CodeSandbox ...

other-emerald

3/15/2024

Field array validation not working correctly when field is removed

When a field array field is removed with a validation error on it, the field array that was +1 in the array shows the removed field's validation error, even tho the field previously did not have validation errors. It seems as tho validation is not running properly after an element is removed from the field array. I tried to call form.validateAllFields() after removing an element from the field array, but that leads to Uncaught (in promise) TypeError: Cannot read properties of undefined (reading...

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