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
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...Array of Forms
What is the best approach to have a list of forms with multiple fields?
Use Case: List of task cards with select box and editable content. User can modify content and toggle select, then use submit to add all tasks.
I tried following the example for array fields, but not sure how to relate to form arrays. Should TaskCard accept form directly? How to properly tell TaskCard which item in task array?...
Resetting validation errors
I have a large form of over 100 fields. Large sections of it can be added/removed so there is a need for clearing out validation errors if a section that has errors is removed.
Otherwise the user could be unable to submit because there are validation errors in fields they can't see.
Currently I'm going about it this way:
If a section is removed I loop through the fields in that section:...
valibotValidator deprecated
'valibotValidator' is deprecated.ts(6385)
validator.d.ts(11, 4): The declaration was marked as deprecated here.
'valibotValidator' is deprecated.ts(6385)
validator.d.ts(11, 4): The declaration was marked as deprecated here.
Does onMount not show validation errors?
Hi! I'm working on a form with an onChange validator and our issue is that validation is running only onChange (expectedly) so the user could submit an empty form. I saw the discussion on GH and added the same validator onMount.
I am happy I do not see the validation errors we have defined (eg 'field required') onMount. However, I am not sure if this is expected with 'onMount' validation or I have done something wrong elsewhere?
I couldn't find anything on the docs, so could someone please clarify - do validation errors now show onMount?...
Solid Start Actions + TanStack Form
is it possible to use solid start actions and tanstack forms together (for progressige enhancement)
UseField example?
Is there an example on the proper usage of the
UseField hook? hopeully someone can point me to a repo with an eaxmple? thanks in advanceLinked fields and onChangeAsync
Hi!
I have a form where at least one of two fields must be present (nationalId and/or passport). The problem is that when I change one field, it does fire the other field validation but not his own. I am using
onChangeAsync. onChangeListenTo does not work when using onChangeAsync? When I change to onChange it works as intended.
Maybe I am not approaching this problem the way I should....is it possible to use form values as a useMemo dependency ?
so i have this
```typescript
const calculatedTotal = useMemo(() => {
...