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

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();

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()">

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>

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.

In the form element you need to define submit method (ngSubmit), something like: <form id="currency-edit" (ngSubmit)="onSubmit(f.value)" #f="ngForm">

and on the submit button you omit click method, because your form is now connected to the submit method: <button class="btn btn-success" type="submit">Save</button> The button should be of submit type.

In the code behind component you implement "onSubmit" method, for example something like this: onSubmit(value: ICurrency) { ... } This method is receiving an value object with values from the form fields.

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.

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();
  // ...
}

I resolved the issue by adding the attribute type = "button".

<button type="button" onClick={props.formHandler}>Cancel</button>

I see this in Angular 6, even with no submit buttons at all. happens when there are multiple forms in the same template. not sure if there's a solution / what the solution is.

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

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>

Maybe you are routing to some other page on your form submission. Use programmatic route navigation, as in the example that follows, rather than passing routerlink into the template:

router.navigate(['/your/router/path'])