Skip to content

Conversation

kusiewicz
Copy link
Contributor

@kusiewicz kusiewicz commented Aug 19, 2025

During implementing this and testing deleteField I found out that this method does not work.

When a form field has onChange validation and the deleteField method is called on it, an error appears.

FormApi.ts:1586 Uncaught TypeError: Cannot read properties of undefined (reading 'errorMap')
    at FormApi.ts:1586:27
    at functionalUpdate (utils.ts:26:8)
    at FormApi.ts:2058:20

error: https://bolt.new/~/vitejs-vite-ceu2fl73

I think flow look like this:

  1. Remove button click => form.deleteField('firstName').
  2. Delete function changes values so onChange validator runs.
  3. This validator runs on the form level and still tries to set errors.fields.email = 'error message' - so validateSync tries to update metadata of deleted field.
  4. setFieldMeta calls functionalUpdate with undefined (since field does not exists in fieldMetaBase).
  5. Updater tries to do ...prev where prev now is undefined -> error.

So validateSync iterates through field list that already semes to be outdated. There is a check if (!fieldMeta) in this function but I guess we have to add as well if (!fieldMetaBase).

@kusiewicz kusiewicz marked this pull request as draft August 19, 2025 18:17
Copy link

nx-cloud bot commented Aug 19, 2025

View your CI Pipeline Execution ↗ for commit 842956e

Command Status Duration Result
nx affected --targets=test:sherif,test:knip,tes... ✅ Succeeded 30s View ↗
nx run-many --target=build --exclude=examples/** ✅ Succeeded 1s View ↗

☁️ Nx Cloud last updated this comment at 2025-10-07 06:01:31 UTC

Copy link

pkg-pr-new bot commented Aug 19, 2025

More templates

@tanstack/angular-form

npm i https://pkg.pr.new/@tanstack/angular-form@1706

@tanstack/form-core

npm i https://pkg.pr.new/@tanstack/form-core@1706

@tanstack/form-devtools

npm i https://pkg.pr.new/@tanstack/form-devtools@1706

@tanstack/lit-form

npm i https://pkg.pr.new/@tanstack/lit-form@1706

@tanstack/react-form

npm i https://pkg.pr.new/@tanstack/react-form@1706

@tanstack/react-form-devtools

npm i https://pkg.pr.new/@tanstack/react-form-devtools@1706

@tanstack/solid-form

npm i https://pkg.pr.new/@tanstack/solid-form@1706

@tanstack/svelte-form

npm i https://pkg.pr.new/@tanstack/svelte-form@1706

@tanstack/vue-form

npm i https://pkg.pr.new/@tanstack/vue-form@1706

commit: 842956e

Copy link

codecov bot commented Aug 19, 2025

Codecov Report

❌ Patch coverage is 75.00000% with 1 line in your changes missing coverage. Please review.
✅ Project coverage is 90.44%. Comparing base (6892ed0) to head (842956e).
⚠️ Report is 24 commits behind head on main.

Files with missing lines Patch % Lines
packages/form-core/src/FormApi.ts 75.00% 1 Missing ⚠️
Additional details and impacted files
@@            Coverage Diff             @@
##             main    #1706      +/-   ##
==========================================
+ Coverage   90.35%   90.44%   +0.09%     
==========================================
  Files          38       38              
  Lines        1752     1790      +38     
  Branches      444      453       +9     
==========================================
+ Hits         1583     1619      +36     
- Misses        149      151       +2     
  Partials       20       20              

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:
  • ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
  • 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

@kusiewicz kusiewicz marked this pull request as ready for review August 21, 2025 08:18
@kusiewicz
Copy link
Contributor Author

Please, verify the idea. If I'm thinking in a proper direction I will proceed and add unit tests.

@kusiewicz
Copy link
Contributor Author

@LeCarbonator? :)

@LeCarbonator
Copy link
Contributor

Will try to review this in the coming days

Copy link
Contributor

@LeCarbonator LeCarbonator left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'm not convinced this would be the ideal solution, but this minor fix helps catch the irritating runtime errors. Thanks for the step-by-step explanation!

Copy link

changeset-bot bot commented Oct 7, 2025

🦋 Changeset detected

Latest commit: 842956e

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 9 packages
Name Type
@tanstack/form-core Patch
@tanstack/angular-form Patch
@tanstack/form-devtools Patch
@tanstack/lit-form Patch
@tanstack/react-form Patch
@tanstack/solid-form Patch
@tanstack/svelte-form Patch
@tanstack/vue-form Patch
@tanstack/react-form-devtools Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

@LeCarbonator LeCarbonator changed the title fix(core): fix deleteField method fix(form-core): prevent runtime errors when using deleteField Oct 7, 2025
@LeCarbonator LeCarbonator merged commit 74af33e into TanStack:main Oct 7, 2025
6 of 7 checks passed
@github-actions github-actions bot mentioned this pull request Oct 7, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants