formvuelate / formvuelate-plugin-vee-validate

Vee-validate plugin for Formvuelate
https://formvuelate.js.org
7 stars 3 forks source link

Reset form validation feature #8

Open victorlambert opened 3 years ago

victorlambert commented 3 years ago

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.

logaretm commented 3 years ago

Hello, very sorry about the delay in addressing this, I will have to consider how to expose vee-validate-specific features with FVL.

For the props it is one thing to read custom attrs, but exposing API via the $refs is tricky and may not work as intended for nested schemas.

victorlambert commented 3 years ago

No problem 😄 Let me know if you see any "cleaner" workaround.