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
Using hidden fields
Can't seem to find how you handle a hidden field that has a value set "inside" the field and not on the default values.
Use case i'm iterating over "delete" buttons and want to have a form for each thats initialized outside the UI, but with a hidden value corresponding to that "Delete" action.
Is there a simple way to achieve this with tanstack forms?...
Activate onChange validation only after submitting once?
```ts
useForm({
...
validators: {
onChange: ({ formApi }) =>...
Excessive rerenders with SolidJS and classList
https://stackblitz.com/edit/solidjs-templates-zqhzdfcv?file=src%2Findex.tsx
Open the preview in a new tab and open up the console. Click and then blur the input field. Console logs 10 rerenders initially and then 4 on each blur. Removing the name attribute fixes the issue. Am I missing something silly? Otherwise I'll post an issue...
Proper way of passing useForm to child
I am getting the error
...
(destructured parameter) is undefined
(destructured parameter) is undefined
Nested form with subForm validation
The use case is something like having
user: {
firstName,
lastName,
address: { ... }...
Handling defaultValues for a required number field
I know this is more of a general React issue than a TF-specific one, but I didn’t run into it with RHF since they don’t use controlled components by default.
I have a required amount field that should be a number. If I use z.number(), I run into the default value issue—I don’t want 0 (bad UX), "" isn’t assignable to number, and undefined causes React’s controlled/uncontrolled warning.
Would it be better to keep it as a string (""), then parse it before submission? Or is there a cleaner approach?...
What is the correct form generic for V1
Hello, I asked a similar question yesterday (thanks all for the help), but wanted to focus the conversation because I'm compromising a lot on typing that I had before V1.
In my app, I use forms as props very often.
I used to use this type to do that before:
...
Type-Safe name prefix
I’m creating a dynamic form, that gets assembled based on an API response.
It consists of a couple of groups of fields.
Each group renders many dynamic fields.
Dynamic field takes care of rendering an appropriate input based on some value in payload.
...
Questions regarding migration to 1.x
Hello, I'm migrating from 0.35 to the latest.
In my react app, I have a lot of forms that are passed as props so I usually need to type them.
I used to do so with:...
Form Validator onSubmit seems to be ignored if a field validator is also present
I'm not sure if this is a bug or an issue on my side but I have a weird behavior.
I have a
onSubmit form validator to validate all my schema on submit. This work well.
Then I also want to have an onChange validator specific for field where I want to validate while the user type or blur. This also work on the field level....Error Using Zod as Form Validator
I was planning to migrate my form from RHF to TF and tried implementing a simple user validator using Zod, but I encountered an error
Next js server actions with tanstack form and zod
I've been looking at the tanstack form validation with the zod schema. I've followed the documentation and made a client side component with zod and everything works great.
Now i've been looking at the Next Server Actions example https://tanstack.com/form/latest/docs/framework/react/examples/next-server-actions?path=examples%2Freact%2Fnext-server-actions%2Fsrc%2Fapp%2Fclient-component.tsx
And if I try that it works fine as well, however when I try to add the zodSchema validator the formErrors that were previously undefined now give a Record<string, StandardSchemaV1Issue[]> | undefined)[] from zod. It is unclear to me how I now would throw/show the right errors in this case. And is it possible in the action.ts to use the zod schema as well instead of using onServerValidate and then throw custom errors in case someone somehow passed the client side validation?...
Strict mode gives weird ts errors
hello, why do i get
Binding element 'isSubmitting' implicitly has an 'any' type and Parameter 'field' implicitly has an 'any' type. for every field or state in the form. form works and i see correct types when hover, no any at all
`import { createFormHook, createFormHookContexts, formOptions } from '@tanstack/react-form'
export const { fieldContext, formContext, useFieldContext, useFormContext } = createFormHookContexts()
export const { useAppForm, withForm } = createFormHook({
fieldContext,...onBlur form field validator doesn't seem to do what I expect it to do
<form.Field
name="price"
validators={{
onBlur: ({ value }) =>
value < 8...
IsSubmitting not working nextjs server action submit
Hey Everyone,
I used the tanstack form nextjs example but the issubmitting is not working.
<form.Subscribe...
Re-using a generic sub-form agnostic of it's parent form gives TS errors
Hi!
First off: thanks for creating an amazing form library. I'm super happy with it so far! Really good stuff.
What I've stumbled across may just be a typescript bug. I'm not sure if it's me using the library wrong, if it's a bug or if it's simply not supported. But what I'm trying to do is to have two separate forms (with different schemas) re-use the same sub-form by leveraging the
withForm-HoC. ...Updating field meta errors from server validation
Following the Tanstack Start example - I am trying to update field meta errors from server validation. The state coming from the form is merged - and the errors and the error map shows correctly in the form state. However, the errors are not trickled down to field level.
I tried to use
setFieldMeta from form level but the errors do not make it to the field. Here is the basic setup:
```useEffect(() => {...Usage of createFormHookContexts and getting basic type of form
While I've seen a couple of threads touching some similar questions, I wanted to ask this once more explicitly:
1. Am I right that I run createFormHookContexts ONCE per application and have all forms in my app -although totally unrelated- using the same useAppForm hook based on the createFormHook using the above defined context? Do I need to wrap my application in the "formContext" (like used to with other createContext's using formContext.Provider)?
2. What is the recommended/easiest way to keep my old behavior on passing the formApi to hooks that MUST NOT BE Functional Components, i.e., hooks. While withForm() allows to wrap my FC's and force them to take a form, i have plenty of hooks (useXXXX) that also need to access the form + need to know the overall DataType. My current approach (using the 1.X version) is doing as following:...
Handling zod and backend errors
Assume, there is a form-level validation for fields - this is zod. Another validation happens during submit - backend API can return submission errors, e.g. "username taken".
How can I store and handle those backend errors? I was thinking
useState with backend errors which are returned in another form-level validator. However, having any errors in the form will block submission (canSubmit is then false and onSubmit won't be triggered).
Am I missing any obvious solution? Beside clearing each field backend errors on change - I would prefer to handle it on form level instead of pushing listeners to each field....