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
v.45.1 and type errors
I'm trying to update from 42.1 and it's blowing up with new requirements
Generic type 'ReactFormExtendedApi' requires 10 type argument(s).
Where I've been passing just 1 argument without problem.
...
Getting all errors from field AND subfield
I have three subfields I would like to have a list of errors from. I noticed that there isn't a convenient way to do that, which either means I have to manually call
<form>#getFieldMeta() on all subpaths, or get all errors and reduce them based on my parent field's name.
Is there an easier way?
Example of my implementation:...should blur trigger onChange validation?
Hey there, appreciate the library, was doing some form work and noticed I'm getting
onChange validation errors when clicking into and then out of a field (but without changing the value). Looking at the code it seems like if a field was never previously touched, then blurring the field causes the "change" validation to run. Does this seem accurate? Did I miss something in the docs re: this behavior?
https://github.com/TanStack/form/blob/main/packages/form-core/src/FieldApi.ts#L1602...field.state.meta.errors type is undefined[] when using Form level schema only?
https://stackblitz.com/edit/vitejs-vite-4fblmacv?file=src%2Fcomponents%2FForm.tsx
You can see the highlighted type error for errors? Not sure if this should be inferred from a generic? I notice that if I use a field level validator, the type is updated....
Can't use Zod/Yup schema for form level validator?
On 0.43.2, when I try to use a Yup or Zod schema at form level, I get a type error for validators.onChange?
https://stackblitz.com/edit/vitejs-vite-bnbraktt?file=src%2Fcomponents%2FForm.tsx
What's the appropriate way to use Yup/Zod now? Dont think we need validatorAdapter anymore....
Is this a bug with removeValue on nested array elements?
Hey all, I thought I should ask here before posting the issue in the repo just in case. I have a made a minimal example which is attached but I'm not sure if its a bug or if I'm doing something wrong.
I am trying to remove an object from a nested array. This is the schema
```tsx...
Equivalent to setError?
Hi. I am using
react-hook-form now, and my foel has recaptcha. I am keeping track of recaptcha in the form state, like any other input. I was using setValue() to set the value in the form state after the widget has been clicked and setError() when the server was returning an error related to recatpcha. Using TanStack Form, I replaced setValue() with setFieldValue() but I do not know how to replace setError(). Any tips? tahnk you 🙂"has been changed since submission" state?
Is there a way to have a state like "changed since last submission" on the entire form. Ideally the analogs for dirty/touched.
I've tried building this myself to no avail, and it doesn't seem like it's available in the API. Thanks!...
Conditional fields and validation?
https://stackblitz.com/edit/tanstack-form-gecmjp4w?file=src%2Findex.tsx
How to handle conditional fields, when
visible is false, lastName should not validate here....Different validation strategy when there is an error
Is it possible to set the validator to run
onBlur by default but when there's an error in a field, revalidate that field using onChange? RHF has a onTouched mode for validation that take care of thiscreating a form context and using useField from that context
while using version
0.33.0
i did something link this
FormContext createContext<ReactFormApi<[type inferred from zod schema]>
...Globally logging user interactions
Does anyone have any idea or strategy for logging user interactions with Form elements on a global scale instead of at the form field or button?
Any advantage to setting defaultValues instead of setFieldValue?
We are loading a bunch of values from an API on mount and setting them through setFieldValue.
I see that we can also set them through the useForm defaultValues and I was hoping that doing this would keep the fields isTouched to false. However both approaches seem to result in the fields being isTouched:true so I'm leaning towards just keeping the setFieldValue.
Are there any advantages to using defaultValues instead of just setFieldValue on load? Why would I do either?...
how to disable field based async validation if value === defaultValue
hi, i try to disable async validation (ask the server if the value exists) if the current value is the defaultValue of this field. i want to use:
```js
//...
onChangeAsync: ({value, fieldApi}) => {...
Reset field meta data
Is there a way to reset meta data of a field? Context is a field being conditionally rendered, and there's an edge case of it being removed -> re-added where the field retains it's meta data. Haven't had any luck searching the documentation for this functionality.
Visible fields are always isTouched
I'd really like to use the isTouched meta value on fields but I've yet to see a field on the page with isTouched: false. No matter how I initialize or defaultValue to null, the fields are always isTouched.
The only ones I've been able to have not touched are ones that are hidden.
What am I missing - how can initialize a form with visible fields and not touch them?...
How to sync with external store like Zustand?
Hey there 👋 what is the best way to sync the form store with an external store? I am using Zustand to initialize form values and also to persist form store values using Zustand's
persist() middleware.
My current solution utilizes the internal Store api to subscribe to store changes. I then update the Zustand store with new store values as they come. In the following snippet, you'll see that I have tried subscribing in two ways. Directly calling subscribe outside of a useEffect causes nearly 100 store updates. The current approach only updates the store 5 times, and this may be acceptable since this causes no rendering issues (the store values are only grabbed at component mount). Here is my current solution:
```TypeScript...Custom Meta value for field?
We want to show our users when a field has been prefilled (and change some styling when they edit it).
I'd love to have the ability to add a custom meta field like field.meta.isPrefilled (boolean) to keep track of this.
The AI Orama chatbot seems to think it's possible, which leads me to believe it was possible with older versions.
const { field } = useField('yourFieldName');...
Get index of pushed value in field array
Is there a way to get access to the index of a field that was pushed to a field array? It doesn't look like anything is returned from the
pushValue() method. For context, I have an add/edit modal that renders an item in the modal that I am either adding or editing, and that is determined by the index in the array. This is fine with selecting an item to edit because the index was already defined, but when adding I would have to do something like `setSelectedIndex(form.state.values.items?.length...