100

我有一个包含表单的模态，当模态被破坏时，我在控制台中收到以下错误：

表单提交因表单未连接而取消

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

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

4

11 回答 11

211

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

    <button type="button" (click)="submitForm()">
于 2017-03-30T20:43:57.620 回答
98

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

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

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

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

最重要的是，如果您的表单中有任何其他按钮，您应该添加type="button"它们。保留默认type属性（我认为是submit）将导致警告消息。

<button type="button"></button>
于 2017-10-19T15:17:45.150 回答
24

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

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

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

于 2017-07-26T16:55:42.627 回答
6

在表单元素中，您需要定义提交方法（ngSubmit），例如： <form id="currency-edit" (ngSubmit)="onSubmit(f.value)" #f="ngForm">

并且在提交按钮上你省略了点击方法，因为你的表单现在连接到提交方法： <button class="btn btn-success" type="submit">Save</button>按钮应该是提交类型。

在组件背后的代码中，您实现“onSubmit”方法，例如： onSubmit(value: ICurrency) { ... } 此方法接收一个带有来自表单字段的值的值对象。

于 2017-07-22T22:40:40.763 回答
5

我最近遇到了这个问题并event.preventDefault()为我工作。将其添加到您的点击事件方法中。

<button type="submit" (click)="submitForm($event)" mat-raised-button>Save</button>

和：

submitForm(event: Event) {
  event.preventDefault();
  // ...
}
于 2018-04-10T00:10:55.323 回答
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 分离在 Form 提交被调用后处于下一个事件循环中：

submitForm() {
  this.saveData();
  setTimeout(() => this.abandonForm());
}

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

于 2018-01-20T11:47:55.177 回答
1

我通过添加属性解决了这个问题type = "button"。

<button type="button" onClick={props.formHandler}>Cancel</button>
于 2021-09-01T17:23:10.957 回答
0

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

例子：

<form (ngSubmit)="destroyComponent()">
<button type="submit">submit</button>
</form>
于 2020-06-02T22:27:12.940 回答
0

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

于 2018-06-25T14:03:55.030 回答
0

我有这个警告，我将按钮类型“提交”更改为“按钮”问题解决了。

于 2019-05-13T13:03:24.600 回答
-1

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

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

于 2020-08-07T11:53:22.623 回答