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

Question

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

这是我使用的 HTML：

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

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

Answer 1

有

<form ngNoForm ...> 

您可以阻止 Angular 处理表单。

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

希望对你有帮助 蒂埃里

Answer 3

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

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

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

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