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

evident-indigo

4/25/2025

Best practice typing a boolean field using zod (or other schema library)

Let's say I have a field in my form where a user has to pick "yes" or "no". There is no default. Arguably I would use a zod type like so isDogOwner: z.boolean() Now, if I don't provide a default value in my defaultValues, typescript will complain that it's not matching the schema. If I make it optional in zod, it will be optional in defaultValues.. but now my form validation is not right since I need the user to make a choice before submitting....

rising-crimson

4/24/2025

Type hints when declaring formComponent / fieldComponent

Is it possible to declare a fieldComponent / formComponent so that it is aware of the form / field it is used from? For example a Textfield component that error out if the field it is used in is not of type string Or an example I did recently: I wanted a generic ArrayField that displays a consistent field for array fields in form. I did it like this (look into message below) but it would be really nice to be able to not tie it to current form (in here FormData) but make it generic, preserving type safety for name prop...

ambitious-aqua

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

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

correct-apricot

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

correct-apricot

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

evident-indigo

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

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

eager-peach

4/22/2025

How to properly output error from useForm onSubmit

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

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

absent-sapphire

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

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

protestant-coral

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

conscious-sapphire

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

optimistic-gold

4/17/2025

Form-SubmitButton-UseStore

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

frail-apricot

4/16/2025

How can I get the onSubmit type?

I need the data type from on submit

gradual-turquoise

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

gradual-turquoise

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

other-emerald

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

national-gold

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

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