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
Programmatically clear errors on specific (array) fields
Hello again!
I'm running into a very specific problem on my TSF app. I created a simplified version of it on StackBlitz so it illustrates my problem a little better: https://stackblitz.com/edit/reset-tsf-errors?file=src%2Findex.tsx
I have an array of fields and we can't have duplicate values in there. Whenever we try submitting the form and this rule is not fulfilled, we should highlight which fields are dupes. For example:...
What to use when the Backend returns a form error? Validator vs Submit
Hi!
So I have a form that has
onSubmit validators. They are there so we do basic validations (through zod) like numbers, minimum characters, etc.
I also have a regular onSubmit prop where I call the backend if the validator checks that everything is okay.
...possible to use withForm with 2 almost identical schemas
I have 2 zod schemas who are almost identical.
i made this quick example https://codesandbox.io/p/devbox/immutable-water-5n6qst
you can see on page1 and page2 the differences.
One has the last_name defined as required and one has the last_name as optional.
Is this somewhat possible? ...
Persistent form state support in TanStack Form?
Hi! 👋
I’m exploring TanStack Form for handling filters in my app. One thing I’ve run into is that when users navigate away from a page and then come back, the filter form resets instead of remembering the previous state.
Ideally, I’d like the form state to persist across navigations — similar to how filters stick around when you use query params in route history. That way, users can navigate around, then return to the page and still see their previously selected filters without having to re-enter them....
Type safety with prebound Form components
```ts
<form.Subscribe
selector={(state) => /* state.values.array[i].attribute / }
children={(...) => / Code which uses subField.PreboundField and subField.state*/ }
/>...
State and Inertia.js integration
I want to be able to store and then restore the full form state, with inertia. Is that possible, and if so, how do I get the full form state and how can I restore full form state?
Partial reset of a modified form
Hello! I have a question relative to form reset and defaultValues.
Right now, I have a form that gets async initial values through TanStack Query, and it's working just fine. It even updates the defaultValues when the data changes, perfect.
The important detail though, is that if the form is touched, the defaultValues will not be updated anymore. It makes total sense, you wouldn't want to override the changes made by the user....
RHF's onTouched mode
Is it possible to mimic the behavior of React Hook Form's
onTouched mode? There doesn't appear to be an equivalent option for validators.
https://www.react-hook-form.com/api/useform/#mode...`field.state.meta.isValid` not updated when validating on the server
field.state.meta.isValid is true in Next.js after server validation, unless I also apply the same validation on the client. Shouldn't that state be merged by mergeForm? Would be a lot easier DX if I could just rely on field.state.meta.isValid and field.state.meta.errors instead of having to merge those manually.Why can field validation overwrite form validation errors?
Not sure if this is the right place to ask, but I'm going over the docs for Form and came across this in the validation guide:
Something worth mentioning is that if you have a form validation function that returns an error, that error may be overwritten by the field-specific validation.I was wondering what the rationale is for this behavior/limitation?
errorMap already stores errors from different points in the form lifecycle (onBlur/onChange etc), why not also store form/field errors separately?...Form persistence
Hello! I was wondering a couple of things on the topic of form persistence.
In the past, there has been an attempt at integrating such a feature directly in the library, with this PR https://github.com/TanStack/form/pull/561, but it is now closed.
This is a feature that I would love to see available, but I found some mixed messages about what the plan is for it. In some messages, like https://discord.com/channels/719702312431386674/1100437019857014895/1345113530936066149, it seems to just be a feature coming later, but in other messages like https://discord.com/channels/719702312431386674/1404490027538452511 and https://discord.com/channels/719702312431386674/1100437019857014895/1392775060800143370, the suggestion seems to go more towards doing it on the user side, with the help of listeners....
Sharing form type to custom hooks for cleaner code
Hey folks, I have read the philosophy of forms and previous discussion on why generic are bad. But I do want to ask what could go wrong if setup the form this way
```
export const { useAppForm , … } = creatFormHook({ … }):
...
Default values with zod validation
Sorry if this is a dumb question, this is my code:
```ts
export const InsertFeaturedWorkFormSchema = z.object({
title: z.string()
.min(3, "Title must be at least 3 characters")...
dynamic defaultValues
I am implementing a CMS. We have two tabs : "Draft" and "Published". They are showing different fields of the TS Form:
draft.content , draft.title and published.content, published.title.
On the "Draft" tab there are "Publish" and "Save draft" buttons.
- Publish button is submitting the data as "published" entry, and then deletes the "draft" entry, and resets the draft.xxx fields, and resets the default values for the published.xxx fileds.
- Save draft button is saving the values as "draft" entry (idk if the form should be reset in this case?...)...Async form default based on another field
Is there a clean way to base an async form field default off of the value of another field? The issue with using the form's default values option is that it creates a circular dependency.
Specific example, I have items which have an "inventory type" option. Inventory type can be retail or consignment let's say. Each item is connected to an account which has its own default for inventory type.
So if the selected account is set to one which defaults to "consignment", I need to update the form default after fetching the account....
form is populating with errors but errors.status logging as 'clean'
here's the form schema, it's somewhat complicated, but it's super strange to me that it'd be showing as clean even though there's error messages present
```ts
const createSchema = (total: number) => {
const FormNumber = S.transform(S.String, S.Number, {...
custom reusable form.Field component, trying to use Form Composition
Hello, I am reading the docs of Form Composition and I just saw the example of creating a form.Subscribe wrapper for a subscription button, so I guess that, for example, I could create a reusable component to be used for all my form.Field text inputs. This is my first attempt:
```ts
import type { ZodObject, ZodRawShape } from "zod";
import LabeledField from "@/components/form/labeled-field";
import { isFieldRequired, useFormContext } from "@/components/form/utils";...
Is it possible to persist form state?
Hey there,
I am looking to migrate a rather complex form over from RHF to Tanstack. My original form had its own custom context and a dedicated Zustand store for managing state along with accessing state in various components. I can see so much potential in Tanstack Form and I really want to switch over to it but one thing I am unsure of is the best method for persisting the state of the form?
Because there's some great integrations with Tanstack Query I did contemplate making use of that and creating an auto-save mechanism to my form instead of using a client-side library? I'd love to add auto save one day anyway. Is it realistic to implement a state management through Tanstack Query and either live feed the data from the form to the database (and vice-versa) or implement a manual 'save progress' button? I want to avoid handling server-side state and client-side state synchronisation manually if I can...
Type inference issue with MomentJS
Hello! I discovered this library recently andI have been trying to see if it could fit our needs in our project. As I was testing for a date field with MUI and MomentJS, I started facing a "Type instantiation is excessively deep and possibly infinite" error from TypeScript.
Based on the FAQ, it seems it could by an issue on your side, so I made a small reproduction: https://codesandbox.io/p/devbox/confident-smoke-hyn4nl
It's also possible I'm doing something wrong, but then I don't know what 😅
Thanks a lot for your help!...