Quasar q-form reset doesn't clear the values in the form

Question

I'm using quasar q-forms and I want the 'Reset' button to clear both the values and the validation.

It doesn't seem to work. Am I missing something?

Here is my component:

<q-form
      ref="sampleRef"
      @submit="onSubmit"
      @reset="onReset"            
      class="q-gutter-md"
    >
      <q-input
        filled
        v-model="name"
        label="Your name *"
        hint="Name and surname"
        :rules="[ val => val && val.length > 0 || 'Please type something']"
      ></q-input>

      <q-input
        filled
        type="number"
        v-model="age"
        label="Your age *"
        :rules="[
          val => val !== null && val !== '' || 'Please type your age',
          val => val > 0 && val < 100 || 'Please type a real age'
        ]"
      ></q-input>

      <q-toggle v-model="accept" label="I accept the license and terms"></q-toggle>

      <div>
        <q-btn label="Submit" type="submit" color="primary"></q-btn>
        <q-btn label="Reset" type="reset" color="primary" flat class="q-ml-sm"></q-btn>
      </div>
    </q-form>

const sampleRef = ref(null)

onReset () {
   sampleRef.value.reset()
   sampleRef.value.resetValidation()
}

It only resets the validation, but the values are retained. I don't want to manually clear all the fields, since I'd have a lot of fields in my q-form.

Here is a sample codepen: https://codepen.io/keechan/pen/GRLqXZE?editors=1011

Am I missing something?

Thanks!

Answer 1

The Quasar docs says:

If you want to take advantage of the reset functionality, then be sure to also capture the @reset event on QForm and make its handler reset all of the wrapped components models.

You can see in the first example code that they explicitly set each model value to null:

onReset () {
    name.value = null
    age.value = null
    accept.value = false
}

If you wanted to do this without resetting each value, then one option would be to keep all the fields in a single object and replace it in the reset function.

const initial = {
    name: null,
    age: null,
    accept: false
};
    
const formModel = ref({...initial});

///...

onReset () {
    formModel.value = {...initial};
    //...
}


<q-input
    v-model="formModel.name"
//etc