Expose or bind to change on validation meta and errors

[davidzwa]

(Vuetify3 beta 1) + Vee-Validate + FormVueLate + Zod

Is your feature request related to a problem? Please describe.
The problem is that currently the validation slotBind properties are not usable outside the SchemaFormWithValidation (VeeValidate extended Form). Its insanely hard to find a solution so far to be able to expose this to any component not inside the template.

Describe the solution you'd like
Allow us to provide a reactive/ref/etc so we can track it (similar to :schema :validation-schema)
OR
Either expose the validation attribute over @change or an emitted property (similar to @submit)
OR
Bind it to an internal observer which we can expose at free will (MutationObserver)

Describe alternatives you've considered

1. v-bind to anything I can bind it to internally to expose it with a wrapper component - still work in progress
2. Expose from within the fields and aggregate separately ... very uncomfortable Unable to set validation for vee-validate #283

[logaretm]

There have been various discussions about this in #276 and #204, also in other issues.

This would require a big re-write and a major release for formvuelate to be able to do that. Sadly I'm struggling with finding the time to work on it at the moment.

For this particular issue, there is a couple of things that need addressing:

1. Figure out an API for plugins to be able to expose their state to the script section, generally it would be in the setup. This probably similar to what we already have with SchemaFormFactory API.

2. Figure out how to have a dynamic typescript API that would ensure the actual result of the previous API. (The following is just an example and is not an indicative of any final naming or APIs)

// in setup
// how do we know "validation" is available? what if `vee-validate` or `vuelidate` plugins weren't installed?
const { validation } = useSchemaForm();

[davidzwa]

Ok I understand completely. Without Vee-Validate and/or Vuelidate things are much much different (and easier?)

In the meanwhile: I got the following working:

<template>
...
<form ...>
  <SchemaFormWithValidation ref="schemaFormRef" ...>
   ...
  </SchemaFormWithValidation>

</form>

// This now syncs the validation because of the setup-ref being watched (this.$refs didnt sync)
{{ formValidation }}
{{ formValidation?.meta.valid }}
...  
</template>

<script lang="ts>  
  setup() {
    ...
    return {
      schemaFormRef: ref()
    }
  },
  data:()=> ({
    formValidation: null
  }),
  watch: {
    'schemaFormRef.slotBinds.validation.meta.valid'() {
      this.formValidation = this.schemaFormRef.slotBinds.validation;
    },
  },
</script>

This pattern makes me think of the ValidationObserver and ValidationProvider vee-validate used to have. I dont understand why it was removed - could you shine a light on that?

[logaretm]

That would be a decent workaround albeit a little hacky. If it works for you then great.

could you shine a light on that?

Well that's a discussion for vee-validate itself. The short version, old API wasn't possible with Vue 3 so it made sense to re-think about everything in the next major release.

[davidzwa]

Yep quite hacky, and as I experienced not 100% foolproof (this.$refs didnt trigger the watch).
So a temporary placeholder I guess 👍🏼

Very true, its a bit off-topic. I was just thinking out loud.