Hello team:

This whole concept of having a Form Generator based on a JSON schema is awesome and so far has been a great experience. The documentation is very straightforward.

I am having a problem to understand how to implement the Vee-validate plugin. In Documentation is stated:

"First, import the SchemaFormFactory into your application."

Does it means that this import line should be placed on main.js? I did that and hope that is the correct way.

Then, there is a template example with the three plugin documenting that the order is important.

"The order in which you pass the plugins is important, as they will be applied in the order they are received."

I assumed that this code example can be used as a template for a SFC. I copied the contents and left only the VeeValidatePlugin({})

`

`

Saved as SchemaFormWithPlugins.vue

Then I imported the Component and use it

<template> <SchemaFormWithPlugins :schema="mySchema" v-model="formData" /> </template>

This is the schema:
const mySchema = shallowRef({ banco: { component: FormText, label: "A label", innerClass: "p-field p-col-12 p-md-3", validations: (value) => value && value.length > 10, }, });

And unfortunately, the validation object remains empty. Am I missing something? I assume that Field Validation should be out of the box with the provided validation.

Thanks for the great efforts.

I followed the instructions in the docs but for some reason I'm getting this error:
Error: No such validator 'required' exists vee-validate

https://formvuelate.js.org/guide/veevalidate.html#usage

Is there a codesandbox available where I can see this all working?

Thanks!

Hello Team:

I might have found a bug, but first I want to make sure I have followed the instructions correctly. Documentation points out that the Component can be a string, provided it is globally registered:
"You can use the name of the component as a String instead, for example 'FormText', but be aware that the component needs to either be imported globally, or in your file first."

I have taken the BaseInput.vue component, added the validation prop and globally registered in main.js

import { createApp } from "vue"; import BaseInput from "@/path/to/BaseInput"; app.component("base-text", BaseInput); app.mount("#app");

Now the tricky part, should I use the string 'base-text' with the normal SchemaForm the component is rendered:

const schema = shallowRef({ banco: { component: "base-text", label: "A label", }, });

However, if I create the SchemaFormWithPlugins with SchemaFormFactory:

const SchemaFormWithPlugins = SchemaFormFactory([VeeValidatePlugin()]);
export default{
 components: {
    SchemaFormWithPlugins,
 }
setup(){
const schema = shallowRef({
      banco: {
        component: "base-text",
        label: "A label",
      },
    })
return {schema}
}
}

The Component does not render.

Nonetheless, a locally registered BaseInput in SchemaFormWithPlugins works as expected:

import BaseInput from "@/path/to/BaseInput";
export default {
components: {
    BaseInput,
},
setup(){
const schema = shallowRef({
      banco: {
        component: BaseInput,
        label: "A label",
      },
    })
return {schema}
}

}

I wonder if I messing something up.

Thanks team.

I want to display a list of all the validation errors on the page, not just under each input. ie

<SchemaForm schema="schema" />
<p>{{veevalidate.errors}}</p>

Is there a global object or something I need to import?

Thanks!

Is your feature request related to a problem? Please describe.
After submitting a form, the backend may return an error related to one of the fields (e.g. e-mail already in use). I want to signal an error for this specific field, but see no way of doing so.

Describe the solution you'd like
Not sure how the API would look...

Describe alternatives you've considered
Tried adding a new error to the initial-errors prop, but it does not seem to override the validation state.

Additional context

Describe the bug
The function getFromPath in Vee-validate crashes when reaches a nested schema-form in the array-schema example

 {
        component: "schema-form", //SchemaForm,
        model: "subform",
        schema: [
          {
            // validations: yup.string().required(),
            component: "text-input", //FormText,
            label: "Work address",
            model: "address"
          },
          {
            // validations: yup.string().required(),
            component: "text-input", //FormText,
            label: "Work phone",
            model: "phone"
          }
        ]
      }

on the other hand FormVueLate wont recognize the nested.path.model syntax for nested values of Vee Validate

To Reproduce
Steps to reproduce the behavior:

Run the "array based schema example" with a "vee-validate-plugin" component syntax

Expected behavior
Vee validate ignores the scheda-form level without crashing

System Info

• FormVueLate version: "formvuelate": "^2.0.0",
• plugins being used with versions: "@formvuelate/plugin-vee-validate": "^1.0.3",

Additional context

Describe the bug
I am trying to make a computed form-level validation schema, but it does not seem to be reactive.

To Reproduce

it.only("preserves reactivity in computed schemas and validations", async () => {
  const toggle = ref("");
  const SchemaWithValidation = SchemaFormFactory([veeValidatePlugin()]);
  const schema = computed(() => {
    const computedSchema = {
      firstName: {
        label: "First Name",
        component: FormText,
      },
    };
    if (toggle.value === "REQUIRE_EMAIL") {
      return {
        ...computedSchema,
        email: {
          label: "Email",
          component: FormText,
        },
      };
    }

    return computedSchema;
  });

  const validationSchema = computed(() => {
    const computedSchema = {
      firstName: yup.string().required("NAME"),
    };
    if (toggle.value === "REQUIRE_EMAIL") {
      computedSchema.email = yup.string().email().required("EMAIL");
    }
    return yup.object().shape(computedSchema);
  });

  const wrapper = mount({
    template: `
    <SchemaWithValidation :schema="schema" :validation-schema="validationSchema">
      <template #afterForm="{ validation }">
        <span id="test">{{ validation }}</span>
        <button :disabled="!validation.meta.valid"></button>
      </template>
    </SchemaWithValidation>
  `,
    components: {
      SchemaWithValidation,
    },
    setup() {
      const formData = ref({});
      useSchemaForm(formData);

      return {
        schema,
        validationSchema,
      };
    },
  });

  // Only "firstName" shows
  let input = wrapper.findAllComponents(FormText);
  expect(input.length).toBe(1);

  toggle.value = "";
  await flushPromises();

  // Form is invalid (firstName is required)
  const button = wrapper.find("button");
  expect(button.element.disabled).toBe(true);

  // Fill in firstName
  input[0].setValue("name");
  await flushPromises();

  // Form is valid
  expect(button.element.disabled).toBe(false);

  // Show "email"
  toggle.value = "REQUIRE_EMAIL";
  await flushPromises();

  input = wrapper.findAllComponents(FormText);
  expect(input.length).toBe(2);

  // Touch email
  input[1].setValue("");
  await flushPromises();

  // ERROR Form is valid, but should be invalid?
  expect(button.element.disabled).toBe(true);
});

Expected behavior
When the toggle is set to "REQUIRE_EMAIL", which shows the email field and updates the form-level validation schema to require it, I expect the form to be invalid.

Additionally, "touching" the email field does not mark the form as invalid leading me to believe the computed validation schema is not reactive.

System Info

• FormVueLate version: 3.3.0
• @formvuelate/plugin-vee-validate version: 2.3.0 (vee-validate: 4.0.0-beta.16)

Is your feature request related to a problem? Please describe.
When I submit a form, I cannot reset form data without triggering validation (eg: required fields).

Describe the solution you'd like
I would like to be able to reset form validation.

Describe alternatives you've considered
Customising VeeValidatePlugin, I was able to add vee-validate's resetForm method exposed by useForm and then access with form component ref :

VeeValidatePlugin.js

    // Create a form context and inject the validation schema if provided
    const { handleSubmit, resetForm } = useForm({
      validationSchema: formAttrs['validation-schema'] || formAttrs.validationSchema,
      initialErrors: formAttrs['initial-errors'] || formAttrs.initialErrors,
      initialDirty: formAttrs['initial-dirty'] || formAttrs.initialDirty,
      initialTouched: formAttrs['initial-touched'] || formAttrs.initialTouched
    });

...

    return {
      ...baseReturns,
      formBinds: computed(() => {
        return {
          ...baseReturns.formBinds.value,
          onSubmit
        };
      }),
      parsedSchema: computed(() => formSchema),
      resetForm
    };

MyView.vue

              <SchemaFormWithValidation
                ref="form"
                class="space-y-6"
                :schema="forgotPasswordFormSchema"
                v-model="forgotPasswordFormData"
                @submit="sendResetPasswordMail"
              >

...

    const sendResetPasswordMail = () => {
      sendResetPasswordMailMutation(forgotPasswordFormData.value);
      forgotPasswordFormData.value.email = '';
      (form.value as any).resetForm();
    };

I'm not sure that this is the correct way to do it thought, or even if the actual plugin version offers this possibility.