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

underlying-yellow

9/6/2024

Select Field?

What's the proper way of adding a field like a Select to get typesafety with all the different values ? I'm just hard coding them for now. The type is a union of the options | null | undefined. Maybe would be a good idea to add more examples of other inputs like https://ui.shadcn.com/docs/components/form#examples ...

foreign-sapphire

9/4/2024

setting defaultState.canSubmit to false does not work

I've set the defaultState.canSubmit to false but it doesn't seem to have any effect. ```ts const form = useForm({ defaultState: {...

stormy-gold

9/3/2024

Is there a way I can define my defaultValues with a schema

```ts import { email, InferInput, minLength,...

robust-apricot

8/31/2024

how to unit test with jest

Hi everyone. On Tanstack-form, I would like to include testing. However, I'm not sure how to mock form in jest. Does anyone know how I can do this?

conventional-tan

8/30/2024

Struggling to make use of `Updater<T>`

So, I'm trying to replicate React Final Form's parse and format properties, but I've hit a snag with Updater<T>. Trying to type-narrow handleChange's callback param so I can apply a parse function to it, gives me the following error ``` This expression is not callable. Not all constituents of type 'UpdaterFn<T, T> | (T & Function)' are callable....

conventional-tan

8/29/2024

Question regarding meta.isPristine

React Final Form has the modified property (https://final-form.org/docs/react-final-form/types/FieldRenderProps#metamodified) which is basically like a Tamper Sticker, and is useful for Saving Indicators on autosaving forms (since it lets me handle the case where the user changes a field, autosave kicks in, the indicator shows it's been saved, and the user changes their mind and puts the field back to the initial value... RFF uses equality to determine the pristine state, as well as the dirty state). My question is: is there any way to cover this case in Tanstack Form?...

itchy-amethyst

8/28/2024

Cannot subscribe to values in Next.js app

I'm having some trouble setting up a form in Next.js. I've tried following the guide in the docs and looked through issues on GitHub for some help with types. It seems to be working fine until I try to subscribe to values. Here's the error: ``` TypeError: Cannot read properties of undefined (reading 'templateId')...

deep-jade

8/28/2024

Eslint error - Do not pass children as props. Instead, nest children between the opening and closing

I'm following the instructions to create a basic react-form but this eslint rule is bothering me. Any ideas?

absent-sapphire

8/24/2024

Manually modify the error state of the field

I want to initiate a request after passing a form validation. I can only know which form fields are illegal after the request is returned. Is it possible to modify the field status?

ugly-tan

8/23/2024

Typescript type issues with validate after updating to v7.52.0

Hi, the following snippet started showing typescript type errors after I updated the react-hook-form version to v7.52.0 while it was working fine for v7.51.5. It has something to do with the following PR and I was wondering if someone can help me out to figure out whether the problem is in my code or something with the library. I had to change the rules?: RegisterOptions; to rules?: RegisterOptions<T, Path<T>>; after the version update. Link to the snippet: https://stackblitz.com/edit/vitejs-vite-lqawwb?file=src%2FForm.tsx Link to the PR: https://github.com/react-hook-form/react-hook-form/pull/11969 ...

complex-teal

8/22/2024

Set a default validator.

99% of our forms are going to use a zodValidator is there a way to set a global default?...

foreign-sapphire

8/22/2024

Conditionally require field(s) using ZOD

I have some fields that are only required once the user checked a Checkbox Here's a reproduction: https://stackblitz.com/edit/tanstack-form-cuevyr?file=src%2Findex.tsx Questions:...

flat-fuchsia

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

hilarious-sapphire

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

absent-sapphire

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

firm-tan

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

multiple-amethyst

8/19/2024

Building a Tanstack Form & TanStack Table example

Let's talk about it here 👇

absent-sapphire

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

stormy-gold

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

optimistic-gold

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

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