Angular 2：由于表单未连接而取消表单提交

Posted 2023-02-22

【中文标题】Angular 2：由于表单未连接而取消表单提交

【英文标题】：Angular 2: Form submission canceled because the form is not connected

【发布时间】：2017-07-20 17:56:00

【问题描述】：

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

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

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

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

【问题讨论】：

Getting Error "Form submission canceled because the form is not connected"的可能重复

你有一个 *ngIf 来隐藏和显示表单吗？

@mickdev no *ngIf，我像 componentRef.destroy(); 那样销毁模态，我在我的问题中添加了更多细节。谢谢！

@mickdev 如果我使用 *ngif 隐藏和显示表单该怎么办

【参考方案1】：

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

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

【参考方案2】：

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

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

【参考方案3】：

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

例子：

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

【参考方案4】：

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

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

还有：

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

【讨论】：

这个答案不够详细。请令人信服地解释这个解决方案与其他列出的解决方案有何不同或更好，因为这篇文章已经有几个解决方案。请在发布前阅读 SO 指南。

@sparkplug 不要守门，这个答案很有用，即使它需要更多细节。

Will Shaver - 可能有用。格式良好且易于解释，并非如此。已制定标准以确保 SO 用户易于阅读和理解答案。 @dhilt 的回答是更详细的解决方案示例，更易于理解。

这是我的解决方案，而不是添加type="button"

【参考方案5】：

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

【参考方案6】：

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

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

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

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

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

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

【讨论】：

我认为#myForm="ngForm" 不是必需的。

你是对的，除非你需要对 ngForm 的引用，否则它不是必需的。

这是正确的解决方法。这样可以删除消息，同时保持按 Enter 提交的能力。

注意：确保您不在按钮上使用点击处理程序。就我而言，我试图同时使用

【参考方案7】：

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

【参考方案8】：

如果提交表单伴随着组件的销毁，表单提交在竞争条件下失败，表单与 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());

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

【参考方案9】：

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

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

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

【参考方案10】：

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

【讨论】：

谢谢，如果您仍想在表单上使用按钮 type="submit"，这应该是公认的答案

【参考方案11】：

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

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

【讨论】：

我不知道为什么这个答案被接受了，因为这样做会失去按 Enter 提交表单的能力。

Nour 的回答是最简单的，允许回车键。

这解决了我在表单上实现 CANCEL 按钮的问题，该按钮通过 *ngIf 指令从页面中删除了表单。我有一个 SAVE 按钮，它触发逻辑也删除表单（成功保存时），但即使我没有 type='button'，此错误消息也从未出现过。

在我的情况下，这个错误发生在取消按钮上，所以我添加了type="button" :)

我认为这个答案很好，因为您应该在表单中明确说明哪个按钮是提交按钮。它解决了提交时使用错误按钮的问题，并允许您继续使用输入键进行提交。