nic*_*ick 68 html javascript forms angular angular-forms
我有一个包含表单的模态,当模态被销毁时,我在控制台中收到以下错误:
表单提交已取消,因为表单未连接
模态被添加到一个<modal-placeholder>元素中,该元素是<app-root>我的顶级元素的直接子元素.
从DOM中删除表单并在Angular 2中删除此错误的正确方法是什么？我目前正在使用componentRef.destroy();
小智 145
可能还有其他原因,但在我的情况下,我有一个按钮,由浏览器解释为提交按钮,因此单击按钮时提交表单导致错误.添加type ="button"修复了问题.完整元素:
<button type="button" (click)="submitForm()">
Nou*_*our 64
在表单标记中,您应该编写以下内容:
<form #myForm="ngForm" (ngSubmit)="onSubmit()">
在表单内你应该有提交按钮:
<button type="submit"></button>
最重要的是,如果表单中有任何其他按钮,则应添加type="button"它们.保留默认type属性(我认为是submit)将导致警告消息.
<button type="button"></button>
小智 21
所以我实际上今天遇到了完全相同的问题,除非没有涉及模态.在我的表格中,我有两个按钮.提交表单的表单和单击表单后返回上一页的表单.
<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) {
...
}
这样的方法:
此方法接收带有表单字段值的值对象.
如果提交表单伴随着组件的销毁，表单提交将在竞争条件下失败，表单与 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 分离在表单提交被调用后处于下一个事件循环中：
submitForm() {
this.saveData();
setTimeout(() => this.abandonForm());
}
无论按钮类型如何，这都应该有效。
小智 5
我最近遇到了这个问题并event.preventDefault()为我工作。将其添加到您的点击事件方法中。
<button type="submit" (click)="submitForm($event)" mat-raised-button>Save</button>
和：
submitForm(event: Event) {
event.preventDefault();
// ...
}