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

Question

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

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

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

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

原文由 nick 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

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

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

原文由 Erik Lindblad 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

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

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

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

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

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

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

原文由 Nour 发布，翻译遵循 CC BY-SA 4.0 许可协议