Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Multiple useForm in same page with different component not working #3270

Closed
sagardspeed2 opened this issue Apr 19, 2021 · 8 comments
Closed

Comments

@sagardspeed2
Copy link

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
Copy link
Owner

logaretm commented Apr 19, 2021

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
Copy link
Author

// 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
Copy link
Owner

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
Copy link
Author

sagardspeed2 commented Apr 30, 2021

@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
Copy link
Owner

Can you create an example on codesandbox?

@sagardspeed2
Copy link
Author

sagardspeed2 commented Apr 30, 2021

@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
Copy link
Owner

logaretm commented May 1, 2021

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
Copy link
Author

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants