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
Is there a way to create subforms?
I would love a way to create a group of fields that always look the same, but I can nest them under a object or similar and reuse the same component
This doesn't work and I cannot find a way to do this right now.
Is this already possible? I would love a way to do this with type safety, as I find this comes up quite often.
A way to add a prefix or a subform would solve this really well I think...
Using isTouched to show error messages fails with schema
Some confusion with the current handling of
isTouched brought me here. I'm using this meta property to surface the error message for the user at the right time.
I've adapted the example to show the issue I see: https://stackblitz.com/edit/vitejs-vite-offm7dia?file=src%2FApp.jsx
1. Touch the first optional input (click and blur). Notice the error messages get set for all fields (correct for the onBlur schema). isTouched is correctly set to true for the first field and hence the relevant error message is visible....Submit form not working
I'm creating my own package for the form.
index.tsx
```
import { createFormHook } from '@tanstack/react-form'...
Remix integration
Hi, trying out the new Form library with a React Router (Remix) app. Feels really good, but I'm struggling to get errors from the server into the formfields. The example also has server validation, but the errors are returned in the global formErrorsMap instead of the errors of the fields. Anyone knows if I'm missing something or if it is not possible to return them in the fields? Made a small fork from the example using zod: https://stackblitz.com/edit/tanstack-form-5jswndpa?file=app%2Froutes%2...
Is focusing the first field with an error when validation fails after submitting a form possible?
I'm looking for something equivalent to: https://react-hook-form.com/docs/useform#shouldFocusError
Spread properties over an input field
I am used to react hook form, and there you can connect an input by doing
{...register('fieldName')}. Now the architecture is different on TSF, but is the a possibility to do something like:
```typescript
<form.Field
name="firstName"
children={(field) => {...Type errors when adding a validator zod schema and initializing the default value to null.
I have a schema where the field month is validated to be non null.
...
const schema = z.object({ month: z.coerce.date()})
const schema = z.object({ month: z.coerce.date()})
Handling nested object validations
Hey there, im currently running into an issue with
zod validations (more like a general issue). Im having a field like schema.output . output is like an object with different values object: { value: string, id: string} and i want to use the AppField object and then display the errors inside. But whenever im accessing the "top level", meaning output the errors are not there, because theyre happening on e.g. value with min(1). unless i dig into field.form.stateand extract the errors from there, i dont see any way to handle those "complex" forms. Its crucial for me, because im running into many scenarios where i need to validate an object rather than one field from the object, since theyre quite complex objects.
cheers and thanks in advance 🙂...Philosophy w/ respect to design systems
I saw this statement in the #form chat history:
We do not want you to use form.Field in normal app code, but instead wrap it into your codebase in a design systemWhy is this desirable, is it still the stance of the library? Not all inputs are form inputs; the value/onChange may just need to derive from normal state. I'm also not sure I want to tie my design system components to one particular form library. Curious to hear more context!...
Duplicate Errors when using same Schema for onChange and onMount validation
Hello! I'm trying to run the same validation onMount and onChange:
```
const simpleFormSchema = z.object({
firstName: z.string().min(4, "must be longer than 4 characters"),
lastName: z.string().min(4, "must be longer than 4 characters"),...
Use form Composition in solid js
Is there a way to use the form composition APIs in solid js yet? The feature doesn't seem to be mentioned in the solid docs + the APIs are not exported from the package that I can see.
I think Tanstack Form seems really amazing! The composition seems like the true killer feature of this library and I would really love to use it in Solid 💙...
Cant getFieldValue(array[idx]) ?
https://stackblitz.com/edit/vitejs-vite-25mr55we?file=src%2Fcomponents%2FForm.tsx
See the type error on row 46, ?
Why can't do I get a type error when trying to grab an object out of an array like this? Accessing specific rows in tables is VERY common when I've used RHF at my jobs.
...
Form Composition - withForm - TypeScript error
Hello!
I apologise in advance for the length of this message. I am in the process of updating my applications to TanStack Form v1 and testing to fully understand the new features/APIs.
Having seen that it is now possible to split up large forms using
withForm (which is great), I decided to do a relatively simple test. Unfortunately, I am encountering a TypeScript error. So I would like to see if anyone knows if this is due to a problem of understanding on my part, or a potential bug that could be fixed....How to derive values to preserve form state integrity
I have two dropdown in my form, categories and movies.
If I select a category, some movie, and then change the category, the movie value should reset to the first option of the new movie list. Otherwise, the form would keep a movie value that doesn't belong to the selected category.
If I had to design such API, I would something like Saphyra does with reducer:...
Basic validation example
Having a frustrating time with the new 1.0.0 and basic validation. Maybe the documentation is not updated?
I JUST want to do this:
- when user submits form
- validate against zod schema...
Relaunch validation even if there is already an error, and reset validation of certain fields
Hello,
I have a form with checkboxes and 2 date fields. Date fields are required only if the third checkbox is checked (this checkbox can be selected only if you choose the item 3 in the select).
The first problem is when I select the item 3 without value in the input at the right and validate the form there is an error, it's ok. But when I check the third checkbox, date fields are now required but if I submit, the error is not displayed because there is already an error on the input field. Is it possible to revalidate all the form on submit even if there is already an error ?
...
Get fieldMeta from array element
Is there a way to getFieldMeta from an index element and not a subField?
For example if I have
people[] and need to see if people[i] has any changes within it, there doesn't seem to be meta associated with that.
I either have the entire people array isDirty or I can see specific subFields like people[i].name is dirty, but no way to check if a particular element has any changes?...onSubmit callback does not get invoked - React Native
Hi! Im trying to use tanstack form with react-native (expo). So far, validation works, but the onSubmit callback never gets called
This is how my code looks like. I would expect to see the console.logs inside of onSubmit, but instead I only see "SUBMITTING FORM" and thats it.
I dont know if i am doing something incredibly stupid that I am not seeing or what, but I cant get this to work
```bash...
How do I type my form if I need to pass it to other components?
Before in 0.40 I was doing:
```ts
form: ReturnType<typeof useForm<DocumentFormData>...
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.
...
