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 is not connected

The modal is added to a <modal-placeholder> element which is a direct child to <app-root>, my top level element.

What's the correct way to removing a form from the DOM and getting rid of this error in Angular 2? I currently use componentRef.destroy();

Answer 1

There might be other reasons this occurs but in my case I had a button that was interpreted by the browser as a submit button and hence the form was submitted when the button was clicked causing the error. Adding type="button" fixed the issue. Full element:

    <button type="button" (click)="submitForm()">

Answer 2

In the form tag you should write the following:

 <form #myForm="ngForm" (ngSubmit)="onSubmit()">

and inside the form you should have submit button:

 <button type="submit"></button>

And most importantly, if you have any other buttons in your form you should add type="button" to them. Leaving the default type attribute (which I think is submit) will cause the warning message.

<button type="button"></button>

Answer 3

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.

<button class="btn btn-default" routerLink="/events">Cancel</button>
<button type="submit" class="btn btn-primary">Submit</button>

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.

<button type="button "class="btn btn-default" routerLink="/events">Cancel</button>

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.