Manner of clearing form without triggering validations

[DevanB]

Describe the new feature you'd like
While building a form recently with Formulate, I found myself clearing the input (a password reset form) after I received a successful response from the server. When I set the value to an empty string, I noticed that the validation rules are running again. Does Formulate expose some helpers or way to clear a value (or values) without triggering validations? I've attached a screenshot of the issue.

What percentage of vue-formulate users would benefit?
Unknown, but I assume others will ask how to clear inputs without triggering validations eventually.

[justin-schroeder]

Actually, and kinda incredibly, this hasn't come up before. I suppose people usually redirect users on success or don’t reset the form? Seems like a totally valid use case though.

Current API

There's an easy "vue" way to do this, you can swap out the key prop which is a special reserved prop in vue, and will cause the component to-remount fresh.

<FormulateForm
  :key="keyValue"
  @submit="submit"
>
 ...
</FormulateForm>

...

<script>
export default {
  data() {
    return {
       'keyValue': 'foo'
    },
   methods: {
      submit () {
         this.keyValue = 'bar' // this will reset the form
      }
   }
}
</script>

Future API

As a developer working on this problem right now, what API would you like? My inclination would be to tap into the named forms and add a "reset" method. Here's a proposal, tell me what you think:

<template>
<FormulateForm
  name="forgot"
  @submit="resetPassword"
>
  <FormulateInput
    type="email"
    name="email"
    validation="required|email"
  />
  <FormulateInput
    type="submit"
  />
</FormulateForm>
</template>

<script>
export default {
  methods: {
    async resetPassword () {
      try {
        const res = await this.$axios.restPassword('/api/reset')
        alert('success')
        this.$formulate.reset('forgot')
      } catch (err) {
        this.$formulate.handle(err, 'forgot')
    }
  }
}
</script>

That feels fairly clean to me, but I'm open to suggestions.

[DevanB]

Love that you proposed a solution in the interim!

I think your proposal for a future solution makes perfect sense. With another form library I've used extensively, the form (itself) had a reset method. This is a similar API and encourages others to use the full abilities of the named form (like $formulate.handle, which is a hidden gem).

[joaquinwojcik]

Any updates on this?

[justin-schroeder]

Still on the roadmap for v2.3 which is starting to receive significant attention. As of today you need to use the key mechanism described above or another work around to "reset" the form.