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
Why is defaultValues required to correctly get type-safety?
More of a question, if I already have a Zod schema defined, why can't tanstack form use the type from that validation instead of requiring me to specify each default value just so I can get type safety?
Reusable AppField components with unions
I have a multi-step form that's used for a union of data types that I'm discriminating by using a zod discriminated union schema. I've used this schema with .parse({}) to set up the default values and typescript. All of that works great. I use the form.Subscribe to get the values and use the values and the discriminator property to conditionally show fields. Awesome. Now, the issue I'm having is that the field values are not picking up the typing based on that narrowing. I'm not sure if I'm just doing something wrong. Here's the field in particular where I'm having the issue
```
type TextFieldProps = {
label: string...
Removing an entry from an array causes the array to receive invalid data
Hi there, I have some role management code where I iterate through an array of roles from the backend and show checkboxes for each role and each role is linked to an index in a form array. Whenever I uncheck a checkbox it seems to correctly call
form.removeValue (with the correct index) but then when I check the form.state.values.roles there is a weird entry of whatever the last entry of the initial array was but now with just the name property of the whole Role object, which in turn causes my zod validation to fail.
I have a stackblitz where this odd behaviour can be reproduced: https://stackblitz.com/edit/tanstack-form-9vub96pu?file=src%2Findex.tsx
Assuming when I'm editing the user which has both Admin and User:...Form composition with async values
I’ve read that the optionsForm need to be the same between composants.
I create my default value inside a composant that receive data from props.
How can i handle async default values?...
reset form state within dialog without useEffect?
I'm not exactly sure this is a direct issue with this form library, but i've been struggling on this a while, so gonna post:
i have a form inside a dialog. the dialog is pretty standard and tracks it's own open/close state. whenever it closes i would like to have it reset the form, so in the openChange prop i say something like
if (closing) form.reset(). for some reason though, this doesn't actually reset the form. i assume it's something to do with the render vs state update cycle?
here's some of the relevant code cut down. is there something obvious going wrong here?...Generic type for onServer value in setErrorMap remains undefined
We started using the lib in NextJS 15 at version 1.3. Currently trying to update to the latest (1.11.3), but it's giving me a typescript issue on one location. Diving a bit deeper into this, everything worked fine up untill 1.8, from 1.9 onward this breaks.
We have quite an abstract implementation with createFormHook and createFormHookContexts.
For the onSubmit validation we have written a solution that ensures both client side as well as server side errors correctly get passed through to the client form.
...
Form not submitting when adding onChange zod validator
I'm trying to add zod (v4) schema validation on the boundary between my forms/trpc interface. When I add an onChange validator my form stops submitting, the form state appears to think it's submitting since
canSubmit transitions to false in the form.Subscribe, however, the onSubmit callback doesn't get called. When I remove the onChange validator in place of manually calling zodSchema.parse() in the onSubmit is called, the schema validated, and my rpc executes.
Any ideas on how to debug this or what I'm doing wrong?
```...Manually triggering a field validation with form.validateField() not working?
I have a form.FIeld with an onChange validator that depends on a value external to the form. Whenever this external value changes, I want this validator to re-run, so I'm trying to use an effect to manually trigger a validation like so:
```typescript
useEffect(() => {
form.validateField('field', 'change')...
Does the name prop accept any string?
RHF doesn´t allow for field names that contain dots or anything else that might interfere with its dot notation (parent.child) so I am forced to do base64Encode/decode for user defined field names. How does this work in tanstack form? Can I use any name, or can I escape names?
form defaultValues doesn't clear with initial data retrieved
hey all! posting my first question here in a confusing situation i'm in. I use tanstack query to fetch data from an endpoint, and tanstackform to handle em. I've a two dropdown screen, in which the second dropdown is clearable/deletable by users but i'm unable to reach that state which falls back to form.defaultValues instead of users able to remove its node completely.
What happens is that if I commented this code out
if (!country) return;
it deletes the value from the dropdown, but i'm left with my object like this: ...Default values issue
Issue:
I need help implementing a form field that:
Initializes with real-time data (unitPrice from Firebase)
Updates automatically only when other property changes (so basiclly defailt value needs to be udpdated when other external property passed
...
validate on submit then on change
Hello! Great library, thoroughly enjoying it over react hook form. Only one bit that I am stuck on, I would like the following behaviour
- User enter values into form
- User pressed submit
- Any invalid fields show their errors
- First invalid field gets focused...
Filling in field values from outside React (and TSF) is not taken into account?
I converted one of our form to TSF and one of our tester is complaining that his bookmarklet does not work anymore. He is using this script:
```typescript
javascript:(function () {
function setFieldValue(id, value) {
const el = document.getElementById(id);...
How to trigger validation on submit (to show errors)?
I run my validators (zod schema) via
onChange and show my errors only if the field is blurred like this:
```ts
export function getFieldError(field: AnyFieldApi) {
if (!field.state.meta.isBlurred) {...TanStack Form in Next.js: Best Practices for Pending Status, Success/Error Handling & Sonner Toasts?
Hi everyone,
I'm currently in the process of migrating my form logic in a Next.js project to TanStack Form. Previously, I was using server actions with the useActionState hook (or a similar mechanism for Server Actions) and utilized its pending status to display loading states in the UI. Additionally, I used a useEffect hook to react to the data or error state to display corresponding success or failure notifications with Sonner (Toaster).
Now, with TanStack Form, I'm looking for a similarly elegant way to replicate this behavior. I've noticed that the isSubmitting property from TanStack Form doesn't reliably show the desired pending status during asynchronous submission in my setup. Currently, for the pure pending indicator, I'm still relying on the status from my Server Action, which I'd like to consolidate....
`canSubmit` behavior, invalid form submission
From these docs:
The form state object has aIs there a way to change that behavior? If not, what's the appropriate workaround for the "don't ever let 'technically' invalid forms be submitted" use case?...canSubmitflag that is false when any field is invalid and the form has been touched (canSubmitistrueuntil the form has been touched, even if some fields are "technically" invalid based on theironChange/onBlurprops).
Get Initial Values
Has any way I can get the initialValues of the form? Like, i have right know a array of items, and a function to remove, that removal trigger the "isDirty", but I need to know exacly the field removed, so I can removed afwards.
I know in some place this state exists, because is called when we use the reset() function....
onBlurAsync on a field also called when submitting the form, bug or expected behavior?
I have an email field where I am checking if it already exists in the database on blur:
```
<form.Field
name="email"
validators={{...
Lack of Type Safety with Pre-bound Field Components?
https://tanstack.com/form/latest/docs/framework/react/guides/form-composition#pre-bound-field-components
This documentation suggests that pre-bound field components "infer" that such a field should assume that the value in the form state has the same type as the type argument to
useFieldContext. However, this means that whenever I'm actually using the pre-bound field, there are no guardrails preventing me from using a pre-bound field with a form value of a different type.
Demonstrating in code, it seems like a big danger that I can do this:
```...