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

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 :)

Jun 07 '25 10:06 tomrehnstrom

View your CI Pipeline Execution ↗ for commit 7834789ab1cfdb2df8a174ad51fa515357f5cce1.

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

Jun 07 '25 19:06 nx-cloud[bot]

More templates

@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

Jun 07 '25 19:06 pkg-pr-new[bot]

Codecov Report

:x: Patch coverage is 56.09756% with 18 lines in your changes missing coverage. Please review. :white_check_mark: Project coverage is 88.33%. Comparing base (488e3a7) to head (7834789). :warning: Report is 68 commits behind head on main.

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

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

:umbrella: View full report in Codecov by Sentry.
:loudspeaker: Have feedback on the report? Share it here.

:rocket: New features to boost your workflow:

:snowflake: Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
:package: JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

Jun 07 '25 19:06 codecov[bot]

Hmmm ... listeners currently don't cause any side effects, so this change seems conflicting with that.

If your use case is file uploads and waiting for them to finish, can't you disable the submit button while that upload is pending (instead of refactoring listeners to affect form state?)

@tomrehnstrom

Aug 02 '25 15:08 LeCarbonator

@LeCarbonator Yeah I think I overengineered this solution a bit, I got it working in another way!

Aug 07 '25 10:08 tomrehnstrom