Skip to content

fix: revalidate nested fields after parent object updates #2125

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
marc-niclas wants to merge 1 commit into
base: main
Choose a base branch
from
+54 −0
Open

fix: revalidate nested fields after parent object updates #2125

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions .changeset/stale-nested-field-meta.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
'@tanstack/form-core': patch
---

Fix stale nested field errors when setting a parent object field by revalidating mounted descendant fields after the parent value changes.
15 changes: 15 additions & 0 deletions packages/form-core/src/FormApi.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2284,6 +2284,17 @@ export class FormApi<
const dontUpdateMeta = opts?.dontUpdateMeta ?? false
const dontRunListeners = opts?.dontRunListeners ?? false
const dontValidate = opts?.dontValidate ?? false
const fieldString = field.toString()
const descendantFields = Object.keys(this.fieldInfo).filter((fieldKey) => {
if (fieldKey === fieldString) {
return false
}

return (
fieldKey.startsWith(`${fieldString}.`) ||
fieldKey.startsWith(`${fieldString}[`)
)
}) as DeepKeys<TFormData>[]

batch(() => {
if (!dontUpdateMeta) {
Expand Down Expand Up @@ -2313,6 +2324,10 @@ export class FormApi<

if (!dontValidate) {
this.validateField(field, 'change')

descendantFields.forEach((descendantField) => {
this.getFieldInfo(descendantField).instance?.validate('change')
})
Comment on lines +2328 to +2330
Copy link
Copy Markdown

@coderabbitai coderabbitai bot Apr 15, 2026

Choose a reason for hiding this comment

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

⚠️ Potential issue | 🟠 Major

This revalidates the whole form once per descendant.

FieldApi.validate() also runs form sync/async validation (packages/form-core/src/FieldApi.ts:1904-1932), so a single parent update now fans out into repeated form revalidation and async abort/restart churn. On large nested forms or async onChange validators, that can turn one change into N+1 form validations. Please route descendant refresh through a helper that reuses the single form-level pass instead of calling instance.validate('change') directly.

🤖 Prompt for AI Agents 
Verify each finding against the current code and only fix it if needed.

In `@packages/form-core/src/FormApi.ts` around lines 2328 - 2330, The loop calling
this.getFieldInfo(descendantField).instance?.validate('change') causes N
repeated form-level validations because FieldApi.validate triggers form
sync/async validation; replace this direct per-descendant validate call with a
single helper on FormApi (e.g., a refreshDescendants or queueDescendantChanges)
that collects descendant field keys and calls the form-level validation once or
uses the existing form-level validation runner to revalidate all affected fields
in one pass; modify the code path around descendantFields iteration in FormApi
to call that helper instead of FieldApi.validate, ensuring you reuse the
form-level validation runner (the same routine used by FieldApi.validate) to
avoid abort/restart churn.

}
}

Expand Down
34 changes: 34 additions & 0 deletions packages/form-core/tests/FormApi.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -225,6 +225,40 @@ describe('form api', () => {
expect(form.getFieldValue('name')).toEqual('other')
})

it('should clear nested field errors when setting a parent object field', () => {
const form = new FormApi({
defaultValues: {
a: {
b: 0,
},
},
})

const childField = new FieldApi({
form,
name: 'a.b',
validators: {
onChange: ({ value }) =>
value > 0 ? undefined : 'Must be greater than 0',
},
})

form.mount()
childField.mount()

childField.setValue(0)

expect(childField.state.meta.errors).toEqual(['Must be greater than 0'])

form.setFieldValue('a', {
b: 1,
})

expect(form.getFieldValue('a.b')).toBe(1)
expect(childField.state.meta.errors).toEqual([])
expect(childField.state.meta.isValid).toBe(true)
})

it("should be dirty after a field's value has been set", () => {
const form = new FormApi({
defaultValues: {
Expand Down