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
Form Composition Question
I'm learning how to do form composition and I wanted to check if this is expected behavior:
```typescript
<form.AppField
name="formName"
children={(field) => (...
Update state of route after submitting the form
Hi guys!
I am pretty new to whole TanStack. I have started to use Router and Form which I like both very much.
I am using tRPC for loading data into routes and I would like to use tRPC for Form submissions as well. But everytime I submit some data the page does not reload the state....
Subscribe and pushValue
When I subscribe to another field in the form, it successfully recieves those values. But how can I push/set those values within a subscriber.
Display general error message from server
How can we show a general (not linked to a specific field) error message from an API?
We have a login api that throws an error but not on a specific field because we don't want the user to know which field is wrong (obviously).
```ts
const form = useAppForm({
validators: {...
Conditional validation schema
Hello dear community,
I have a problem while validation my form schema (schema.png). I have create and update dialog in the same component (dialog.png). I want to make validation based on dialog mode props (create | update). It makes successful api call (adds or updates the record). However, when i check if form parse is successful or not and it gives me this error(error.png).
...
How to clear field errors onChange?
Hello! 👋
I’m using TanStack Form for the first time and trying to achieve the following validation flow:
1. User types into a field.
2. Validation runs only on blur....
Type error in createServerValidate when using discriminated union schemas
When using discriminated unions as schemas, the createServerValidate function gives a type error. If I cast the defaultValues in formOptions, the error goes away. Is this the intended approach or is there some more type safe way to use discriminated unions?
Stackblitz: https://stackblitz.com/edit/tanstack-form-tnj3qpfd?file=src%2Findex.tsx
```typescript...
many setFieldValue breaks form validators
What happens is that when I click on a record in a table, I need to transfer this data to the inputs validated by Zod. To achieve this, I created a function that passes the clicked data with several form.setFieldValues. The data appears correctly, but Zod detects the fields as errors. I tried form.validate() but it didn't change anything.
`const form = useForm({
validators: {
onChangeAsyncDebounceMs: 800,...
AppField doesn't exist on form object returned from useFormContext()
I've been trying to get this to work for two hours now. The premise sounds great but for some reason type inference isn't working.
I have my
form-context.ts file:
```
import { createFormHookContexts } from '@tanstack/react-form';...Form Validation scope
Is the scope of form.store.state.isValid for the whole form including all withForm components or is it for the currently mounted component? I'm trying to find a way to track which steps have errors by setting a Zustand property if that mounted withForm component has any field errors without having to check every single field. So I was hoping to use the isValid property from the store state via useStore. But if that's for all fields across all components, then it's not as useful.
What I'm doing is using field level validations of onSubmit and onChange. I'm probably going to change the onSubmit to onBlur instead. So if there's an error, the user will know right away and that should update the form isValid to false. But again, if that's for the whole form regardless of mounted withForm component, I'll need to find an alternative....
"TanStack Form server error: Cannot access 'formOpts' before initialization"
Hi guys, I'm wondering why we cannot place content from
utils/form-isomorphic.tsx directly in utils/form.tsx.
I mean, when I did this i get an error during form submitting:
```...Put extra meta data in form context
I have a form where every field has to know if
isDisabled is true or false. I'm currently passing the value in as a prop to each component but that doesn't scale super well. Is there a way that I can save this and other form wide information so that I can have the field access the value directly from form context or the store?how to switch to onChange validation after doing onBlur validation for better user experience ?
this code works. but if the user encounters an error and goes back to fix an input, the user doesnt know when the error was fixed.
since it uses onBlur to check. I dont want onChange to be done in the start either ( immediately gets an error when the user starts typing that the email is invalid )
so how could i initially validate with an onBlur ( so user doesn't get an error till they type it out and switches to the next field )
but if they do get an error, i want the user to know when the error was fixed while the user types it out. ( onChange )
react-hook-form does this automatically. maybe i'm missing something....
Handle form in client side
I can't understand why this form keeps refreshing the page, It should stop since I do
preventDefault
```
import {useForm} from "@tanstack/react-form";
import {createFileRoute} from "@tanstack/react-router";
...reusable form field components
Hi everyone, I'm using TanStack Form with SolidJS, and I'm trying to extract some reusable form field components so I can use them across different forms more easily.
For example, I have different data types like weapon, armor, and pet. Each of them has their own specific fields, but also shares some common fields like id, statistic, createdAt, updatedAt, etc.
I'd like to extract these common fields into a shared form component. I'm currently trying to write a component that accepts the form object as a prop, but the FormApi type is really hard to write due to the large number of generic parameters....
define form api instance externally, consume via react
hello,
i'd like to define my store like
const formApi = new FormApi({...formOptions}) ...What is the correct way to use `withForm` with additional props?
I have the following code:
```
export const Form = withForm({
...formOptions,
props: {} as {...
onBlur doesnt trigger in form composition ?
I was trying out form composition. but onSubmit, onChange, all of those triggers validation errors.
However, onBlur doesnt seem to trigger any validation errors until i submit the form.
https://tanstack.com/form/latest/docs/framework/react/examples/large-form?panel=sandbox
try changing the onChange in page.tsx to onBlur in this example
...
Apparently stale `state` in `useAppForm()`, only after submit?
I've got a composition like:
```
<ItemSummary>
...
<Calibration item={calibrationDetail}>...
How to set an inital value for a dropdown in a listener
When you reset a dropdown like here https://tanstack.com/form/latest/docs/framework/react/guides/listeners
say you select a model provider, openai, you select 4o in the model, then you decide you want 3.5 sonnet instead, so you go with anthropic from the provider dropdown, the model dropdown is filled with the claude models and you go with 3.5.
At the moment I'm resetting the model dropdown to blank, but I'm wondering if you can give it an inital value for each provider. Not figured it out yet....