vee-validate 4 and ValidationProvider/ValidationObserver documentation?

[gagarine]

Some part of my form are child components that contain one or multiple fields. I'm not sure how I should manage that with vee-validate, but I guess it's whith ValidationProvider and ValidationObserver.

The doc for vee-validate 4 does not have a section regarding ValidationProvider.

I don't really understand how it should be used in composition API. Do we have an example of that?

[logaretm]

The ValidationProvider and ValidationObserver were removed in v4 in favor of similar components called Field and Form and they function similarly with a different API.

The composition API already has examples and snippets guiding you through the integration, there is also the examples section with examples for the composition API.

[gagarine]

I checked the example, but the example do not manage field validation on the child component.
I'm able display the field error in the child component. But the parent will execute handleSubmit even if the child component do have field validation error.
I'm using the composition API only using useField and without yup.

[logaretm]

That means the field isn't inside the form or useForm wasn't called in the parent component correctly.

Create an example on codesandbox and I will be happy to check

[gagarine]

@logaretm their an example with a children components that contain two fields: https://codesandbox.io/s/vee-validate-children-components-validation-zmdhe?file=/src/App.vue
Many thanks for the help!

[logaretm]

that's a styling issue, the errors appear but they have a position absolute

https://codesandbox.io/s/vee-validate-children-components-validation-forked-u7gi9?file=/src/components/TextInput.vue

And handleSubmit doesn't even execute in your example, so all working as intended unless there is something else.

[gagarine]

Thanks. I taught my example reproduced the problem I had, I guess I was not concentrated engouh.
I was able to fix the problem on my real code too. So all good. Thanks again.

One things I overlooked in the documentation: "useForm: Creates a vee-validate's form context and associates any fields created with useField inside the same component or its children with it automatically, which you will use to create custom form components and to manage your fields in general.". Seem very logic now although a bit magic..