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

extended-salmon

10/3/2024

Dirty since last submit

Howdy! After a sidequest at work, I'm back to the migration from React Final Form (RFF) to TS Form. It's going well (although the draft PR with the field wrapper example would be great, so I can make use of DeepKeyValue and all that), but I've got a new roadblock. RFF keeps track of the dirty state as a whole, but also since the last submit (dirty and dirtySinceLastSubmit), which is an absolute necessity for our saving indicator that gets used for our autosaving forms. I tried to convert our saving indicator, but it's not possible without some way of identifying whether a field is modified. isSubmitted and isDirty don't get cleared once the field becomes dirty again....

extended-salmon

9/29/2024

ValidationError - Zod

I'm wondering why ValidationError doesn't return an array of strings, where each item is an error? According to this screenshot I'm expecting an array like [ "Password, must contain at least 8 characters" , "Password, must include tuna" ] It looks always return 1 item with the errors concat with , . The thing is, I want to display 1 error at the time, not all of them for a better UX. If I do it in a hacky way extracting the items based on , it won't work for error messages where I add a comma. Is there any workaround for this?...

xenial-black

9/25/2024

Validation that returns additional data

I have a validation that returns additional data and I'm not sure where to put it best. I collect an Address: (Street, PostalCode, City) - I run basic validations against it onChange (fields are required) onSubmit I run the onSubmitAsync validator on the FormApi - this makes a call against the Backend and returns an array of possible address matches for what the user entered....

xenial-black

9/24/2024

Form Field Errors From Form Validators using Zod validate all fields

```ts const form = useForm({ defaultValues: { username: '', age: 0,...

modern-teal

9/20/2024

Issues with validators (zod and native)

Hi there, a TanStack Form newbie here. I am running into a type error issue with the zod validator adapter. I was following the docs and zod examples, despite doing everything same I can't get the validators running somehow. With the zod validator adapter i get following error:...

multiple-amethyst

9/16/2024

canSubmit not resetting when using form.Subscribe when form inputs are invalid

When I click the submit button on my form using form.Subscribe when the fields are all empty, it sets the form to be in the !canSubmit/isSubmitting state and just hangs there requiring a full page reload to reset the state. Should I add some formApi call in my onSubmit (within useForm) to reset the field without clearing the inputs? I am also using validators on each input field....

itchy-amethyst

9/9/2024

Best practices for displaying one value and setting another

I'm wondering if there are any best practices or a recommended way to have a field whose display value is different from its actual value. My specific example is a field that lets you search a list of objects. You search by the display name and the field displays the object's name field when selected, but the value sent to the server is the id field....

xenial-black

9/6/2024

useQuery in Field validators

Is there a way to use useQuery in Field validators? I have a Form where the user inputs two dates and I make a Request to the Backend to check if those Dates are on a public holiday or not (which would mean the user needs to select a different Date). To use the Caching from useQuery I would like to define my Query somewhere...

foreign-sapphire

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

xenial-black

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

other-emerald

9/3/2024

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

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

flat-fuchsia

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?

extended-salmon

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

extended-salmon

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

rare-sapphire

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

fascinating-indigo

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?

extended-salmon

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

manual-pink

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

xenial-black

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

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