Vee-validate: [V4] Nesting Form component

[andy3520]

Versions

• vee-validate: 4.0.0-alpha.14
• vue: 3.0.0

Describe
In older version I could nest Validation Observer to show the error in different places, w/ V4 I try to do that but only the nearest Form component react w/ error.
Is there any way to do that with the Form component?

[logaretm]

Due to too many issues caused by ValidatiobObserver being nestable, I'm not doing nested forms in v4. And to be honest I never found a really good use-case for them.

However, I think you can build your own with useForm.

[andy3520]

@logaretm thank you for replying. I'll try to use useForm.

My use case is:
Root form (with submit button enable if all field in all section are valid)
|--Section 1 (with green mark icon when all the field are valid)
|-- Section 2 ...
|--...

[logaretm]

I see, forgive me if I sounded rude. It would take manual labor to get it to work. For example you need to create a parent form for them that uses inject to be able to hook into them later, pretty much what happens with useField and useForm, so you will need to create a wrapper that does the same for useForm to aggregate their results.

So something along these lines:

// useFormAggregator.js

export function useFormAggregator() {
  const forms = ref([]);

  // will be used by forms to add them to the forms array
  function registerForm(form) {
     forms.value.push(form);
  }

  provide('my_form_aggregator', registerForm);

  const mergedFlags = computed(() => {
     // iterate and reduce the `forms` meta flags objects
  });


  const mergedErrors = computed(() => {
     // iterate and merge the forms error objects
  });

  return {
    mergedFlags,
    mergedErrors
  };
}

And now in your custom form components, you can use useForm:

// in setup
const form = useForm();
const aggregator = inject('my_form_aggregator');

// adds the form to the aggregator
aggregator(form);

that means the nearest component that will call useFormAggregator in its setup will be able to aggregate the child forms state. You can use Field component or useField as both works regardless of how forms are created.

This can be actually an example I would add to the docs since I think this feature will be asked a lot.

[andy3520]

@logaretm 😍 many thank, this will help me a lot

Can't wait until the V4 is official released

[andy3520]

@logaretm I was successful to aggregate the form, but one issue happens is only the errors reactive, the meta is not reactive

[logaretm]

That's really cool, the meta might need to be converted to refs because Vue 3 recently doesn't unwrap nested reactive objects, maybe try toRefs?

[andy3520]

@logaretm unfortunately, nothing works, I try to wrap with ref, toRefs, reactive. The value of meta is never reactive with the change.

[logaretm]

I will try to build an example in the docs.

[andy3520]

That would be really nice, thank you in advance.