Feature request: reset form

[James Stevenson]

Is there a way to rest the form once it is submitted?

[Dennis F.]

@jimbrew Unfortunately the FlowForm API currently doesn't have a reset method. You could accomplish what you want by wrapping the FlowForm component in a for loop and conditionally displaying only the latest one, something like this:

<template>
  <div v-for="index in currentIndex" :key="'vff' + index">
    <flow-form
      v-if="index === currentIndex"
      ref="flowform"
      v-on:submit="onSubmit"
      v-bind:questions="questions"
      v-bind:standalone="true"
    >
    </flow-form>
  </div>
</template>

<script>
  import FlowForm from '../../src/components/FlowForm.vue'
  import QuestionModel, { QuestionType } from '../../src/models/QuestionModel'

  export default {
    name: 'example',

    components: {
      FlowForm
    },

    data() {
      return {
        currentIndex: 1,
        questions: [
          new QuestionModel({
            id: 'q1',
            tagline: 'Question #1',
            type: QuestionType.Text,
            required: true
          })
        ]
      }
    },

    methods: {
      onSubmit(questionList) {
        this.questions.forEach(q => q.answer = null)
        ++this.currentIndex
      }
    }
  }
</script>

But we'll definitely expand the API in the future so you'll be able to do this natively.

[Dennis F.]

We've just added an API function which allows for completely resetting a form and all its answers:

<template>
  <flow-form
    ref="flowform"
    v-bind:questions="questions"
    v-bind:standalone="true"
  >
  </flow-form>
</template>

<script>
  export default {
    name: 'example',

    components: {
      FlowForm
    },

    data() {
      return {
        questions: [
          ...
        ]
      }
    }

    mounted() {
      this.$refs.flowform.reset()
    }
  }
</script>

You can of course call the reset function at any time which will reset all the answers and jump back to the first question.