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()"> 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 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 the most important thing if you have any other button in your form you should give it type="button", leave it as default(which i thing is submit) will cause the warning message.
<button type="button"></button> 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.