Angular 2: Form submission canceled because the form is not connected

Question

I have a modal that contains a form, when the modal is destroyed I get the following error in the console:

Form submission canceled because the form i

Answer 1

So I actually just ran into the exact same problem today except without a modal involved. In my form, I have two buttons. One that submits the form and one that, when clicked, routes back to the previous page.

Cancel
Submit

Clicking on the first button with the routerLink does exactly what its supposed to, but also apparently tries to submit the form as well, and then has to abandon form submission because the page that the form was on is unmounted from the DOM during submission.

This appears to be the exact same thing that is happening to you, except with a modal instead of the entire page.

The problem becomes fixed if you directly specify the type of the second button to be something other than submit.

Cancel

So if you are closing the modal via a 'Cancel' button or something of the sort, specifying that button's type, as shown above, should solve your issue.