Form submission canceled because the form is not connected

Question

I have these html button:

<form ngNativeValidate (ngSubmit)="onSubmit()" #add_form="ngForm">
     <button class="btn btn-primary " type="submit[disabled]="!add_form.valid">ADD</button>
     <button class="btn btn-default" (click)="back()">Back</button>
</form>

And I obtain this warning in the console:

Form submission canceled because the form is not connected

Anyone can help me to resolve this warning?

https://stackoverflow.com/questions/42531167/angular-2-form-submission-canceled-because-the-form-is-not-connected — Chellappan வ, Oct 11 '18 at 11:03

score 13 · Answer 1 · answered Oct 11 '18 at 11:12

For your Back button, add type="button" to the declaration, like this:

<form ngNativeValidate (ngSubmit)="onSubmit()" #add_form="ngForm">
     <button class="btn btn-primary " type="submit[disabled]="!add_form.valid">ADD</button>
     <button type="button" class="btn btn-default" (click)="back()">Back</button>
</form>

What's happening, is that Angular interprets the second button as another submit button, and so you're effectively navigating in the middle of a submit. That's why the messages tells you that form submission is being cancelled.

Cobus Kruger's answer should be marked as the correct answer. Simply add type="button" to remove the warning. — Jim Harkins, Jul 09 '20 at 15:01

Form submission canceled because the form is not connected

1 Answers1