Vue-Formulate reset does not re-trigger validation message

Question

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?

Answer 1

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