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
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...
Dirty since last submit
Howdy! After a sidequest at work, I'm back to the migration from React Final Form (RFF) to TS Form. It's going well (although the draft PR with the field wrapper example would be great, so I can make use of
DeepKeyValue and all that), but I've got a new roadblock.
RFF keeps track of the dirty state as a whole, but also since the last submit (dirty and dirtySinceLastSubmit), which is an absolute necessity for our saving indicator that gets used for our autosaving forms.
I tried to convert our saving indicator, but it's not possible without some way of identifying whether a field is modified. isSubmitted and isDirty don't get cleared once the field becomes dirty again....ValidationError - Zod
I'm wondering why ValidationError doesn't return an array of strings, where each item is an error?
According to this screenshot I'm expecting an array like
[ "Password, must contain at least 8 characters" , "Password, must include tuna" ]
It looks always return 1 item with the errors concat with , . The thing is, I want to display 1 error at the time, not all of them for a better UX. If I do it in a hacky way extracting the items based on , it won't work for error messages where I add a comma. Is there any workaround for this?...
Validation that returns additional data
I have a validation that returns additional data and I'm not sure where to put it best.
I collect an Address: (Street, PostalCode, City) - I run basic validations against it
onChange (fields are required)
onSubmit I run the onSubmitAsync validator on the FormApi - this makes a call against the Backend and returns an array of possible address matches for what the user entered....Form Field Errors From Form Validators using Zod validate all fields
```ts
const form = useForm({
defaultValues: {
username: '',
age: 0,...
Issues with validators (zod and native)
Hi there, a TanStack Form newbie here.
I am running into a type error issue with the zod validator adapter.
I was following the docs and zod examples, despite doing everything same I can't get the validators running somehow.
With the zod validator adapter i get following error:...
canSubmit not resetting when using form.Subscribe when form inputs are invalid
When I click the submit button on my form using form.Subscribe when the fields are all empty, it sets the form to be in the !canSubmit/isSubmitting state and just hangs there requiring a full page reload to reset the state.
Should I add some formApi call in my onSubmit (within useForm) to reset the field without clearing the inputs? I am also using validators on each input field....
Best practices for displaying one value and setting another
I'm wondering if there are any best practices or a recommended way to have a field whose display value is different from its actual value.
My specific example is a field that lets you search a list of objects. You search by the display name and the field displays the object's name field when selected, but the value sent to the server is the id field....
useQuery in Field validators
Is there a way to use
useQuery in Field validators?
I have a Form where the user inputs two dates and I make a Request to the Backend to check if those Dates are on a public holiday or not (which would mean the user needs to select a different Date).
To use the Caching from useQuery I would like to define my Query somewhere...