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

8/2/2024

SSR + Next.js is a bit confusing

I had a lot of trouble figuring out how to 'fill in' the needed code that was not shown in the example (I guess that is because it is WIP 🙂 ) Few comments from what I managed to figure out......

optimistic-gold

8/1/2024

Conditional disable

how can I disable a form fields based on the value selected in another form field?

xenial-black

7/31/2024

Extracting form.Field logic and TypeScript issues

I am trying to create a component that will simplify the field creation. What should the extracted type for Field be? The intended use would be like this: ...

probable-pink

7/26/2024

const value = form.store.subscribe()

am trying to figure out what i should pass ito the subscribe to watch a field

wise-white

7/18/2024

Trigger onChange only on dirty fields

Is it possible to only trigger the onChange validation after the field is dirty ?
I want the validation to first occur when the user leaves the field (onBlur). Then when the user comes back to the field (now dirty), I want the validation to occur onChange. Is it possible to do this ? In RHF, i would do this with the onTouched event - https://www.react-hook-form.com/api/useform/#mode...

correct-apricot

7/13/2024

Type instantiation is excessively deep and possibly infinite

Type instantiation is excessively deep and possibly infinite Getting this error in most of the places where I pass form or field of react-form. What could be wrong? How to specify specific type for form in useForm? ...

fair-rose

7/12/2024

Displaying Validation Messages with Zod in Next.js

I’m having trouble showing validation messages with Zod as the validator in my Next.js project. Here’s my code: ```...

optimistic-gold

7/12/2024

Input type error with default values

So I have a couple inputs of type number that throw “expected string but got number” errors. This occurs when I submit a form populated with default values (from the db) for a user to edit, and submit the form without touching the numbered inputs. If I edit the inputs before submitting the error doesn’t occur. All validation is of type number and the default values are also of type number. Source: https://github.com/DollaHane/DearDegens/blob/main/src/components/pageEditMint/EditListing.tsx...

other-emerald

7/11/2024

How can I trigger validation of a field array when I change one of the subfields of an array item?

My form has an array field which has a checkbox subfield. Only one item in this array must be selected. If I try to submit the form without any checkbox selected, the validation works as intended. However, if I select one checkbox after that first invalid submission, the submit button remains disabled (even though the form is valid). I can only enable the button after adding and deleting a new item. I haven't figured out how to trigger validation of the array when any checkbox changes. Is there a way to do this? For reference, I attached the code snippet with the array field. ...

message.txt

metropolitan-bronze

7/2/2024

Shared field between 2 forms

Hey everyone, anyone was able to share a field between 2 forms? I came up with this code, I I couldn't get the types to work yet. anyone has a better version? update: I think I get it, anyone has a better version?...

optimistic-gold

7/2/2024

is ReactFormApi interface exported somehwere?

is there a way to import ReactFormApi?

dependent-tan

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

grumpy-cyan

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

foreign-sapphire

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

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

conscious-sapphire

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.

continuing-cyan

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

xenial-black

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

secure-lavender

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

ambitious-aqua

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.

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