CODEWITHSUNDEEP
javascriptangularangular6
Doflamingo19
Doflamingo19

Reputation: 1629

Form submission canceled because the form is not connected

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?

Upvotes: 3

Views: 10821

Answers (1)

Cobus Kruger
Cobus Kruger

Reputation: 8605

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.

Upvotes: 13

Related Questions