CODEWITHSUNDEEP
vuejs3vee-validate
Hoodlum
Hoodlum

Reputation: 357

Observe deep nested child components with Vee-Validate v4 in Vue3

In Vue2 / Vee-Validate 3, it was possible to do the following to validate inputs at any depth:

  <FormWrapper>
    <ValidationObserver ref="validation">

      <ChildComponent1>
        <ChildComponent2>
          <ValidationProvider rules="required">
            <FormInput id="first-name" />
          </ValidationProvider>
        </ChildComponent2>
      </ChildComponent1>

      <ChildComponent1>
        <ChildComponent2>
          <ValidationProvider rules="required">
            <FormInput id="last-name" />
          </ValidationProvider>
        </ChildComponent2>
      </ChildComponent1>

    </ValidationObserver>
  </FormWrapper>

Regardless of the depth of nesting of the ValidationProviders, the ValidationObserver high up the component tree would detect all validation events on them automatically, and you could add a watcher on "$refs.validation.flags.invalid" to detect when the entire subtree became valid/invalid. Validation rules could be declared at the child component level.

Is there a way to achieve the same in Vue3 / Vee-Validate 4?

All of the examples from the Vee-Validate v4 documentation show using Form and Field components inside the same component template, and additionally having to define the entire form's schema in one place (rather than setting the rules against each child component).

I've tried basically repeating the above, using Form in place of ValidationObserver and Field in place of ValidationProvider, but I cannot achieve the desired effect.

Update

I have since managed to achieve the desired effect in Vue3 using Vuelidate. However if anyone figures out how to do this in Vee-Validate, I'd be interested.

Upvotes: 3

Views: 2787

Answers (1)

Martin at Mennt
Martin at Mennt

Reputation: 5737

Great question, and I was struggling with some of the same issues as you are describing. I sort of got it working, please check out if this could be of any help.

https://stackblitz.com/edit/vee-validate-nested-child-components?file=pages/index.vue

Upvotes: 4

Related Questions