vue.jsvue-formulate

Vue-Formulate reset does not re-trigger validation message


This example shows a very small form made with vue-formulate:

https://codesandbox.io/s/vue-formulate-reseting-form-does-not-initiate-validation-message-again-yxruq

The input field takes a string of at least 4 of characters. Upon hitting submit, the form is reset via

this.$formulate.reset(‘[name-of-the-form]‘)

It does indeed clear the form. But the validation message does not appear again.

What has to be done to fix this? Or could this be a bug?


Solution

  • Looks like the $formulate.resetValidation() method is a bit over aggressive depending on the validation behavior assigned. You can "undo" this by applying a ref to the form, and then explicitly iterating over the registry:

    <FormulateForm
      ...
      ref="form"
    >
    
    // in your submit handler:
    this.$refs.form.registry.map((input) => {
      input.formShouldShowErrors = true;
    })
    

    Updated reproduction: https://codesandbox.io/s/vue-formulate-reseting-form-does-not-initiate-validation-message-again-forked-kn12h?file=/src/components/Reproduction.vue