TanStack / form

🤖 Powerful and type-safe form state management for the web. TS/JS, React Form, Solid Form, Lit Form and Vue Form.

Home Page:https://tanstack.com/form

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Array fields do not run onChange validation

gutentag2012 opened this issue · comments

Describe the bug

When calling the array helper method pushValue or removeValue, no onChange validation is triggered on the array field that called the helper methods.

The validation is only run, when setting the isTouched state manually and calling the field.validate("change") method manually.

Your minimal, reproducible example

https://stackblitz.com/edit/tanstack-form-8sihxk?file=src%2Findex.tsx

Steps to reproduce

  1. Click the button "Add one"
  2. Notice, there is no error
  3. Click the button "Validate"
  4. Now there is an error
  5. Click the button "Add one" one more time
  6. The error is still there
  7. Click the button "Validate" again
  8. The error is now gone

Expected behavior

As a user, I would expect every method that results in a mutation to validate for the "change" event, but that does not happen for the array helper methods.

How often does this bug happen?

Every time

Screenshots or Videos

No response

Platform

  • OS: Windows
  • Browser: Chrome
  • Version: 0.19.0

TanStack Form adapter

react-form

TanStack Form version

v0.19.0

TypeScript version

v5.4.3

Additional context

This is not part of this bug, but I would also think working with the array helper methods would be easier if they would also allow for setting the touched state when using the FieldApi.

I was running into a similar issue that's related to this; updating one field that is nested under array did not update the array state. But, after adding an onChangeListenTo validator on a neighboring field, the array state started updating.

Never mind, this is exactly what form.Subscribe is for 😅

@crutchcorn I created a PR that should fix this issue, if you want to take a look.