我有一个包含表单的模式,当模式被销毁时,我在控制台中收到以下错误:
由于未连接表单,因此取消了表单提交
模态被添加到一个<modal-placeholder>
元素,该元素是<app-root>
我的顶级元素的直接子元素。
从DOM中删除表单并摆脱Angular 2中的此错误的正确方法是什么?我目前使用componentRef.destroy();
我有一个包含表单的模式,当模式被销毁时,我在控制台中收到以下错误:
由于未连接表单,因此取消了表单提交
模态被添加到一个<modal-placeholder>
元素,该元素是<app-root>
我的顶级元素的直接子元素。
从DOM中删除表单并摆脱Angular 2中的此错误的正确方法是什么?我目前使用componentRef.destroy();
componentRef.destroy();
,我在问题中添加了更多细节。谢谢!
Answers:
可能有其他原因导致这种情况,但是在我的情况下,我有一个按钮,浏览器将其解释为“提交”按钮,因此单击该按钮时导致错误,因此提交了表单。添加type =“ button”解决了该问题。完整元素:
<button type="button" (click)="submitForm()">
type="button"
:)
在表单标签中,您应该编写以下内容:
<form #myForm="ngForm" (ngSubmit)="onSubmit()">
在表单中,您应该具有“提交”按钮:
<button type="submit"></button>
最重要的是,如果表单中还有其他按钮,则应添加type="button"
到它们中。保留默认type
属性(我认为是submit
)会引起警告消息。
<button type="button"></button>
因此,实际上我今天只遇到了完全相同的问题,只是没有涉及模态。在我的表单中,我有两个按钮。一个提交表单,一个单击后路由回到上一页。
<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>
因此,如果要通过“取消”按钮或类似的方式关闭模式,则如上所述指定该按钮的类型应该可以解决您的问题。
在form元素中,您需要定义Submit方法(ngSubmit),类似于:
<form id="currency-edit" (ngSubmit)="onSubmit(f.value)" #f="ngForm">
在提交按钮上,您将省略单击方法,因为您的表单现已连接到提交方法:
<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
);
}
如果您需要立即放弃表格,则零延迟方法也应该可行。这样可以确保在调用Form提交后,DOM分离将在下一个事件循环中进行:
submitForm() {
this.saveData();
setTimeout(() => this.abandonForm());
}
无论按钮类型如何,这都应该起作用。
我最近遇到了这个问题,event.preventDefault()
为我工作。将其添加到您的点击事件方法中。
<button type="submit" (click)="submitForm($event)" mat-raised-button>Save</button>
和:
submitForm(event: Event) {
event.preventDefault();
// ...
}
也许您正在路由到表单提交的其他页面。如下例所示,使用程序化路线导航,而不要传递routerlink
到模板中:
router.navigate(['/your/router/path'])