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

In case that submitting the Form is being accompanied by the component's destroying, the Form submitting fails in race condition with the detaching of the Form from the DOM. Say, we have

submitForm() {
  if (this.myForm.invalid) {
    return;
  }
  this.saveData(); // processing Form data
  this.abandonForm(); // change route, close modal, partial template ngIf-destroying etc
}

If saveData is async (for example it saves the data via API call) then we may wait for the result:

submitForm() {
  this.saveDataAsync().subscribe(
    () => this.abandonForm(),
    (err) => this.processError(err) // may include abandonForm() call
  );
}

If you need to abandon the Form immediately, a zero-delay approach also should work. This guarantees the DOM detachment to be in the next event loop after the Form submission has been called:

submitForm() {
  this.saveData();
  setTimeout(() => this.abandonForm());
}

This should work regardless of the button type.

Answer 2

I had this problem recently and event.preventDefault() worked for me. Add it to your click event method.

<button type="submit" (click)="submitForm($event)" mat-raised-button>Save</button>

And:

submitForm(event: Event) {
  event.preventDefault();
  // ...
}

Answer 3

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 4

i had this warning, i changed button type "submit" to "button" problem solved.

Answer 5

If you still want to maintain the functionality of the button to be of type "submit", then you should not be using the click event on that button. Instead you should use the ngSubmit event on the form.

Example:

<form (ngSubmit)="destroyComponent()">
<button type="submit">submit</button>
</form>

Answer 6

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.