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

Question

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 i

Answer 1

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.

Answer 2

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

Answer 3

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'])

Answer 4

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.