feat(core): form listeners

[harry-whorlow]

Adds form listeners to formApi.

[nx-cloud]

View your CI Pipeline Execution ↗ for commit 44a8474.

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

---

☁️ Nx Cloud last updated this comment at 2025-04-20 19:11:24 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@1261

@tanstack/form-core

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

@tanstack/react-form

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

@tanstack/lit-form

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

@tanstack/solid-form

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

@tanstack/svelte-form

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

@tanstack/vue-form

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

commit: 44a8474

[codecov]

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 88.86%. Comparing base (0c79f24) to head (44a8474).
Report is 1 commits behind head on main.

Additional details and impacted files

@@            Coverage Diff             @@
##             main    #1261      +/-   ##
==========================================
+ Coverage   88.83%   88.86%   +0.03%     
==========================================
  Files          31       31              
  Lines        1379     1383       +4     
  Branches      347      347              
==========================================
+ Hits         1225     1229       +4     
  Misses        137      137              
  Partials       17       17              

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

[harry-whorlow]

Do not merge until 'infinite type' I've fixed 🤟

[harry-whorlow]

Here I used to have fieldValue also being returned, however since it could be any of the field values I couldn’t type it.

I though it best to remove it and let the user access it with something like formApi.values[fieldName] so either its any, or if its a defined value such as formApi.values.age it can be inferred.

What do you think?

[Balastrong]

Challenge: why don't we pass the entire fieldApi to the callback?

[harry-whorlow]

Well, I envisioned form.listeners being used for logging so I think I was immediately drawn to the whole state of the form. But, now that you mention it I think that also works pretty well. I would like to keep the field name and formApi immediately available for the onChange and onBlur for convenience purposes... Also, having formApi there keeps it more consistent with the onMount and onSubmission.

So something like:

this.form.options.listeners?.onBlur?.({
  fieldName: this.name,
  formApi: this.form,
  filedApi: this
})

What do you think? This isn't a hill I want to die on though, so if your strongly against it then I'm also cool with changing it.

[edit]
So after playing around with this it'll have to be AnyFieldApi since it comes from the field instantiation and at a form level we don’t know what child it comes from so typing it won't work. But, its an easy change.

Unless you can suggest something? 😊

[harry-whorlow]

Note to self: move onChange out of the form listeners debounce logic and implement it in form

[edit] resolved