为什么无法在Angular 2应用程序中提交HTML表单?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (101)

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

这是我使用的HTML:

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

我怎样才能让我的表单与Angular2一起工作?

提问于
用户回答回答于
<form ngNoForm ...> 

可以阻止Angular处理表单。

用户回答回答于

如果要使用actionHTML表单的属性,则需要禁用NgForm捕获submit事件并阻止其传播的指令的行为。

要做到这一点,只需将该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>

扫码关注云+社区

领取腾讯云代金券