Vee-validate 4 + Vue 3 - form.reset() does not clear form fields

I apologise if this should not have been opened due to Vee-validate 4’s beta status!

Versions

vee-validate: 4.0.0-beta.16
vue: 3.0.2

Describe the bug Within a custom Vue 3 SFC using Vee-validate’s Form and Field components, I have a @submit listener attached to the Form component which calls the ‘onSubmit’ method. Within this method, is the call form.reset() to clear fields, as per the documentation, of any values at submission. This does not appear to be functioning as expected. Nothing appears within the console log when this action occurs.

Expected behavior Once the form is submitted, expected to see form’s input fields cleared from all input.

Desktop (please complete the following information):

OS: macOS 10.15.7
Browser: Chrome
Version: 86.0.4240.111

Additional context

Form <VeeForm @submit="onSubmit" :validation-schema="schema.validation" :initial-values="schema.values" >

Button <BaseButton buttonType="submit">Submit</BaseButton>

Method methods: { onSubmit(values, { form }) { let formValues = {} for (const [key, value] of Object.entries(values)) { formValues = { ...formValues, [key]: value.trim() } } this.$emit('form-values', formValues) form.reset() }

I also attempted to achieve the same using this.$refs... but got the same result.

Link to documentation: https://vee-validate.logaretm.com/v4/guide/handling-forms#resetting-forms-after-submit

Issue Analytics

State:
Created 3 years ago
Comments:5 (3 by maintainers)

Top GitHub Comments

1reaction

logaretmcommented, Nov 7, 2020

@matthewlynden Heads up, a new reset API was implemented and is now available on beta.19

It contains breaking changes but overall an improved API and resets the values as well without having to explicitly call setValues.

Your previous code snippet would work fine but with these changes:

methods: {
    onSubmit(values, actions) {
      let formValues = {}
      for (const [key, value] of Object.entries(values)) {
        formValues = { ...formValues, [key]: value.trim() }
      }
      this.$emit('form-values', formValues)
      actions.resetForm() // 👈 Reset Form
    }
}

1reaction

logaretmcommented, Oct 29, 2020

reset does not change the input values, this is by design, you will need to change them with setValues then trigger the reset.

Looks like the documentation wasn’t updated to reflect that, will fix that promptly.

If I think of a better API to automatically reset the values with reset calls I will update this issue.

Top Results From Across the Web

Handling Forms - VeeValidate

However vee-validate will make sure the form is not submitted unless all fields are valid, here is an example: vue <Form method="post" action="/api/users" ......

veevalidate reset form typescript does not reset the form

ValidationObserver 's reset() only resets the validation state, not the form fields. While the docs include a form-reset demo that manually ...

Vee Validate Form Reset Issue

I'm having an issue with Vee Validate not resetting validation on forms properly when the \`reset\` method of ValidationObserver is called.

[Solved]-Error after form resetting vee validate 3-Vue.js

Following the Vee-validate 3 documentations it is recommended to reset the form after the animation frames are requested. You could do something like...

Form component — Vuetify.js

When it comes to form validation, Vuetify has a multitude of integrations and baked ... refs.form.reset() will clear all inputs and reset their...