Manner of clearing form without triggering validations about vue-formulate HOT 4 CLOSED

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.

from vue-formulate.

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.

from vue-formulate.

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).

from vue-formulate.

Any updates on this?

from vue-formulate.