无法在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

如果要使用actionHTML表单的属性,则需要禁用NgForm捕获submit事件的指令的行为并阻止其传播.请参阅此行: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为表单提交事件添加了一个事件处理程序,并阻止正在发送的表单表单.这是为了正常的AJAX用例,你实际上并不想提交表单(从而重新加载页面),而是在JavaScript上捕获它并发送一个AJAX请求(或以其他方式处理数据).

您可以通过使用自定义事件处理程序来绕过此操作,该处理程序将首先被调用,并且在它转到Angular的处理程序之前已经发送了表单.

为此,您需要onsubmit="this.submit()"在表单元素上添加如下:

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