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

subsequent-cyan

12/19/2024

Generic Form Components

I figured Id drag my post from the general channel, over to here as I've hit a wall with the Ts that I'm working on. Here's my code sandbox https://codesandbox.io/p/sandbox/yv7zmh demo, and the original post that i made in general https://discord.com/channels/719702312431386674/1100437019857014895/1318637134667583508 Basically, I wanted to carry on from the discussion on this issue (https://github.com/TanStack/form/discussions/636) to open a PR with some documentation on reusable components. It's something that I'm trying to get working at work but I'm having massive Ts performance hits, and so I think it might be a good time to reach out to someone more familiar with the matter. ...

conventional-tan

12/19/2024

Possible to update Zod schema and revalidate?

I have a toggle that makes an additional field required. I only want to validate it when the toggle is on. So I'm trying to merge in the additional Zod schema and validate against it. For this I have a useEffect (pictured) to listen for the toggle to change in form.store and merge an additional Zod schema. And it works! ...when I toggle it on. My otherwise valid form goes to canSubmit: false. However if I turn the toggle off it should be going back to the initial schema and validate the form. However this does not happen: the form stays in canSubmit: false and the fieldMeta for the unrequired field still displays an error....

exotic-emerald

12/14/2024

Using Suspense with form.Field

It's ok using suspense under form.field? Example: '''return ( <form .....>...

exotic-emerald

12/14/2024

Any ideas for this use case?

I'm dealing with a complex form with dropdowns, inputs, datepickers, etc. Most of these inputs are rendered conditionally based on other previous selections, apart from that some dropdowns get data from APIs. I need to split this big form in chunks and add some suspense wrappers....

helpful-purple

12/13/2024

Accessing Valibot schema params?

I have a schema: ``` import * as v from 'valibot'; ...

national-gold

12/12/2024

undefined field.state.meta.errors

For some reason one field of my form is initializing with an undefined field.state.meta.errors. I'm not using form.setFieldMeta on this field. I checked the types, I checked the initial values. Any clues of what could possibly cause this? Below are two components of the form: <form.Field...

exotic-emerald

12/12/2024

Best approach for this use case?

I have a form with 2 tabs. It's a single schema using discriminatedUnions. If you click on tab A, it will display all the fields required for that variant, same if you click on the tab B. The thing is, for tab A I have this requirement:...

exotic-emerald

12/11/2024

canSubmit is true in onSubmit validator

I'm wondering why canSubmit is true when I choose onSubmit validation. Shouldn't be false because the form is not valid?

absent-sapphire

12/10/2024

Array field get inferred as type never[]

When passing the empty array as a default value to an array field, it gets inferred as never[] instead of the type inferred from zod schema. And in general, it gets inferred as the type of whatever I pass to default value. Is this intended behavior?...

absent-sapphire

12/10/2024

form.useStore is not a function

Version 0.39.0

fascinating-indigo

12/1/2024

React Aria Components Integration for TanStack Form

TanStack Forms currently does not expose a field ref, which makes it challenging to integrate with React Aria components. React Aria relies on assigning a ref to the input component for accessibility and focus management, but TanStack Forms lacks documentation or examples for this integration. Please provide an integration guide or example in the documentation for using TanStack Forms with React Aria components, similar to how React Hook Form handles this scenario. Here's an example of how React Hook Form integrates with React Aria: ``` import { Controller, useForm } from 'react-hook-form';...

subsequent-cyan

11/27/2024

Reusable Forms

Disclaimer: I think this came up already but I can't find it I have an Address-Form where I collect the Street, Postalcode and City of the user. I want to re-use the form for multiple purposes (Sign-Up, User-Profile, and Invoicing) ...

other-emerald

11/22/2024

Change defaultValues after submission?

I am wondering if anyone has ever dealt with changing defaultValues on a form after submission? I use Query to initialize the defaultValues in the form, then once the form is submitted I refetch the query. I want to change the defaultValues to the associated, new query data and reset the form. This kind of state syncing becomes rather complex in my opinion, but I am exploring this idea. Let me know if it's a dumb one. This would be useful in user settings forms, where the page is not left after submitting the form. It would be super cool if we could subscribe the defaultValue fields to query data so all we need to do is run reset() after refetching the query (following a form submission) and the fields should already reflect the database....

other-emerald

11/22/2024

Subscribe to form state in separate component?

Hey there 👋 is it possible to subscribe to form values in a separate component? I am using a separate component to perform a mutation using this form data. I am currently passing form values through a callback called within the form onSubmit method. Maybe you could let me know if this is a bad idea to begin with.

exotic-emerald

11/21/2024

Set error message from api error response

I have an api that gives you the error messages, for example "user already taken" , "user doesnt exist" , etc. I wanna set the error message for a specific field in my form. Best way to do it? I found something like this in a github discussion:...

quickest-silver

11/20/2024

DeepKeys, only keys with a string value

Hi, I'm trying to make a reusable component that may receive a key into formdata but I want to constrain the component to only receive paths to string values. How can I achieve this? Right now I only have name set to DeepKeys<TFormData> which I guess is too broad. ```tsx import type { DeepKeys, ReactFormApi } from "@tanstack/react-form"; import type { ZodValidator } from "@tanstack/zod-form-adapter";...

quickest-silver

11/20/2024

Change validation type after initial validation

Hi! Is there a way I can configure my form to have the initial validation occur on form submission and when the form has been submitted once, the validations should occur onChange? This is a thing I'm missing from this library compared to RHF. Cheers 🖐️...

harsh-harlequin

11/20/2024

Server validation

What is the best way to set validation errors if within the onSubmit we are using a tanstack/query mutation that returns a 422 error?

exotic-emerald

11/20/2024

Default values with type-safety

I'm using tanstack form + shadcn + zod. I have a multi-step form and in the third step I have a "select your confirmation method" step to choose between "Email" or "Sms" radio buttons. For my method variable I have assigned a "" (empty string") but I loose the type-safety because it should be "sms" | "email" and I got a bunch of issues in other functions due to the loose of the type....

conventional-tan

11/18/2024

Mantine, Tanstack & Zod validation error display

When wrapping a Mantine input component in a Tanstack Field wrapper, is this the correct way to display an error message? It works,, but I haven't found any documentation suggesting this route or gotten anything else to work with this trifecta. Thanks!...

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