feat(form-core): Async field onChange with submition handling

[tomrehnstrom]

Hello!

Async field level onChange handlers was one of the features that made me want to switch to Tanstack/form but I ran into a problem where I wanted to modify the value of the field using a debounced async function on the onChange but when submitting the form I want to ensure that the async onChange has been correctly ran before allowing submission/validation.

A concrete example is in a dynamic form I have users can add image upload fields, that I want to begin uploading to s3 onChange, but they should not be allowed to submit unless the upload function has been completed successfully and pressing submit should begin loading until all the actions/uploads are completed.

I have thrown together a working, but maybe not perfect implementation, and modified the simple example to allow playing around with it. I would be happy to finish the feature if others also agree this would be a good feature :)

[nx-cloud]

View your CI Pipeline Execution ↗ for commit 7834789.

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

---

☁️ Nx Cloud last updated this comment at 2025-06-07 19:32:44 UTC

[pkg-pr-new]

More templates

• @tanstack/form-example-angular-array
• @tanstack/form-example-angular-simple
• @tanstack/form-example-lit-simple
• @tanstack/form-example-lit-ui-libraries
• @tanstack/form-example-react-array
• @tanstack/form-example-react-compiler
• @tanstack/field-errors-from-form-validators
• @tanstack/form-example-react-large-form
• @tanstack/form-example-react-next-server-actions
• @tanstack/form-example-react-query-integration
• @tanstack/form-example-remix
• @tanstack/form-example-react-simple
• @tanstack/form-example-react-standard-schema
• @tanstack/form-example-react-tanstack-start
• @tanstack/form-example-react-ui-libraries
• @tanstack/form-example-solid-array
• @tanstack/form-example-solid-simple
• @tanstack/form-example-svelte-array
• @tanstack/form-example-svelte-simple
• @tanstack/form-example-vue-array
• @tanstack/form-example-vue-simple

@tanstack/angular-form

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

@tanstack/form-core

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

@tanstack/lit-form

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

@tanstack/react-form

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

@tanstack/solid-form

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

@tanstack/svelte-form

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

@tanstack/vue-form

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

commit: 7834789

[codecov]

Codecov Report

Attention: Patch coverage is 56.09756% with 18 lines in your changes missing coverage. Please review.

Project coverage is 88.33%. Comparing base (488e3a7) to head (7834789).
Report is 7 commits behind head on main.

Files with missing lines	Patch %	Lines
packages/form-core/src/FieldApi.ts	43.33%	16 Missing and 1 partial ⚠️
packages/form-core/src/FormApi.ts	90.90%	1 Missing ⚠️

Additional details and impacted files

@@            Coverage Diff             @@
##             main    #1562      +/-   ##
==========================================
- Coverage   89.24%   88.33%   -0.91%     
==========================================
  Files          31       31              
  Lines        1432     1475      +43     
  Branches      366      373       +7     
==========================================
+ Hits         1278     1303      +25     
- Misses        137      154      +17     
- Partials       17       18       +1     

☔ 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.