cuatromedios / quasar-app-extension-vuelidate-rules

Use Vuelidate methods as internal Quasar rules for validation
MIT License
61 stars 14 forks source link

How to reset the validations of a form? #12

Open Dylan190774 opened 2 years ago

Dylan190774 commented 2 years ago

Hi, I like this plugin very much. However, I can't find out how to reset the entire form (or all inputs with rules), after using it the first time (or after I cancel the form). All my inputs on the form have as v-model a sub-property of a formdata-object which is a computed, based on a Object-prop in Vue3 Composition API :

const props = defineProps({
  modelValue: {
    type: Object,
    default: () => {},
  },
});

const formdata = computed({
  get: () => props.modelValue,
  set: (newvalue) => {
    emit("update:modelValue", newvalue);
  },
});

the form inputs look like this :

<q-input
    v-model="formdata.name"
    label="Name"
    :rules="[
      $rules.required('Name is required'),
    ]"
/>

In the Vuelidate docs I see something like this.$v.$reset() but with your plugin I can't find such an object anywhere.

Hope you can help!

Dylan190774 commented 2 years ago

Found it out myself, sorry for asking. I misunderstood this plugin for thinking it was some kind of Vuelidate-wrapper, but it simply defines the Vuelidate-rules, to make it easy to use them with the internal Quasar rules, which is very handy.

By wrapping the input fields in a q-form with a ref, you can do:

<q-form ref="myform">
  <!-- all inputs -->
</q-form>

const myform = ref(null)

myform.value.resetValidation();