feat(form-core): add array method field.filterValues and form.filterFieldValues

[Pascalmh]

Problem

When setting a field back to an empty array

const form = new FormApi({
  defaultValues: {
    people: [
        { firstName: "Bob" },
        { firstName: "Marry" },
    ],
  },
});

form.setFieldValue('people', [
  { firstName: "Marry" }, // <-- "Bob" should be removed
]);

items[0].firstName would still exist - when there's a validation on the firstName (on the Field-level) form.canSubmit would be false.

Solution

adding field.filterValues and form.filterFieldValues to TSF:

form.filterFieldValues(
  'people',
  ({firstName}) => firstName === "Marry"
)

[nx-cloud]

View your CI Pipeline Execution ↗ for commit da7be72.

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

---

☁️ Nx Cloud last updated this comment at 2025-04-22 06:25:27 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-next-server-actions
• @tanstack/form-example-react-large-form
• @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@1426

@tanstack/form-core

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

@tanstack/react-form

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

@tanstack/lit-form

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

@tanstack/svelte-form

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

@tanstack/solid-form

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

@tanstack/vue-form

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

commit: da7be72

[codecov]

Codecov Report

Attention: Patch coverage is 87.06897% with 15 lines in your changes missing coverage. Please review.

Project coverage is 88.23%. Comparing base (3b90f86) to head (da7be72).

Files with missing lines	Patch %	Lines
packages/form-core/src/metaHelper.ts	82.71%	13 Missing and 1 partial ⚠️
packages/form-core/src/FormApi.ts	96.77%	1 Missing ⚠️

Additional details and impacted files

@@            Coverage Diff             @@
##             main    #1426      +/-   ##
==========================================
- Coverage   88.83%   88.23%   -0.60%     
==========================================
  Files          31       31              
  Lines        1379     1437      +58     
  Branches      347      367      +20     
==========================================
+ Hits         1225     1268      +43     
- Misses        137      151      +14     
- Partials       17       18       +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.

[LeCarbonator]

I think if/when this gets merged, it would be great to rework the Arrays section of the docs to write about swap, insert, push, filter and clear. Thoughts? Should it be somewhere else?

[LeCarbonator]

Oof, it did not like that refactor of metaHelper. I'll get to it later today.

Looks like it's beccause I'm trying to avoid a breaking change. I guess I can add some tests for that