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

Question

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

Form submission canceled because the form is not connected

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

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

Answer 1

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

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

Answer 2

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

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

在您实现 "onSubmit" 方法的组件隐藏代码中，例如如下所示： onSubmit(value: ICurrency) { ... } 此方法正在接收一个值对象，其中包含来自表单字段的值。

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>

因此，如果您通过 'Cancel' 按钮或类似的东西关闭模式，指定该按钮的类型（如上所示）应该可以解决您的问题。

Answer 4

在表单标签中你应该写下：

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

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

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

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

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

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

我最近遇到了这个问题，event.preventDefault() 对我有用。将其添加到您的点击事件方法中。

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

并且：

submitForm(event: Event) {
  event.preventDefault();
  // ...
}

Answer 7

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

Answer 8

我有这个警告，我将按钮类型 "submit" 更改为 "button" 问题已解决。

Answer 9

如果您仍想将按钮的功能保持为 "submit" 类型，则不应在该按钮上使用单击事件。相反，您应该在表单上使用 ngSubmit 事件。

示例：

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

Answer 10

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

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

Answer 11

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

<button type="button" onClick={props.formHandler}>Cancel</button>

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

Angular 2: Form submission canceled because the form is not connected

html

javascript

forms

angular

angular-forms