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
Lack of Type Safety with Pre-bound Field Components?
https://tanstack.com/form/latest/docs/framework/react/guides/form-composition#pre-bound-field-components
This documentation suggests that pre-bound field components "infer" that such a field should assume that the value in the form state has the same type as the type argument to
useFieldContext. However, this means that whenever I'm actually using the pre-bound field, there are no guardrails preventing me from using a pre-bound field with a form value of a different type.
Demonstrating in code, it seems like a big danger that I can do this:
```...What's the recommended way to handle hidden fields?
I have a checkbox that, if checked, will make another text field appear. The zod validation will make use of
.superRefine to require the text input value only if the checkbox is checked (its field as a value of true).
I noticed that depending on how I hide the text field, the meta (and the errors) may not be up-to-date.
Here some relevant code:...Hello everyone. I am looking for someone who can collaborate with me.
As you can see my profile I am a senior software developer.
I am looking for developer who can collaborate with me.
All junior and senior are welcome.
European and American developers would be a great fit.
Competitive compensation will be provided....
Type Errors with Zod Enum Usage
Here is my code:
```ts
import { z } from "zod";
import { useForm } from "@tanstack/react-form";...
TypeScript issue if the (zod) schema is a union or is using superRefine?
Hi,
I created a minimal reproducible example of a ecommerce form I am working on: https://github.com/thobas-dnvgl/tanstack-demo
The ieda is to ask for the mailing address and have a choice (off by default) to enter another address for the billing address....
Multiple reusable fields in one component
Hey, I'm just learning the API and have a question about composition.
I want to create a component that contains multiple fields and is reusable across mutiple forms. For that i created a defaultValue setting with just the used fields in the component:
```...
Typesafety in FormAPI and FieldAPI for Shadcn Form Components
Hi @crutchcorn
Just following up from our convo ā Iām the one working on the TanStack Forms + shadcn/ui integration. Iām mainly stuck with getting things fully type-safe, especially around FormAPI and FieldAPI.
example code: ...
Hi I'm using latest version of tanstack/form
i want to pass the form as prop to the presentation component
but i'm finding issue with the types can you help
```
import React from 'react';
import { useForm } from '@tanstack/react-form';...
Move to Next Field on Key Press
Hello,
I want to achieve this behavior just like what setFocus does in RHF. Does Tanstack Form provide this type of behavior or is there a way so that I don't have to create
useRef manually just to make it focus after each keypress (enter)?...onServerValidate example lacking other patterns.
I don't understand why we have formErrors.map but on onServerValidate but the example only returns 1 error message.
```ts
const serverValidate = createServerValidate({
...formOpts,...
Handling server errors coming from `useMutation`
What is the best way to show Tanstack Query mutation errors with Tanstack Form?
@Vincent asked the same question before in the form channel
https://discord.com/channels/719702312431386674/1100437019857014895/1352359813853483132...
Adding additional props to component wrap with withForm
Hi @Luca | LeCarbonator . Currently learning the form apis. I would like to ask how would you pass additional props to a component that wraps
withForm HOC. Do I need to defined that additional props in with default value? props: {} in withForm hoc?
```tsx
import { withForm } from '@/shared/hooks';
//aditional props here...form.AppField -children-typeerror
<form.AppField
name="firstName"
children={(field) => <field.TextField label="First Name" />}
/>
<form.AppField
name="firstName"
children={(field) => <field.TextField label="First Name" />}
/>
Use field value with React Transitions
When I call
startTransition(() => field.setValue(...)) inside a form.Field component, it does not seem it triggers what startTransition does. I wanted to use this with React View Transition API, but calling field.setValue inside startTransition did not fire the transition animation. Replacing it with a simple useState hook, it worked well.
Is this because TanStack form uses @tanstack/store instead of a plain useState? And if so, is there any way to circumvent this?...Validator schema as subset of default values
So I've a form where I temporarily keep some values, which are set in my default values but on submit, they are discarded by the zod schema.
For example:
```...
Server Validation With Next.js and form input
Hello,
I have a question about implementing server actions in Next.js when working with file inputs. I'm currently building a form that allows multiple file uploads, managed via a separate (unrelated) component.
The issue I'm facing is that while the form state correctly holds the file data and client-side validation passes, the file ends up being empty during server-side validation. This seems to happen because the actual file input element was never directly changed by the user, so its native value isn't included in the form submission....
Pass props through context?
Is there a way to set up some variables on the top useAppForm level that would be accessible through useFieldContext on the field level? Use case I want to be able to configure some UI options for the whole form (show/hide errors, compact vs normal mode, etc) and if I don't have to set up an additional context for that it would be nice.
Complex object Select field, no reasonable defaultValue, and validation
I've got a "Create equipment" form. It's got 2 required selections, which will determine relations with other data. There's a "model" for selecting the equipment model relation, and a "customer" for selecting the customer who owns this instance of that model.
Both of the selectors result in field values that are complex object.
```
<form.AppField...
Best practice typing a boolean field using zod (or other schema library)
Let's say I have a field in my form where a user has to pick "yes" or "no". There is no default.
Arguably I would use a zod type like so
isDogOwner: z.boolean()
Now, if I don't provide a default value in my defaultValues, typescript will complain that it's not matching the schema.
If I make it optional in zod, it will be optional in defaultValues.. but now my form validation is not right since I need the user to make a choice before submitting....Type hints when declaring formComponent / fieldComponent
Is it possible to declare a
fieldComponent / formComponent so that it is aware of the form / field it is used from?
For example a Textfield component that error out if the field it is used in is not of type string
Or an example I did recently: I wanted a generic ArrayField that displays a consistent field for array fields in form. I did it like this (look into message below)
but it would be really nice to be able to not tie it to current form (in here FormData) but make it generic, preserving type safety for name prop...