Why am I getting attach() error when closing a modal with a vee-validated form

Question

I get this error when I close a bootstrap modal (bootstrap-vue) that contains a vee-validated "update" form using vue.js.

main.js:477686 Uncaught (in promise) Error: [vee-validate] Validating a non-existent field: "#35". Use "attach()" first.  

It happens on all modals with forms in them so it's nothing unique about any one of the forms that causes it. I'm just curious as to where to look in why I'd get this same error on updating forms as bootstrap modals are closing. I'm using vee-validate v2 if that matters.

Answer 1

This is because the directive in vee-validate v2 unregisters fields when they get unmounted which is what happens when your modals disappear.

Since vee-validate does validation asynchronously, it is likely that your form triggers a validation attempt right before it closes. This is especially apparent if you are using denounced validation.

There are multiple ways around it, if you are using denounced validation then you could delay the closure of your modals by the denounce amount. Otherwise you could use nextTick or Promise.resolve to close your modals which will allow them to close after validation is done.