feat(form-core): add onDynamicListenTo validator option #1896

jiji-hoon96 · 2025-12-02T01:19:37Z

Adds support for onDynamicListenTo to enable cross-field dynamic validation.

Changes

Added onDynamicListenTo to FieldValidators interface
Implemented dynamic cause handling in getLinkedFields method
Added unit tests for both sync and async scenarios

// Password confirmation with cross-field validation
<form.Field
  name="confirmPassword"
  validators={{
    onDynamicListenTo: ['password'],  // ← Listen to password changes
    onDynamic: ({ value, fieldApi }) => {
      const password = fieldApi.form.getFieldValue('password')
      return value !== password ? 'Passwords must match' : undefined
    },
  }}
/>

Fixes #1698

- Add onDynamicListenTo to FieldValidators interface - Implement dynamic cause handling in getLinkedFields method - Add password/confirmPassword example demonstrating cross-field validation

changeset-bot · 2025-12-02T01:19:40Z

⚠️ No Changeset found

Latest commit: 5dbb044

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

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

nx-cloud · 2025-12-02T01:20:01Z

View your CI Pipeline Execution ↗ for commit 5dbb044

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

☁️ Nx Cloud last updated this comment at 2025-12-08 08:47:04 UTC

pkg-pr-new · 2025-12-02T01:22:18Z

More templates

@tanstack/angular-form

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

@tanstack/form-core

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

@tanstack/form-devtools

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

@tanstack/lit-form

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

@tanstack/react-form

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

@tanstack/react-form-devtools

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

@tanstack/react-form-nextjs

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

@tanstack/react-form-remix

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

@tanstack/react-form-start

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

@tanstack/solid-form

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

@tanstack/solid-form-devtools

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

@tanstack/svelte-form

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

@tanstack/vue-form

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

commit: 89adf3a

codecov · 2025-12-02T01:24:26Z

Codecov Report

❌ Patch coverage is 90.47619% with 4 lines in your changes missing coverage. Please review.
✅ Project coverage is 89.64%. Comparing base (6892ed0) to head (89adf3a).
⚠️ Report is 88 commits behind head on main.

Files with missing lines	Patch %	Lines
packages/form-core/src/FieldApi.ts	94.44%	2 Missing ⚠️
packages/form-core/src/FieldGroupApi.ts	0.00%	2 Missing ⚠️

Additional details and impacted files

@@            Coverage Diff             @@
##             main    #1896      +/-   ##
==========================================
- Coverage   90.35%   89.64%   -0.71%     
==========================================
  Files          38       48      +10     
  Lines        1752     1951     +199     
  Branches      444      493      +49     
==========================================
+ Hits         1583     1749     +166     
- Misses        149      181      +32     
- Partials       20       21       +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.

- Add test for onDynamic cross-field validation with onDynamicListenTo - Add test for onDynamicAsync cross-field validation with onDynamicListenTo - Fix getLinkedFields to return validator cause for each linked field - Add 'dynamic' case to defaultValidationLogic - Clear dynamic errors when running change/blur validation

LeCarbonator

I like the idea, but the implementation needs some adjustment. There's a chance the issues come from a core problem with onDynamic, but it's not clear from this diff alone.

Missing changes

~~There's also FieldGroupApi.getFormFieldOptions that needs to include onDynamicListenTo. Follow the onChangeListenTo / onBlurListenTo lines in there as reference.~~ Addressed in 89adf3a

LeCarbonator · 2025-12-08T07:13:07Z

examples/react/simple/src/index.tsx

I'm not sure if adding this to the simple example makes sense, since

It's not a simple implementation

It's unrelated to the other fields

Having linked fields as examples is a good idea though. Maybe it could be its own example? Perhaps it can be added to large-form instead. I'll leave it up to you.

I believe it makes more sense to include it in large-form rather than as a separate example.
Linked field validation is a pattern commonly used in real-world scenarios, so it fits naturally within that example.
I'll move it to large-form. Is that okay with you?

LeCarbonator · 2025-12-08T07:35:35Z

packages/form-core/src/FieldApi.ts

+      const dynamicErrKey = getErrorMapKey('dynamic')
+      if (
+        this.state.meta.errorMap[dynamicErrKey] &&
+        this.state.meta.errorSourceMap[dynamicErrKey] === 'field'
+      ) {
+        this.setMeta((prev) => ({
+          ...prev,
+          errorMap: {
+            ...prev.errorMap,
+            [dynamicErrKey]: undefined,
+          },
+          errorSourceMap: {
+            ...prev.errorSourceMap,
+            [dynamicErrKey]: undefined,
+          },
+        }))
+      }


This seems out of place for setValue. Why does onDynamic need special behaviour in this case?

You're right
I was trying to clear dynamic errors before change validation runs, but if validate('change') passes, it should naturally clear all errors anyway.

packages/form-core/src/FieldApi.ts

LeCarbonator · 2025-12-08T07:40:59Z

packages/form-core/src/ValidationLogic.ts

+    case 'dynamic': {
+      // Run dynamic, server validation
+      return props.runValidation({
+        validators: [onDynamicValidator, onServerValidator],
+        form: props.form,
+      })
+    }


I assumed the point of onDynamic was that it would be dictated by validationLogic. However, it now needs to be addressed in revalidateLogic. I feel like there's some underlying issue that should be fixed, but I'll need to look at it myself to know for sure.

LeCarbonator · 2025-12-08T07:49:09Z

packages/form-core/tests/FieldApi.spec.ts

+    let resolve!: () => void
+    let promise = new Promise((r) => {
+      resolve = r as never
+    })


This on-demand resolving is very difficult to follow in this unit test due to how hacky it is.

I think an implementation with vi.useFakeTimers and a setTimeout + vi.awaitAllTimersAsync is way clearer in terms of code flow.

I'll refactor to use vi.useFakeTimers() with setTimeout + vi.awaitAllTimersAsync() as you suggested. Much clearer.

…tions

feat(form-core): add onDynamicListenTo validator option

9b96af3

- Add onDynamicListenTo to FieldValidators interface - Implement dynamic cause handling in getLinkedFields method - Add password/confirmPassword example demonstrating cross-field validation

ci: apply automated fixes and generate docs

27a14c0

jiji-hoon96 and others added 4 commits December 3, 2025 10:20

ci: apply automated fixes and generate docs

0c7b91f

fix(form-core): add 'dynamic' to ValidationCause type and fix typo

e734907

fix(form-core): remove unnecessary optional chaining in FieldApi

5f7b420

LeCarbonator requested changes Dec 8, 2025

View reviewed changes

jiji-hoon96 added 2 commits December 8, 2025 17:22

fix(form-core): add onDynamicListenTo to FieldGroupApi.getFormFieldOp…

89adf3a

…tions

refactor: remove onDynamic special handling and clean up examples

5dbb044

Uh oh!

feat(form-core): add onDynamicListenTo validator option #1896

Are you sure you want to change the base?

feat(form-core): add onDynamicListenTo validator option #1896

Conversation

jiji-hoon96 commented Dec 2, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Changes

Uh oh!

changeset-bot bot commented Dec 2, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

⚠️ No Changeset found

Uh oh!

nx-cloud bot commented Dec 2, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

pkg-pr-new bot commented Dec 2, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

codecov bot commented Dec 2, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Codecov Report

Uh oh!

LeCarbonator left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Missing changes

Uh oh!

LeCarbonator Dec 8, 2025

Choose a reason for hiding this comment

Uh oh!

jiji-hoon96 Dec 8, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

LeCarbonator Dec 8, 2025

Choose a reason for hiding this comment

Uh oh!

jiji-hoon96 Dec 8, 2025

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

LeCarbonator Dec 8, 2025

Choose a reason for hiding this comment

Uh oh!

LeCarbonator Dec 8, 2025

Choose a reason for hiding this comment

Uh oh!

jiji-hoon96 Dec 8, 2025

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

jiji-hoon96 commented Dec 2, 2025 •

edited

Loading

changeset-bot bot commented Dec 2, 2025 •

edited

Loading

nx-cloud bot commented Dec 2, 2025 •

edited

Loading

pkg-pr-new bot commented Dec 2, 2025 •

edited

Loading

codecov bot commented Dec 2, 2025 •

edited

Loading

LeCarbonator left a comment •

edited

Loading

jiji-hoon96 Dec 8, 2025 •

edited

Loading