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

metropolitan-bronze

4/24/2025

Different schema for form and output

Is there a way to specify two different schemas, one for the form state and one for the output upon submission? For example the form schema would be: ```ts // type or using zod...

conscious-sapphire

4/24/2025

Incorrect type for field.state.meta.errors?

When my form first renders, field.state.meta.errors is undefined when the Typescript type argues it is always an array. I have a simple form with two fields which are validated with zod. ```ts const productSchema = z.object({ name: z.string().min(1, "A name is required"), allowance: z...

fascinating-indigo

4/24/2025

[Solid] Performance issue with large form?

Hi there, I made a simplified reproduction of a current form I'm working on: https://stackblitz.com/edit/solid-tanstack-form-perf?file=src%2Fform.tsx ...

fascinating-indigo

4/23/2025

How to reset the value of an object field in an array

hi everyone. is there a way to reset manually a value in an array field?

``ts
<td>
  <form.Field
    name={

lines[${i}].building_product_group`}...

adverse-sapphire

4/23/2025

How to access to the validation schema inside a FieldComponent?

Is there an easy way to leverage the validation schema inside a FieldComponent? I'd like to know if the field is required or not, and if there are some rules like "max length"/"min length" to show a characters count. Currently have this: ...

stormy-gold

4/23/2025

withForm-TypeError-fix

``` tsx export const AddressComponent = withForm({ props:{name}, render: ({ form,name }) => { return ( <div className="flex flex-col gap-4">...

conscious-sapphire

4/22/2025

How to properly output error from useForm onSubmit

```tsx const [error, setError] = useState(""); const form = useForm({ defaultValues: { email: "",...

stormy-gold

4/21/2025

Form-getFieldValue-Alternative

When using useForm, I get the value like this: form.getFieldValue(name). How can I get the value using useAppForm?

xenophobic-harlequin

4/20/2025

Form composition create reusable component using withForm

I want to create an Address Component that can be included in other forms. This component should just extend the existing form values with the address values: ```TS const formSchema = z.object({ newField: z.string().min(1),...

adverse-sapphire

4/18/2025

Epic stack using tanstack form instead of conform

https://github.com/epicweb-dev/epic-stack/compare/epicweb-dev:main...wargha:feature/tanstack-form-example?expand=1 I put together an example of how the Epic Stack could use TanStack Form in the future, just as a reference. I added it to the notes-editor as a starting point. To be honest, I’m not super happy with how I’m handling errors in this example — but since it’s just an experiment and I don’t have the bandwidth to refine it further right now, I figured it’s good enough to start a conversation. ...

extended-salmon

4/17/2025

Ways to create sub-form to be used as form array

I have ItemForm here ```tsx export const ItemForm = withForm({ defaultValues: {} as z.infer<typeof itemSchema>, validators: {...

stormy-gold

4/17/2025

Form composition

Hello, how do you refactor the form and submissions? Currently i have page with form and useAppForm hook where i have onSubmit actions. something like this //page `const form = useAppForm({ ...formOpts,...

stormy-gold

4/17/2025

Form-SubmitButton-UseStore

const form = useFormContext(); const [isSubmitting, canSubmit] = useStore(form.store, (state) => [ state.isSubmitting, state.canSubmit, ]);...

like-gold

4/16/2025

How can I get the onSubmit type?

I need the data type from on submit

deep-jade

4/16/2025

When is the schema validation ACTUALLY happening?

I encountered this issue - I have an age, that should be a number after submitting. However, to get it, I need to use TextField. Because of Typescript errors, I need to cast it as number (I know this isn't the best approach, but hear me out pls 😄 ) When I hit submit, the age value is run through the schema (which happens and logged REFINED VALUE is of type number). However, when I log the the value and its type in onSubmit handler, it is a string. Isn't this weird? In zod, when I run values through a schema, I can count on them being the correct type, but here it seems it doesn't work that way. It seems like the result of the parsing is thrown away and the original values are returned in the onSubmit handler. Is this a bug or a required behavior?...

deep-jade

4/16/2025

Optional fields

Hi guys, I have a question about Tanstack Form. ``` const schema = z.object({ name: z.string().min(2, 'Name must be at least 2 characters long'), email: z.string().email('Invalid email address').optional(),...

correct-apricot

4/16/2025

Need to re-visit unmounted fields in order for the validators to update the errors

Hello! I've encountered a pretty strange behaviour in my form setup. Here's a minimal reproducible example showcasing this issue I'm facing. https://stackblitz.com/edit/vitejs-vite-p3tjgchh?file=src%2Fmain.tsx This form is organised in multiple tabs, and has two submit actions; publish and draft. These two actions have different requirements (schemas). I found that sometimes the form won't let me submit a draft even though it should because it still has some errors of the previous "publish" validation. In order to mitigate this I'm using canSubmitWhenInvalid, but I'm getting a pretty inconsistent behaviour if some of the fields are not mounted on the DOM....

molecular-blue

4/15/2025

Form state is inconsistent when using with server action

The following is a simplified version of what I'm currently doing, which is basically aligned with the example shown in the dic: ```tsx const [{ successReturn, formState }, action, isSubmitting] = useActionState( submitForm,...

absent-sapphire

4/15/2025

Server Side validation as part of submit: Handling 422 responses

I do not want to use client side validation: My server side mutation (tanstack query) does the validation and responds with a 422 error response which contains the validation errors. This pattern is necessary anyway, when you have validation issues, that might depend on complex database state, which can only be checked in the same transaction you would like to change and commit the data. However, in the docs I do not see a good way how to do that. So, as of now I do...

vicious-gold

4/14/2025

TypeScript Error: "Property 'Field' does not exist on type 'AnyFormApi'" when accessing form.Field

Hello everoyne, I have a react component which i want to use to render a form UI. To this component i want to pass a form as a prop which I do using form: AnyFormApi And then later on when i am rendering the actual form and do:...

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