Multiple useForm in same page with different component not working

[sagardspeed2]

Versions

• vee-validate: 4.2.4
• vue: 3.0.0

Describe the bug

When trying to validate multiple form with same page but defferent component with the composition api and useForm() and useField(), the validation is not working on one component.

So I am trying to make a form in one component and one form in another component which is modal (form in the modal), and then both component are called on one page. In this the form in modal is not validating.

To reproduce

Steps to reproduce the behavior:

1. Make 2 component and add two form with composition api and useForm and useField validation on them
2. Call both component in one page
3. submit the form one by one
4. one of those form, one will not validate.

[logaretm]

You cannot use multiple useForm in the same component, this is because the useForm provides an injection context to the children using useField, which means one will override the other.

However, you can use multiple useForm if there is a hierarchy between each form and its fields.

If you are trying to have some sort of nested forms, this is not really something vee-validate will do in the near future, so you are better off having 1 large form or multiple independent forms

Here is a couple of examples:

This will work fine if you keep exactly one useForm per component

<!-- Has useForm inside it, validation works fine -->
<Modal />

<!-- Has useForm inside it, validation works fine -->
<OtherComponent />

This won't work:

// in setup function of some component
// won't work because you are creating 2 form contexts for child components
const form1 = useForm();
const form2 = useForm();

I think this is a duplicate of #3204 so closing this in favor of tracking the issue there, LMK if it's not the same issue, and if it is then please create an example so I can differentiate the two.

[sagardspeed2]

// component - 1
<div>
<form>
this is form number one with useForm() and useField()
<component2></component2>
</form>
</div>

// component - 2
<div>
<form>
this is form number two with useForm() and useField()
</form>
</div>

Hi @logaretm I am trying to do exactly the same thing which defined in the attached code. now when I am submit the form2 inside the component2 the validation of that form not working.
But when I am submit the form1 inside the component1 the validation in component2 will also validate.

this is the problem while submitting the forms

[logaretm]

You can't have 2 form elements within each other so you will need to change your HTML.

Also, vee-validate v4 doesn't support nested forms, meaning if you submit one form you have to manually submit the other to get the effect you need.

[sagardspeed2]

@logaretm As you suggest that we need to set up each useForm() in a single component.

so I changed my html

<div>
 <form>
 </form>

 <component-1></component-1>
</div>

// compoenent - 1
<div>
 <form>
 this is useForm() with composition api
 </form>
</div>

and still not working. the validation of the component-1 form is not validating and does not generate an error and the form is submitted without validating

[logaretm]

Can you create an example on codesandbox?

[sagardspeed2]

@logaretm As you asked to example, here I am dropping a link of code sandbox, please doesn't consider the design, just see the functionality and give your comment.

https://codesandbox.io/s/frosty-darkness-8889m?file=/src/App.vue

[logaretm]

Thank you for the example, this was caused by vee-validate prioritizing parent-injected symbols instead of self-injected ones.

I have changed this to use the self-injection if exists, which is your case here. But you need to make sure to call useForm before calling the useField.

Will tag this tweak in the next patch release.

[sagardspeed2]

Hi @logaretm Thanks for consider this issue and quick fix.