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

6/30/2024

Cannot get validation to work properly with Vue / Nuxt / Yup

Hi there, I'm working on a Nuxt project where I want to transition away from vee-validate to @tanstack/vue-form and I'm struggling getting validation to work. I have pushed all the code to a branch: https://github.com/sapphiredev/resource-webhooks/blob/feat/migrate-various-libs/components/modals/role.vue, also relevant are the files in components/forms/. The current problem I'm having is that onSubmitInvalid never triggers, and the disabled state for the submit button (form.state.isSubmitting || !form.state.isValid) isn't getting toggled correctly. It's like validation is not running at all. The current production version of this project is: https://webhooks.sapphirejs.dev/configure/roles, as can be seen there the flow should be: 1. When clicking "Add new role" both fields are empty without errors and "Add role" is disabled...

ratty-blush

6/22/2024

Issues with Next.js server actions and TanStack Form

I some issues with TanStack Form and Next.js server actions. I was following this guide: https://tanstack.com/form/latest/docs/framework/react/guides/ssr First issue: Docs show how to validate data but what should I do to go further (e.g save valid data to database)? I tried to use onSubmit prop in createServerValidate but it never fires. ...

variable-lime

6/20/2024

Have FieldApi correctly typed

I have the following function call with the FieldApi as param: const MapField = <T, K extends keyof T>(_field: FieldApi<T, K, any, any, T[K]>) => { ... }; How do I fix the error with not satisfying the constraint on the generic params?...

conscious-sapphire

6/9/2024

Pass a zod schema to a form to ensure all required values are captured?

So IIRC with react-hook-form you can pass a zod schema to a useForm and it will give you typesense if you forgot to set a defaultField or a formField. Is there a similar pattern here? for now im just casting the type ```ts...

generous-apricot

6/8/2024

How to purge unchanged values and compare current state with "defaultValues"?

I am developing a profile form where I fetching the profile data from API and hydrating the react-form with response values in defaultValues property and works fine but when some changes are made to the form I want to remove all unchanged property while submitting form.

robust-apricot

6/7/2024

Trigger error in specific field from the onSubmit function

When I submit my form, my backend api can return an error if the sourceName field is already taken. How can I set this error in this field from the onSubmit fn ? ```JavaScript const { Field, Subscribe, ...form } = useForm({ onSubmit: async ({value}) => {...

stormy-gold

6/4/2024

Why are the types different in @tanstack/form-core on Github and on npm? "pushValue"

For methods on FieldApi such as pushValue, the method code on Github accepts a second argument 'opts' but it's not present on the npm version (here viewed on the npm code browser) How does this happen? And how to deal with this?...

fascinating-indigo

5/29/2024

Can I bind a field to a Vue reactive object?

I have a custom input component that needs to be bound to a ref. How do I get this to work with Tanstack Form? What I've done is use a combination of watchEffect and setFieldValue, but this feels very clunky: ```...

stormy-gold

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.

quickest-silver

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

foreign-sapphire

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

genetic-orange

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

vicious-gold

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) => {...

fascinating-indigo

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?

magic-amber

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

quickest-silver

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.

fascinating-indigo

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

wise-white

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

wise-white

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

continuing-cyan

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.

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