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
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!...
Get type inference without using defaultValues
Hello, I am trying not to use
defaultValues in my form and resetting the form when the deliveryNote prop changes because I want my form to be synchronized with my data sources, both the deliveryNote and nextAvailableDeliveryNoteIdData are updated in realtime.form with dependent fields (more complicated than just linking)
i have this sort of UI shown in the image. for the
cost field, i'm tracking the raw value, for the splits field, i'm tracking only the percentage value. when it transitions to 'amount' mode, i just compute the value from the percentage of the value in 'amount', and show that. similarly onchange, i just transform the raw value into the proper percentage
in the basic cases this is easy. percent mode is no problem, those don't even really care what cost is, where just tracking essentially a proportion. also, when cost is static, this is also easy, the transform cycle above ^, is straightforward enough
this gets tricky when you're in amount mode AND change the cost value. this gives me two possible scenarios:...
generic Input element
i have this generic input element i register with the form, and reduces a whole lot of boilerplate, basically i pass down the field and then setup everything else as is, and is configurable from top down
the issue is that this really is only working for fields that hold string | number values in the form
i have a more complex field that's an array of objects. the field will only track one of the fields, and then i'll have basically a encode decode cycle where...
typing `withForm`
Is this the correct way to type
withForm?
```ts
import { useAppForm, withForm } from "~/hooks/form";
const PersonalInfoSection = withForm({...