Vuetify: [Bug Report] form.reset() doesn't only reset validation, it also clears the inputs

[BennyAlex]

Versions and Environment

Vuetify: 1.0.1
Vue: 2.5.13
Browsers: Chrome 63.0.3239.132
OS: Windows 10

Steps to reproduce

call this.$refs.form.reset()

Expected Behavior

As the docs says, reset() will

Resets validation for all inputs

so it should only resetting the validation state, not the inputs

Actual Behavior

Will also clear the inputs

Other comments

Please add another function to v-form "resetValidation()" to only reset the validationState and don't reset the inputs

[BennyAlex]

@nekosaur @johnleider
v-form will now render a form-tag, which breaks some things. E.g when pressing enter inside a text-field, the site will reload (form submit)

[nekosaur]

v-form has always rendered a form tag? and pressing enter on a single text input in a form should trigger submit, this is normal browser behaviour.

[BennyAlex]

So how to disable the submit? I still want to use the v-form features like the validate method ...
In my opinion it should not always render a <form>.

[nekosaur]

You can do something like

<v-form @submit.prevent>
</v-form>

[BennyAlex]

Thanks. What's with the method to only reset validation state?

[nekosaur]

In 1.1 reset() will only reset validation, not input

[KaelWD]

Will it? That sounds like a breaking change to me.

[BennyAlex]

It would be better to add resetValidation() and keep reset() and mention the differences in the docs.

[johnleider]

My initial thought was the just that @BennyAlex . Have a resetValidation and resetForm, with reset calling both. This would maintain backwards compat but allow more flexibility.

[ecmel]

As all we are using vue for form binding resetting form state should be done in the model IMHO

[johnleider]

That would cause breaking changes as the model currently functions as the valid state of the form.

[ecmel]

I mean resetting fotm should only reset validation state, for resetting form fields actual user defined vue model should be used (source of truth) which is up to the programmer

[johnleider]

This can be something we visit for v2.0.

[BennyAlex]

@ecmel if we have a resetValidation the programmer can reset the model by himself

[KaelWD]

The original change was reverted with 468b55df04135b69dcd98f852a152b75935c5dbe as it would break existing functionality.

[mustafaekim]

can someone clarify if this feature has been implemented or to be implemented? Because in my case, I use vuetify 1.2.4 and resetting form does not clear validations. Here is my code:

    resetForm() {
      this.form.type = "equal";
      this.form.test = "";
      this.form.score = 0;

      var form: any = this.$refs.evaluatorForm;
      form.reset()
    },

once resetForm() is called, the user is confronted with validation errors which is not what I expect. I just want to go to the initial state. How do you handle this case?

[KaelWD]

4763

[zweeen]

Thanks guys for this awesome framework. You are doing a very good work :D

resetValidation work fine.

But there is not reference to it in form API. The available function as the docs says are only reset and validate

[binbinyo]

I am not sure if anyone still curious but here is my finding.
Analysis: it's because when the data return from the server, the v-bind data is linked to the form, so whenever you reset the form, the data binded will be removed too.

Solution: You need to unlinked with the return data from server, Try and use javascript clone object function, to create a new object, then use the cloned object as a new data source then you are free to reset the form.( which ultimately reset the form and server return linked data )

[brokenthorn]

Weirdly enough, for me, calling reset clears the form and its errors, but also makes calling validate behave differently. Before calling reset, calling validate on an empty form will cause all invalid fields to be highlighted. After calling reset, calling validate again will cause ONLY THE FIRST field to be highlighted and by fixing the error and calling validate again, the next invalid field gets highlighted in turn. So calling validate turns into a manual 1 by 1 fix-me sequence instead of calling all the validators on all the fields and highlighting all invalid fields as normal.

package-lock.json

[kunalahirrao]

It means user has to reset field by setting defaultValue=''

[kunalahirrao]

No use of resetForm method