feat(core): add getAllErrors to form api

[harry-whorlow]

Add's a utility function to form.api to return form errors combined with a reduced fieldMeta.errorMap.

example

form.getAllErrors() => {form: FormErrors, fields: Record<string, FieldErrors>}

---

Tasks

• utility
• tests

[nx-cloud]

View your CI Pipeline Execution ↗ for commit 34c00fa.

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

---

☁️ Nx Cloud last updated this comment at 2025-02-24 19:17:41 UTC

[pkg-pr-new]

Open in Stackblitz

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-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-vue-array
• @tanstack/form-example-vue-simple

@tanstack/angular-form

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

@tanstack/form-core

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

@tanstack/lit-form

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

@tanstack/react-form

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

@tanstack/solid-form

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

@tanstack/vue-form

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

commit: 34c00fa

[codecov]

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 88.41%. Comparing base (b0dc32c) to head (34c00fa).
Report is 1 commits behind head on main.

Additional details and impacted files

@@            Coverage Diff             @@
##             main    #1155      +/-   ##
==========================================
+ Coverage   88.32%   88.41%   +0.08%     
==========================================
  Files          27       27              
  Lines        1199     1208       +9     
  Branches      315      319       +4     
==========================================
+ Hits         1059     1068       +9     
  Misses        125      125              
  Partials       15       15              

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

[Balastrong]

Thanks for the great PR!

I think we're on the right direction but we can probably make it even better. Here I see you're returning the flat errors array for the form but the validationMap for the fields. We should probably return both for both.

What do you think about a return type similar to that:

{
  form: { errors: ValidationError[]; errorMap: ValidationErrorMap }
  fields: Record<
    DeepKeys<TFormData>,
    {
      errors: ValidationError[]
      errorMap: ValidationErrorMap
    }
  >
}

Feel free to make the types smarter if you think it's needed, the overall idea is to return both errors and errorMap for form and each field :)

[juanvilladev]

Thanks for the great PR!

I think we're on the right direction but we can probably make it even better. Here I see you're returning the flat errors array for the form but the validationMap for the fields. We should probably return both for both.

What do you think about a return type similar to that:

{
  form: { errors: ValidationError[]; errorMap: ValidationErrorMap }
  fields: Record<
    DeepKeys<TFormData>,
    {
      errors: ValidationError[]
      errorMap: ValidationErrorMap
    }
  >
}

Feel free to make the types smarter if you think it's needed, the overall idea is to return both errors and errorMap for form and each field :)

This also somewhat ties into my PR where we need to determine which field errors came from form validations vs field validations. I think if we're getting all errors in a function like this, it'd be nice to know where the error came from as well. If this could be included within this functionally we could also use it internally to clear stale field errors sourced from the form.

[harry-whorlow]

This also somewhat ties into my PR where we need to determine which field errors came from form validations vs field validations. I think if we're getting all errors in a function like this, it'd be nice to know where the error came from as well. If this could be included within this functionally we could also use it internally to clear stale field errors sourced from the form.

you mean in the form validations?

It should work as form FormValidationError is a union of either:

const err = {
  onChange: ValidationError,
  onMount: ValidationError,
  //...
}

or

const err = {
  // name and age being fields in form
  onChange: { name: ValidationError, age: ValidationError },
  onMount: { name: ValidationError, age: ValidationError },
  //...
}

So you will have a record of the errors and the field they come from at a form level.

[Balastrong]

Well done! I think we're almost there :)

[Balastrong]

LGTM!

Do you want to add a few more unit tests to cover edge cases and also some type tests? Otherwise we can just merge and add them later, let me know :)

[harry-whorlow]

@Balastrong as always it's been a pleasure.

Normally, I would add the tests but I've got three open pr's and it's getting hard to track and keep them up to date, plus I'm away at the moment. So if we can merge it and I'll come back to the tests in two weeks or so that would work best for me.
🤟

[Balastrong]

Oki, no worries, I added a type test :)

Thanks again, merging it now 🚀