Expose all fields' errors using form API

[logaretm]

Discussed in https://github.com/logaretm/vee-validate/discussions/3535

^{Originally posted by AnnaYuS October 15, 2021} In case i'm getting multiple error messages for one field, is it possible to access all of them from useForm? It's definitely possible to access them from useField but that would mean i'd need to add an extra line for each form field. Here is an example: https://codesandbox.io/s/veevalidate-custom-input-get-array-of-errors-tb7k0?file=/src/views/Home.vue

The logic for this already exists under the hood but we just need a good way to expose it, a different property name perhaps like errorBag or alleError.

This new property should be accessible from useForm and by extension <Form /> component.

[erkstruwe]

Hi! In addition, it would be useful to access the list of fields from useForm context. Use case: I use useField in sub components of the main component which calls useForm. Now, when I want to know about each field's dirty status in the main component, I cannot access the list of fields. Maybe useForm should expose a getFieldsByPath function...

[olivervorasai]

This would be a very welcome addition!

In my use case, I have 1 form that is visibly shown in multiple steps (ex. contact information in step 1, other information in step 2, etc.) where a user must not proceed unless the previous step is validated.

Currently the only way to do this is using a lot of extraneous useField (multiple forms could also work but that breaks up the data unnecessarily). If the Form API could expose the validation state of each field individually that would be great!

Note: Vuelidate solved this by using validation groups (https://vuelidate.js.org/#sub-validation-groups)

[Liwoj]

This is indeed very needed. If useField is intended to be used to build "base" components, those components are sort of "dumb" - we need a way how to reason about the form state (not just errors but also dirty/touch) from the parent component which hosts useForm

[logaretm]

@Liwoj I'm working on several updates for 4.7 which would expose several aggregations for fields declared with useField on the Form API.

This would include:

• touched/dirty fields statuses
• errors list for each field

I'm expecting to get this out soon depending how it goes, main problem is naming stuff now.

[logaretm]

4.8 is now released with errorBag available on useForm. The <Form /> will receive it in the slot props shortly in a patch release.