我有一个包含表单的模式，当模式被破坏时，我在控制台中收到以下错误：
表单提交因表单未连接而取消
模态被添加到<modal-placeholder> 元素，它是我的顶级元素<app-root> 的直接子元素。
从 DOM 中删除表单并消除 Angular 2 中的此错误的正确方法是什么？我目前使用componentRef.destroy();
【问题讨论】：
componentRef.destroy(); 那样销毁模态，我在我的问题中添加了更多细节。谢谢！
标签： javascript html angular forms angular-forms
我通过添加属性type = "button" 解决了这个问题。
<button type="button" onClick={props.formHandler}>Cancel</button>
【讨论】：
也许您正在路由到表单提交的其他页面。使用程序化路线导航，如下例所示，而不是将 routerlink 传递到模板中：
router.navigate(['/your/router/path'])
【讨论】：
如果您仍希望将按钮的功能保持为“提交”类型，那么您不应该在该按钮上使用点击事件。相反，您应该在表单上使用 ngSubmit 事件。
例子：
<form (ngSubmit)="destroyComponent()">
<button type="submit">submit</button>
</form>
【讨论】：
我最近遇到了这个问题，event.preventDefault() 为我工作。
将其添加到您的点击事件方法中。
<button type="submit" (click)="submitForm($event)" mat-raised-button>Save</button>
还有：
submitForm(event: Event) {
event.preventDefault();
// ...
}
【讨论】：
type="button"
我收到此警告，我将按钮类型“提交”更改为“按钮”问题已解决。
【讨论】：
在表单标签中你应该写以下内容：
<form #myForm="ngForm" (ngSubmit)="onSubmit()">
在表单中你应该有提交按钮：
<button type="submit"></button>
最重要的是，如果您的表单中有任何其他按钮，您应该将type="button" 添加到它们。保留默认的 type 属性
（我认为是submit）会导致警告信息。
<button type="button"></button>
【讨论】：
我在 Angular 6 中看到了这一点，即使根本没有提交按钮。 当同一模板中有多个表单时会发生。 不确定是否有解决方案/解决方案是什么。
【讨论】：
如果提交表单伴随着组件的销毁，表单提交在竞争条件下失败，表单与 DOM 分离。说，我们有
submitForm() {
if (this.myForm.invalid) {
return;
}
this.saveData(); // processing Form data
this.abandonForm(); // change route, close modal, partial template ngIf-destroying etc
}
如果saveData是异步的（例如它通过API调用保存数据）那么我们可以等待结果：
submitForm() {
this.saveDataAsync().subscribe(
() => this.abandonForm(),
(err) => this.processError(err) // may include abandonForm() call
);
}
如果您需要立即放弃表单，零延迟方法也应该有效。这保证了 DOM 分离在 Form 提交被调用后处于下一个事件循环中：
submitForm() {
this.saveData();
setTimeout(() => this.abandonForm());
}
无论按钮类型如何，这都应该有效。
【讨论】：
所以我今天实际上遇到了完全相同的问题，只是没有涉及模态。在我的表单中，我有两个按钮。一个提交表单，一个在点击后返回上一页。
<button class="btn btn-default" routerLink="/events">Cancel</button>
<button type="submit" class="btn btn-primary">Submit</button>
点击第一个按钮与 routerLink 完全一样，但显然也尝试提交表单，然后不得不放弃表单提交，因为表单所在的页面在期间从 DOM 卸载提交。
这似乎与发生在您身上的事情完全相同，除了使用模式而不是整个页面。
如果您直接将第二个按钮的类型指定为提交以外的其他内容，问题就会得到解决。
<button type="button "class="btn btn-default" routerLink="/events">Cancel</button>
因此，如果您通过“取消”按钮或类似的方式关闭模式，指定该按钮的类型（如上所示）应该可以解决您的问题。
【讨论】：
在表单元素中，您需要定义提交方法（ngSubmit），例如：
<form id="currency-edit" (ngSubmit)="onSubmit(f.value)" #f="ngForm">
在提交按钮上，您省略了 click 方法，因为您的表单现在已连接到提交方法：
<button class="btn btn-success" type="submit">Save</button> 按钮应该是提交类型的。
在组件后面的代码中，您实现“onSubmit”方法，例如：
onSubmit(value: ICurrency) {
...
}
此方法正在接收具有来自表单字段的值的值对象。
【讨论】：
发生这种情况可能还有其他原因，但在我的情况下，我有一个按钮被浏览器解释为提交按钮，因此在单击按钮时提交了表单导致错误。添加 type="button" 解决了这个问题。完整元素：
<button type="button" (click)="submitForm()">
【讨论】：
type="button" :)