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

8/21/2024

Update a field in multiple places

I need to be able to set a photoUrl field in 2 places - 1 to set the string (by uploading a file) and the other to clear the photo. Should I juse wrap both places in separate

``
            <Field name={

items[${index}].photoUrl`}>...

genetic-orange

8/20/2024

Is it possible to validate all the fields in a fieldset?

In my usecase in an Astro/React app one fieldset is shown at a time with next and prev buttons. Before the user moves to the next fieldset I want to validate the current screen....

xenial-black

8/20/2024

Showing Server Action errors in the client form

I use this example https://tanstack.com/form/latest/docs/framework/react/examples/next-server-actions. How best to show the error that occurs already in the server action, after

await serverValidate(formData);

await serverValidate(formData);

For example ``` ... try {...

unwilling-turquoise

8/20/2024

How do I use the fields in a form, in child components?

How do I get what fields I have in the parent component so I can pass them down to the child component? The fields in the form can differ depending on what the user does...

graceful-blue

8/19/2024

Building a Tanstack Form & TanStack Table example

Let's talk about it here 👇

wee-brown

8/13/2024

How to use correctly zod validation scheme inside form?

Hello everyone, I have this validation scheme: ``` export const validationSchema = { cover: z .custom<File>(value => isFile(value))...

eastern-cyan

8/7/2024

Array subfield value not getting updated on `form` as I type

Hey everyone, I have a recipe form that has an array of ingredients. For each ingredient I am mapping and returning a nested ingredient form component and passing in the form as a prop. I have a toggle in this component to switch between view and edit mode. I want to disable the toggle to switch back to view mode if an ingredient has no name by accessing the form prop and grabbing the ingredient at that index to check the name. Im seeing the form input update, but value doesn't seem to update (line 97 of attached file). Is there any way you could take a look and see if Im missing something here? https://github.com/tylerpashigian/t3-recipe-book/blob/feature/tanstack-react-form-migration/src/components/recipe/ingredient-form.tsx Ideally I would like to get rid of the isEmptyName altogether, but because the form.getFieldValue("ingredients")?.[i]!.name value isn't udpating I can't think of an alternative. If you wanna see where the form starts, you can check out recipe-form.tsx in the same folder. Please let me know if you need any clarifications, thanks!...

ambitious-aqua

8/2/2024

onSubmit behavior with SSR seems to be incorrect

It seems to me that: * onSubmit should not be required * isSubmitting should be true while the server action is executing and false before and after that (but it is true only during onSubmit execution) I now resort to using isPending that is returned from useActionState as it matches my expectations....

ambitious-aqua

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

ratty-blush

8/1/2024

Conditional disable

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

ambitious-aqua

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

quickest-silver

7/26/2024

const value = form.store.subscribe()

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

ambitious-aqua

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

continuing-cyan

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

xenial-black

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

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

apparent-cyan

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

stormy-gold

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

ratty-blush

7/2/2024

is ReactFormApi interface exported somehwere?

is there a way to import ReactFormApi?

graceful-blue

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

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