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
Delay between <form> onSubmit and react-form onSubmit callback called
When I add a console log to both the form's onSubmit callback, and the useForm hook's options onSubmit callback, I see there is a slight, but noticeable, delay between the two logs.
Performance issues with TypeScript language server
TypeScript language server (v4.9) is working fine, except when I interact with anything related to @tanstack/react-form. For example, hovering over the form variable returned from useForm causes the language server to hang for quite a while.
Has anyone else experienced this? I haven't had the same issues with other tanstack libraries, and I'm considering uninstalling. 😦
Thanks....
Type Errors in Sample Example
I'm following this Example to create a sample form (https://tanstack.com/form/latest/docs/framework/react/examples/simple) and noticed that
form.Subscribe has type errors in the selector and children prop, I can reproduce this in my local as well. Is the example incorrect or did the API change? Looking for an easy way to create a Submit button for a form, thanks!Is it possible to do nested arrays with multiple `mode="array"`?
At the moment to achieve the wanted behavior I need to remove the nested
mode="array" which again later on ruin some type safety when trying to use ex handleChange. What I currently need to do is:
```typescrict
onValueChange={(value) =>
handleChange(value as never)
}...Form field with arrays
A question about tanstak form, more precisely on the management of tables in view3. Arrays example, in this example the :name field does not have the correct PrefixObjectAccessor typing. A solution ?
how to remove errors properly when typing with onBlur validation
I’d like to achieve a nice UX following ideas like https://ux.stackexchange.com/a/134385
```
Once the field is validated, and shows some errors, the user wants the error to vanish as soon as the edited value is correct, not when he leaves the field or submits the form (which probably will be disabled anyways as long as there are errors displayed).
...
Does it make sense to trigger onChangeAsync when onSubmit is called?
As
onChangeAsync is mostly there for devs to make API calls which are debounceable, does it make sense to have it retriggered when onSubmit is called?
Should we add an option to disable this behaviour?...How to get field error when using createFormFactory with Nextjs with App router?
Hi
I'm switching from
react-hook-form to @tanstack/react-form and I'm trying to understand how the validation works with zod and creatFormFactory. I've followed this example: https://tanstack.com/form/latest/docs/framework/react/guides/ssr
I've created this CodeSandbox
...Field array validation not working correctly when field is removed
When a field array field is removed with a validation error on it, the field array that was +1 in the array shows the removed field's validation error, even tho the field previously did not have validation errors. It seems as tho validation is not running properly after an element is removed from the field array. I tried to call form.validateAllFields() after removing an element from the field array, but that leads to Uncaught (in promise) TypeError: Cannot read properties of undefined (reading...
Validate specific field on change
I have 2 date components, and on change for either, I would like to trigger validation on the other date component. I don’t want to trigger a full form validation. I have tried useField and the validate function with change and the value, but it doesn’t seem to trigger the validation for that field. Is this possible?
setValue onChange in TanStack Form (third party date time library (Dayjs) with Zod validation)
How do I set values in a TanStack form? I can't figure this out, and I've reached the limit of my ability to understand the documentation. This is a question that follows up the thread I have in<#1212550427372036116>
validateFormData in Solid Start Action
I'm currently testing out TanStack Form in SolidJS, and was trying to see how well I could get it working with the Actions built into Solid Start. Here's a code snippet of what I'm working with
```ts
var formFactory = createFormFactory(() => ({
defaultValues: {
username: "",...
Extracting the input element to make it reusable!
i this demo example everything works fine! But I need a way to extract out the input element into a separate component so that i don't need to write the input elelemnt again and again! But the problem becomes whever i tried to make a Field APi with general types the children prop of the form dont want to accept it! And normally i dont like using any it show a red mark (which is not that of a big deal) but something of personal preferrence!
```
import { useForm } from "@tanstack/react-form";
import ActionButton from "../../Common/Button/Button";
...
Zod Integration
Hey guys, is there a way of applying a zod schema "globally" to a form instead of applying the zod properties to each individual field. Something like
import { validateForm } from "./formValidator"
const form = useForm({
validatorAdapter: zodValidator(validateForm),...
Is there a dirty flag? (True if there is even one character in the form.)
Hi, actually I find tanstack form, and I try it now!
Is there a stable identifier for array fields?
I've been playing around with the library and liking it very much so far. I was surprised that to docs use the array index as key. See https://tanstack.com/form/latest/docs/guides/basic-concepts#array-fields
I wanted to to add a drag-and-drop reordering to my array fields but without a stable identifier it's almost impossible. So here are my questions:
- Is there an undocumented stable field identifier?
- If not, are there plans to add one?...
What's the recommended way to patch the entire form?
For example, if I'm using the same component to create/edit an entity, I want to replace the default values when there is data in the server for that entity.
How can I push the server data into the form?
Thanks....
Validate on change only after the first submit
Hi,
From my point of view, the best validation is done "on change" but only after the first submit. For instance, the first name must be minimum of 3 characters but I don't want to display an error as soon as the user starts typing their first character (or 2nd, which is still not enough to pass validation).
However, once the user has tried to submit the form, and is fixing all the errors, I want live feedback = on change....
creating a reusable styled form component
Hey, so I am working on creating a styled and aria friendly reusable form component using tanstack/react-form. I havent done that much yet because I am unsure of the best approach here. I am generally wondering if it is a bad approach to create a separate context for the form, and pass in formOptions. The plan is to create different styled form fields for a labeled input, checkbox etc with all predefined aria ids and styles. This is what I have so far, and it would be nice with some feedback if I am using the library correctly for this. I am also not completely sure if my type definition for the fromOptions is correct. Thanks for any help :)
```js
type FormProps = HTMLAttributes<HTMLFormElement> & {
formOptions: FormOptions<Record<string, unknown>, typeof zodValidator>;...
File still adds even if yup validation fails
```
validators={{
onChange: yup
.mixed()
.required("A photo ID selfie is required")...
