fix(form-core): Only allow array deep keys in array methods

[LeCarbonator]

This PR restricts array methods on the FormApi to only allow paths to array keys.

Consider the following example:

type FormValues = {
    name: string
    age: number
    startDate: Date
    title: string | null | undefined
    relatives: { name: string }[]
    counts: (number | null | undefined)[]
  }

  const defaultValues: FormValues = {
    name: '',
    age: 0,
    startDate: new Date(),
    title: null,
    relatives: [{ name: '' }],
    counts: [5, null, undefined, 3],
  }

  const form = new FormApi({
    defaultValues,
  })

What's the behaviour on v1.10?

With the setup given above, you can write the following commands:

  const fieldValue = {}
  // The field value is typed as `never`, so you're informed that it's not correct
  form.pushFieldValue('age', fieldValue as never)
  form.insertFieldValue('age', 0, fieldValue as never)
  form.replaceFieldValue('age', 0, fieldValue as never)
  // No error! It's silently ignored in the implementation
  form.removeFieldValue('age', 0)
  form.swapFieldValues('age', 0, 1)
  form.moveFieldValues('age', 0, 1)

What would change?

  const fieldValue = {}
  // Error: Argument of type '"age"' is not assignable to parameter of type '"relatives" | "counts"'.ts(2345)
  form.pushFieldValue('age', fieldValue)
  form.insertFieldValue('age', 0, fieldValue)
  form.replaceFieldValue('age', 0, fieldValue)
  form.removeFieldValue('age', 0)
  form.swapFieldValues('age', 0, 1)
  form.moveFieldValues('age', 0, 1)

How does it work?

This implementation first determines DeepKeys<T> and then extracts the keys that are of the desired type. Therefore, it should not have a big impact on performance or have problems with future fixes to DeepKeys<T>

[nx-cloud]

View your CI Pipeline Execution ↗ for commit 3d15d5d.

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

---

☁️ Nx Cloud last updated this comment at 2025-05-09 18:51:39 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@1495

@tanstack/form-core

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

@tanstack/react-form

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

@tanstack/lit-form

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

@tanstack/solid-form

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

@tanstack/vue-form

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

@tanstack/svelte-form

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

commit: 3d15d5d

[codecov]

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 89.13%. Comparing base (9143ed6) to head (3d15d5d).
Report is 2 commits behind head on main.

Additional details and impacted files

@@           Coverage Diff           @@
##             main    #1495   +/-   ##
=======================================
  Coverage   89.13%   89.13%           
=======================================
  Files          31       31           
  Lines        1417     1417           
  Branches      362      362           
=======================================
  Hits         1263     1263           
  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.

[LeCarbonator]

Not sure why it closed? It claims I did it, so it was unintentional.

[Balastrong]

That's brilliant, thank you!