Javascript Angular 2：表单提交取消，因为表单未连接
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/42531167/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Angular 2: Form submission canceled because the form is not connected
提问by nick
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.
模态被添加到一个<modal-placeholder>元素中，该元素是<app-root>我的顶级元素的直接子元素。
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();
从 DOM 中删除表单并消除 Angular 2 中的此错误的正确方法是什么？我目前使用componentRef.destroy();
回答by Erik Lindblad
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:
发生这种情况可能还有其他原因，但在我的情况下，我有一个按钮被浏览器解释为提交按钮，因此在单击按钮时提交了表单，导致错误。添加 type="button" 解决了这个问题。完整元素：
<button type="button" (click)="submitForm()">
回答by Nour
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 most importantly, if you have any other buttons in your form you should add type="button"to them. Leaving the default typeattribute
(which I think is submit) will cause the warning message.
最重要的是，如果您的表单中有任何其他按钮，您应该添加type="button"到它们中。保留默认type属性（我认为是submit）将导致警告消息。
<button type="button"></button>
回答by Darkrender
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.
单击带有 routerLink 的第一个按钮完全符合它的预期，但显然也尝试提交表单，然后不得不放弃表单提交，因为表单所在的页面在提交期间从 DOM 中卸载。
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.
因此，如果您通过“取消”按钮或类似按钮关闭模式，则指定该按钮的类型（如上所示）应该可以解决您的问题。
回答by Igor Babic
In the form element you need to define submit method (ngSubmit), something like:
<form id="currency-edit" (ngSubmit)="onSubmit(f.value)" #f="ngForm">
在表单元素中，您需要定义提交方法（ngSubmit），例如：
<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.
在提交按钮上，你省略了 click 方法，因为你的表单现在连接到提交方法：
<button class="btn btn-success" type="submit">Save</button>按钮应该是提交类型。
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.
在组件背后的代码中，您实现了“onSubmit”方法，例如：
onSubmit(value: ICurrency) {...}此方法正在接收一个值对象，其中包含来自表单字段的值。
回答by dhilt
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
如果提交表单伴随着组件的销毁，表单提交将在竞争条件下失败，表单与 DOM 分离。说，我们有
submitForm() {
if (this.myForm.invalid) {
return;
}
this.saveData(); // processing Form data
this.abandonForm(); // change route, close modal, partial template ngIf-destroying etc
}
If saveDatais async (for example it saves the data via API call) then we may wait for the result:
如果saveData是异步的（例如它通过 API 调用保存数据）那么我们可以等待结果：
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:
如果您需要立即放弃表格，零延迟方法也应该有效。这保证了 DOM 分离在表单提交被调用后处于下一个事件循环中：
submitForm() {
this.saveData();
setTimeout(() => this.abandonForm());
}
This should work regardless of the button type.
无论按钮类型如何，这都应该有效。
回答by Abubakar Ibrahim
I had this problem recently and event.preventDefault()worked for me.
Add it to your click event method.
我最近遇到了这个问题并event.preventDefault()为我工作。将其添加到您的点击事件方法中。
<button type="submit" (click)="submitForm($event)" mat-raised-button>Save</button>
And:
和：
submitForm(event: Event) {
event.preventDefault();
// ...
}
回答by Nir
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.
我在 Angular 6 中看到了这一点，即使根本没有提交按钮。当同一个模板中有多个表单时会发生这种情况。不确定是否有解决方案/解决方案是什么。
回答by Shahid Islam
i had this warning, i changed button type "submit" to "button" problem solved.
我收到了这个警告，我将按钮类型“提交”更改为“按钮”问题解决了。
