Deduplicate field and form errors property

[oscartbeaumont]

The current behavior of form.state.errors and field.getMeta().errors is to collect up all errors within the errorMap. The implementation does not take care of removing duplicates and Form's unit tests assert this behaviour as expected.

I think this behaviour should potentially be reconsidered.

Personally I think it's very common as an application developer to apply the same validator to multiple events (Eg, onMount & onChange) and if that is done the .errors array will likely end up with duplicates.

If the application developer is to render a list of all errors for the current field/form using .errors, they will end up showing the user duplicates. I don't think a user should ever be shown duplicates because it is only one error for them to fix. Right now the application developer would be responsible for implementing deduplication logic and I feel like .errors should just do this by default.

If a developer really want the previous behavior they can easily do Object.values(.errorMap) but I feel like keeping duplicates is something you should need to opt-in to, as opposed to opt-out like it is right now.

Happy to close this PR if the discussion around changing this behavior decides it's not a great idea.

[nx-cloud]

☁️ Nx Cloud Report

CI is running/has finished running commands for commit b27ccce. As they complete they will appear below. Click to see the status, the terminal output, and the build insights.

📂 See all runs for this CI Pipeline Execution

---

✅ Successfully ran 2 targets

• nx affected --targets=test:sherif,test:knip,test:eslint,test:lib,test:types,test:build,build --parallel=3
• nx run-many --target=build --exclude=examples/**

---

Sent with 💌 from NxCloud.

[pkg-pr-new]

commit: b27ccce

@tanstack/angular-form

pnpm add https://pkg.pr.new/@tanstack/angular-form@908

@tanstack/form-core

pnpm add https://pkg.pr.new/@tanstack/form-core@908

@tanstack/lit-form

pnpm add https://pkg.pr.new/@tanstack/lit-form@908

@tanstack/react-form

pnpm add https://pkg.pr.new/@tanstack/react-form@908

@tanstack/solid-form

pnpm add https://pkg.pr.new/@tanstack/solid-form@908

@tanstack/valibot-form-adapter

pnpm add https://pkg.pr.new/@tanstack/valibot-form-adapter@908

@tanstack/vue-form

pnpm add https://pkg.pr.new/@tanstack/vue-form@908

@tanstack/yup-form-adapter

pnpm add https://pkg.pr.new/@tanstack/yup-form-adapter@908

@tanstack/zod-form-adapter

pnpm add https://pkg.pr.new/@tanstack/zod-form-adapter@908

Open in Stackblitz

More templates

• @tanstack/form-example-angular-array
• @tanstack/form-example-angular-simple
• @tanstack/form-example-angular-valibot
• @tanstack/form-example-angular-yup
• @tanstack/form-example-angular-zod
• @tanstack/form-example-lit-simple
• @tanstack/form-example-lit-ui-libraries
• @tanstack/form-example-react-array
• @tanstack/form-example-react-next-server-actions
• @tanstack/form-example-react-query-integration
• @tanstack/form-example-react-simple
• @tanstack/form-example-react-tanstack-start
• @tanstack/form-example-react-ui-libraries
• @tanstack/form-example-react-valibot
• @tanstack/form-example-react-yup
• @tanstack/form-example-react-zod
• @tanstack/form-example-solid-array
• @tanstack/form-example-solid-simple
• @tanstack/form-example-solid-valibot
• @tanstack/form-example-solid-yup
• @tanstack/form-example-solid-zod
• @tanstack/form-example-vue-array
• @tanstack/form-example-vue-simple
• @tanstack/form-example-vue-valibot
• @tanstack/form-example-vue-yup
• @tanstack/form-example-vue-zod

[codecov]

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 88.56%. Comparing base (5473bb8) to head (b27ccce).
Report is 91 commits behind head on main.

Additional details and impacted files

@@            Coverage Diff             @@
##             main     #908      +/-   ##
==========================================
- Coverage   91.55%   88.56%   -2.99%     
==========================================
  Files          21       26       +5     
  Lines         900      936      +36     
  Branches      206      209       +3     
==========================================
+ Hits          824      829       +5     
- Misses         71      101      +30     
- Partials        5        6       +1     

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

[Balastrong]

Nice catch, having duplicate errors isn't great from an user's perspective.

Could you please tweak the unit tests on this? At least to have one that keeps passing with different errors from different validators, and one that shows how duplicate errors are shown just once.