无法在 Angular 2 应用程序中提交 HTML 表单

Posted 2023-02-22

【中文标题】无法在 Angular 2 应用程序中提交 HTML 表单

【英文标题】：Can't submit HTML form inside Angular 2 application

【发布时间】：2016-05-09 20:32:50

【问题描述】：

我正在尝试在我的 Angular 2 (beta2) 应用程序中包含静态 html 表单，但是当我点击提交按钮时它没有执行任何操作。

这是我使用的 HTML：

<form action="upload_path" method="POST">
  <input type="text" name="text" />
  <button type="submit">Send</button>
</form>

如何使我的表单能够与 Angular2 一起使用？

【参考方案1】：

有

<form ngNoForm ...> 

您可以阻止 Angular 处理表单。

【讨论】：

您可以从angular.io/api/forms/NgForm 中的选择器派生它，但我同意值得明确提及。

此答案不适用于 Angular 表单验证。应该使用

onsubmit="this.submit()" 对我来说也是诀窍

【参考方案2】：

如果要使用 HTML 表单的 action 属性，则需要禁用捕获 submit 事件并阻止其传播的 NgForm 指令的行为。请参阅此行：https://github.com/angular/angular/blob/master/modules/angular2/src/common/forms/directives/ng_form.ts#L81。

为此，只需将ngNoForm 属性添加到您的表单：

<form ngNoForm action="https://www.google.com" target="_blank" method="POST">
  <input name="q" value="test">
  <button type="submit">Search</button>
</form>

在这种情况下，将打开一个新窗口供您提交表单。

也就是说，Angular2 处理 SPA（单页应用程序），在大多数用例中，您需要在提交表单时保持在同一页面上。对于此类用例，您可以利用带有提交按钮的 submit 事件：

<form [ngFormModel]="companyForm" (submit)="onSubmit()">
    Name: <input [ngFormControl]="companyForm.controls.name"
           [(ngModel)]="company.name"/>

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

希望对你有帮助 蒂埃里

【参考方案3】：

Angular 2 为表单 submit 事件添加了一个事件处理程序，并阻止正在发送的表单表单。这样做是为了正常的 AJAX 用例，您实际上并不想提交表单（并因此重新加载页面），而是在 javascript 上捕获它并发送 AJAX 请求（或以其他方式处理数据）。

您可以通过使用您的自定义事件处理程序来绕过此问题，该处理程序将首先被调用，并且您在表单进入 Angular 的处理程序之前已经在其中发送了表单。

为此，您需要在表单元素上添加onsubmit="this.submit()"，如下所示：

<form action="upload_path" method="POST" onsubmit="this.submit()">

【讨论】：

很难找到，但这个答案是我能找到的最优雅的答案。它将在同一个窗口中提交表单（而不是像我找到的所有其他解决方案一样打开另一个表单）并且也不需要您禁用 ngForm（尽管我没有测试通过覆盖事件处理程序会导致您获得什么样的功能损失这边走）。因此，当然会通过远离它来违背 SPA 的观点，但如果你能忍受它，那就行了。

为什么模板中使用了this？我做了一个快速的谷歌，它似乎并不标准。 ***.com/questions/52152290/… 如果this 指的是组件，那你只是在调用TS文件中自定义的函数吗？如果是这样，我认为您可以省略this。

@ahong 根据写这个答案的时间来判断，用明确的this 写它一定是Angular 2.0 beta 的东西。 Angular 2.0 发布仅比这个答案晚了半年。

有道理...谢谢，很好的历史课

谢谢。我更喜欢这个答案。它适用于 Angular 表单验证