Question

我有一个包含表单的模态，当模态被销毁时，我在控制台中出现以下错误：

表单提交已取消，因为表单未连接

模态被添加到<modal-placeholder>元素，该元素是我的顶级元素<app-root>的直接子元素。

从DOM中删除表单并在Angular 2中删除此错误的正确方法是什么？我目前使用componentRef.destroy();

Answer 1

可能还有其他原因，但在我的情况下，我有一个按钮被浏览器解释为提交按钮，因此在单击按钮时提交了表单导致错误。添加type =＆＃34;按钮＆＃34;解决了这个问题。完整元素：

    <button type="button" (click)="submitForm()">

Answer 2

在表格标签中，您应该写下以下内容：

 <form #myForm="ngForm" (ngSubmit)="onSubmit()">

并在表单内你应该有提交按钮：

 <button type="submit"></button>

最重要的是，如果表单中有任何其他按钮，则应向其添加type="button"。保留默认的type属性（我认为是submit）会引发警告信息。

<button type="button"></button>

Answer 3

所以我实际上今天遇到了完全相同的问题，除非没有涉及模态。在我的表格中，我有两个按钮。提交表单的表单和单击表单后返回上一页的表单。

<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>

因此，如果您通过“取消”按钮或某种类型关闭模式，指定该按钮的类型（如上所示）应解决您的问题。

Answer 4

在表单元素中，您需要定义提交方法（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) { ... } 此方法使用表单字段中的值接收值对象。

Answer 5

如果提交表格时附有组件的销毁，则表格提交在竞争条件下失败，并将表格从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());
}

无论按钮类型如何，这都应该有效。

Answer 6

我最近遇到了这个问题，Array ( [CASSETE_1, CASSETE_2] => 500, [CASSETE_3, CASSETE_4] => 100 )对我有用。将其添加到您的点击事件方法。

Answer 7

我在Angular 6中看到了这一点，即使根本没有提交按钮。同一模板中有多个表单时发生。不确定是否有解决方案/解决方案是什么。

Answer 8

我收到此警告，我将按钮类型“提交”更改为“按钮”问题已解决。

Answer 9

如果您仍然希望将按钮的功能保持为“提交”类型，则不应在该按钮上使用click事件。相反，您应该在表单上使用ngSubmit事件。

示例：

<form (ngSubmit)="destroyComponent()">
<button type="submit">submit</button>
</form>

Answer 10

也许您正在路由到表单提交的其他页面。像下面的示例一样，使用程序化路线导航，而不是将routerlink传递到模板中：

router.navigate(['/your/router/path'])

Angular 2：表单提交已取消，因为表单未连接

10 个答案: