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

javascript html angular forms angular-forms
nick picture nick · Mar 1, 2017 · Viewed 93.3k times · Source

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

Erik Lindblad picture Erik Lindblad · Mar 30, 2017

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

Related questions

(change) vs (ngModelChange) in angular

Angular 1 does not accept onchange() event, it's only accepts ng-change() event. Angular 2, on the other hand, accepts both (change) and (ngModelChange) events, which both seems to be doing the same thing. What's the difference? which one is best for performance? …

Read More
Scroll to element on click in Angular 4

I want to be able to scroll to a target when a button is pressed. I was thinking something like this. <button (click)="scroll(#target)">Button</button> And in my component.ts a method like. scroll(…

Read More
What are the options for (keyup) in Angular2?

The following works great when the enter key is released. What other options are available for the keyup in addition to keyup.enter? <input #inputstring (keyup.enter)="doSomething(inputstring.value)"/>

Read More