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
Change defaultValues after submission?
I am wondering if anyone has ever dealt with changing defaultValues on a form after submission? I use Query to initialize the defaultValues in the form, then once the form is submitted I refetch the query. I want to change the defaultValues to the associated, new query data and reset the form. This kind of state syncing becomes rather complex in my opinion, but I am exploring this idea. Let me know if it's a dumb one. This would be useful in user settings forms, where the page is not left after submitting the form.
It would be super cool if we could subscribe the defaultValue fields to query data so all we need to do is run reset() after refetching the query (following a form submission) and the fields should already reflect the database....
Subscribe to form state in separate component?
Hey there 👋 is it possible to subscribe to form values in a separate component? I am using a separate component to perform a mutation using this form data. I am currently passing form values through a callback called within the form onSubmit method. Maybe you could let me know if this is a bad idea to begin with.
Set error message from api error response
I have an api that gives you the error messages, for example "user already taken" , "user doesnt exist" , etc.
I wanna set the error message for a specific field in my form. Best way to do it?
I found something like this in a github discussion:...
DeepKeys, only keys with a string value
Hi, I'm trying to make a reusable component that may receive a key into formdata but I want to constrain the component to only receive paths to string values. How can I achieve this? Right now I only have name set to
DeepKeys<TFormData> which I guess is too broad.
```tsx
import type { DeepKeys, ReactFormApi } from "@tanstack/react-form";
import type { ZodValidator } from "@tanstack/zod-form-adapter";...Change validation type after initial validation
Hi!
Is there a way I can configure my form to have the initial validation occur on form submission and when the form has been submitted once, the validations should occur onChange? This is a thing I'm missing from this library compared to RHF.
Cheers 🖐️...
Server validation
What is the best way to set validation errors if within the onSubmit we are using a tanstack/query mutation that returns a 422 error?
Default values with type-safety
I'm using tanstack form + shadcn + zod.
I have a multi-step form and in the third step I have a "select your confirmation method" step to choose between "Email" or "Sms" radio buttons.
For my method variable I have assigned a "" (empty string") but I loose the type-safety because it should be "sms" | "email" and I got a bunch of issues in other functions due to the loose of the type....
Mantine, Tanstack & Zod validation error display
When wrapping a Mantine input component in a Tanstack Field wrapper, is this the correct way to display an error message?
It works,, but I haven't found any documentation suggesting this route or gotten anything else to work with this trifecta. Thanks!...
Using setFieldMeta with a dynamic field identifier
For context I am returning some errors from the sever, these errors have the same field name as the fields in the original form, I can use something like
formApi.setFieldMeta("email", where the field is statically defined but of the life of me i can figure out how it can accept a variable key that is a string of the name of the field I want to add the custom error to.
```
Object.entries(e.fieldErrors).forEach(([key, value]) => {
formApi.setFieldMeta(key, (meta) => ({
...meta,...Simplifying vue-form field binding
I'm currently trying out vue-form and I find the syntax provided in examples for binding a field to be somewhat heavy.
What if the field slot also provided a writable ref that could be used in combination with
v-model ? A common way to achieve this would be using a writable computed ref:
```ts
const model = computed({...debounce for synchronous validation?
This may be a silly question 🙂
I am wondering can I have a field level onChange validator operate on a debounce, without having to "manufacture" an async function?
The validation will be against a zod schema, I just don't want the user to have a bad UX by getting immediate feedback...
Reset Specific Field
I am working on a recipe book and have a form with recipe details including an array field to represent ingredients. When selecting an ingredient a modal is presented with that ingredients' details. If I edit some of these subfields, then close the modal without clicking the confirm button, I want to reset the ingredient details, but not the entire form. As far as I know,
form.reset() will reset the whole form. Is there a way to target a specific field to reset (ex. `form.reset('ingredients[${...Form-level onBlur validation shows error messages during typing for required length fields
I've noticed an unexpected behavior with form-level
onBlur validation in TanStack Form. When using a Zod schema for validation with onBlur, typing in a field that has a minimum length requirement shows validation errors immediately during typing, before the user has finished entering their input or left the field.
Example scenario:
1. Form has multiple fields with Zod validation (e.g., first_name requires min 2 chars)
2. Form setup:...get raw store values
i see tanstack form uses tanstack store under the hood so am curious if it's possible to get the field values in another component directly from tanstack store
TypeScript types when creating your own UI components
So I have been trying to create some reusable UI components for a form similar to how the shadcn/ui form that is built on top of react-hook-form works. My attempt got added as an attachement but here are som snippets of the two components hardest to make work with TypeScript.
Form:
```tsx
type FormContextValue<TFormData = any> = FormApi<TFormData, ZodValidator>;
...
Differentiate the type of the field state value and the validation result?
Lets take this example:
```tsx
const userSchema = z.object({
address: z.object({...
onSubmitAsync validator executing twice when submiting a form
I have a login form where I validate if the email and password are correct in the onSubmitAsync validator. However, in every case the validator gets called twice. I can see it in the browser console and in my api where I see two requests being made. I do not want this behaviour. I don't know if I set it up wrong or it is a bug. If you are able to help me I would very much appreciate it!
How to handle nested object validation
I am using Zod to perform the validation, and I have confirmed, that all of the errors.
I have the following schema:
```typescript
const addressSchema = z.object({
country: z.string().min(1),...
overriding handleChange
Quick question: I have an
<FormTextInput /> that takes a field prop.
Inside of this component I have a const handleChange that will in fine call field.handleChange() after doing some manbo jumbo.
Today I have to work on a new component that will render my <FormTextInput /> but I need to do some formatting before calling field.handleChange()...Inferred types with zod validator
Hello 🙂
Say I have a zod schema that I validate against the form, that is all working well
But what if I don't want to list out all the defaultValues, where it infers types from normally...