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

stormy-gold

3/18/2025

How do I use a form with React Query for debounced search/filter?

I just tried using TanStack React Form, and I want to use it with React Query for a searching feature. But how can I get a debounced value that I can pass to React Query to reduce requests on change? Should I use a custom hook, or does TanStack Form have that feature?...

absent-sapphire

3/17/2025

Forms with a CMS

All the examples show building forms with static name fields to maintain strict typing. With a CMS like Payload I do not know the names ahead of time. The issue I have is I need to create wrappers around a withForm() component so I can pass the function that generates the def ault fields. This works fine besides having to pass the form as a prop typed as any. Has anyone figured out a clean way of creating reusable components and fields this way? Another wall was useFormContext() returns a form w...

ambitious-aqua

3/17/2025

canSubmit behavior is described inaccurately in documentation

In the documentation, the canSubmit property of the form state object is described as a "flag that is false when any field is invalid and the form has been touched". This doesn't accurately describe it's true behavior. I've got a Next.js project where I'm using client and server validation in the same form. The following happens: 1. I fill out the form properly and canSubmit becomes true...

ambitious-aqua

3/17/2025

[TypeScript] Passing field.state.meta.errors to child component

Trying to figure out what the type is for field.state.meta.errors to properly type a child component. It appears to be StandardSchemaV1Issue[] when you inspect the individual objects but when passing it to the child, I get a TypeScript error like this: ``` Type 'UnwrapOneLevelOfArray<UnwrapFieldValidateOrFn<{ email: string; password: string; }, "email", FieldValidateOrFn<{ email: string; password: string; }, "email", string> | undefined, ZodObject<{ email: ZodString; password: ZodString; }, "strip", ZodTypeAny, { ...; }, { ...; }>>>[]' is not assignable to type 'StandardSchemaV1Issue[]'. Type 'UnwrapOneLevelOfArray<UnwrapFieldValidateOrFn<{ email: string; password: string; }, "email", FieldValidateOrFn<{ email: string; password: string; }, "email", string> | undefined, ZodObject<{ email: ZodString; password: ZodString; }, "strip", ZodTypeAny, { ...; }, { ...; }>>>' is not assignable to type 'StandardSchemaV1Issue'. Type 'undefined' is not assignable to type 'StandardSchemaV1Issue'....

firm-tan

3/17/2025

Custom ConditionalField

I am trying to simplify the way i handle conditional fields. For example i have a role field which can be set to either "User" | "Admin".
If "Admin" is set a new required field reason should appear. I have seen approaches where users add an onChange listener to the field role and it works fine. However this is a simple usecase. My actual use case is a big multi step form where the field might be rendered somewhere completely different. I generally don't like separating logic (In this case the listener) and rendering (of the field in some other subform later). ...

rare-sapphire

3/17/2025

server validation error not appear in field.meta.errors

Hi, may I know how I can retrieve the field's errors when using server-side validation, seems the errors from server validation do not exist in field.state.meta.errors but only in form.state.errors

fair-rose

3/16/2025

Input masks

👋 Is there a recommended way to do input masks using Form? In particular, I'd like to have a date field in the dd.MM.yyyy format that auto adds the dots or jumps over them if they're input manually. We've all seen that kind of input. I've checked Maskito but it doesn't play nicely with controlled inputs - it will parse on every input and replace the value, meaning there's no way to edit an existing value in the field (deleted chars get autofilled with 0). Cheers...

stormy-gold

3/15/2025

use external values for form state values

I have a form; values in inputs can be specified by the user manually, but I would like to have as well an ability to pass value from, for example, Zustand. Is that possible? Thank you for any help.

complex-teal

3/15/2025

Replace field value over validates other fields?

When using replaceFieldValue, it seems we hardcoded always validating all array elements after the element that was replaced? I don't see any logical reason to do this, it ends up blowing up the amount of errors shown to the user when they didn't touch or do anything to the additional fields? See: https://stackblitz.com/edit/vitejs-vite-bftecz1f?file=src%2Fcomponents%2FForm.tsx ...

passive-yellow

3/14/2025

FieldMeta Generic required type arguments

Hi there! I know some of the generics were recently updated in a PR. I'm trying to use FieldMeta and now getting a required type args error for 17 req'd types. Egad! hahah Is there another generic that should be used? Basically trying to abstract an info component for displaying meta info. Thanks!...

vicious-gold

3/13/2025

Manage Active field & error handling

Hello, quick question, how can i manage the error appearing only if the user making the field not active anymore ? is there a builtin functionnaly to manage that or i have to make it work by myself ? thanks 🙂

stormy-gold

3/13/2025

subField properties are type unknown

Hi! I am receiving type unknown on all properties in a subField using the array method in the Vue Example: Type in the v-for is correct:...

other-emerald

3/13/2025

API of Pre-bound Field Components

Could you instead of ```tsx <form.AppField name="fullName" children={(field) => ...

complex-teal

3/13/2025

Are validators not supposed to be defined inside of formOptions?

when using the formOptions I notice type inference doesn't flow into the validators. However if we ONLY define the default options within formOptions and we define the validators within useAppForm, the inference works. Is the recommendation to define them there?...

genetic-orange

3/12/2025

createFormHook Usage

Is createFormHook meant to be used as a global hook for multiple forms? I don't quite understand how to scale the Form Composition example. Should I create a single hook with all possible form and field components used in the app even if some forms don't use all of the form/field components?...

xenial-black

3/12/2025

False Positive Error on Field[`name`]

When using mode="array" and iterating over each item, the name field must be a nested item of the array field and cannot simply be the array item's index. (https://github.com/nickhudkins/reimagined-umbrella/blob/main/src/main.tsx#L92). This is somewhat related to type safe SubForms, and the overall form composition story, so it's possible that casting this as any is fine for now and we'll figure out a better API later?

correct-apricot

3/11/2025

Any way to configure default validators for fieldComponents defined in createFormHook?

I have some composite fields that should have the same basic validation no matter what form they're added to. This is just a simple check to make sure each sub-field is populated. Writing and sharing the validation with a util is relatively easy, but it would be cool if I could set the validators once instead of on each form definition. Is this possible?

xenial-black

3/11/2025

Updating a specific form value in an array field?

Hi! I have an array of fields (let's call them "people") and for each person I have an autocomplete that the user can use to select the person's location. There's a mutation that's called whenever the form field updates, which then displays a list of suggestions, but I'm not sure what the recommended approach is to having the suggestion selection set the location for the current person. What would y'all suggest for this?

xenial-black

3/11/2025

is it correct that `onChange` in `useForm` triggers validation on all form fields?

or onBlur

wise-white

3/11/2025

How to set submit as disabled until form completed?

I have a basic form. 2 fields. Right now I'm doing the following to set the submit as disabled on page load. ```...

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