如何在Angular2中向服务器提交表单？答案

【问题标题】：How to submit form to server in Angular2?如何在Angular2中向服务器提交表单？
【发布时间】：2016-04-22 11:45:39
【问题描述】：

现在，即使

中有 action=，也已被 angular2 捕获。

演示链接：http://plnkr.co/edit/4wpTwN0iCPeublhNumT5?p=preview

//our root app component
import {Component} from 'angular2/core'

@Component({
  selector: 'my-app',
  providers: [],
  template: `
    <div>
      <h2>Hello {{name}}</h2>
      <form action="https://www.google.com" target="_blank" method="POST">
        <input name="q" value="test">
        <button type="submit">Search</button>
      </form>
    </div>
  `,
  directives: []
})
export class App {
  constructor() {
    this.name = 'Angular2'
  }
}

【问题讨论】：

直接发布表单会导致页面重新加载，这通常不是您在 Angular 应用程序 (SPA) 中想要的。从表单中获取数据，然后从您的代码向服务器发送 HTTP 请求。
target="_blank" 的帖子应该是到一个新的页面。而且该操作实际上指向不同的域，因此 xhr 不是一个选项。
我明白了。你是对的。

标签： angular

【解决方案1】：

您应该利用NgSubmit 指令，如下所述：

<form (ngSubmit)="onSubmit()" #heroForm="ngForm">
  (...)
  <input type="text" [(ngModel)]="data.name"/>
  (...)
  <button type="submit">Send</button>
</form>

在这种情况下，当您单击提交按钮时，将调用组件的onSubmit 方法，您将能够使用Angular2 上的HTTP 类手动将数据发送到服务器：

@Component({
})
export class MyComponent {
  constructor(private http:Http) {
    this.data = {
      name: 'some name'
      (...)
    };
  }

  onSubmit() {
    this.http.post('http://someurl', JSON.stringify(this.data))
        .subscribe(...);
  }
}

这样你就可以保持在同一个页面页面中。

编辑

根据您的评论，您需要禁用捕获submit 事件并阻止其传播的NgForm 指令的行为。请参阅此行：https://github.com/angular/angular/blob/master/modules/%40angular/forms/src/directives/ng_form.ts#L141。

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

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

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

希望对你有帮助蒂埃里

【讨论】：

正如我在上面的评论中提到的。 ngSubmit 不是我想要的。我只想打开一个包含帖子数据的新窗口。
对不起，我不明白您的问题...您应该为您的表单使用ngNoForm 属性。我更新了我的答案;-)
赞！我遇到了同样的问题，我的表单（包装提交按钮以注销我的应用程序）没有执行。我花了一个小时查看我的标记，然后单击它可能是 Angular2 特定的东西。放入 ngNoForm 属性，然后繁荣！成功！非常感谢！
@ThierryTemplier 你应该做一些 ng2 教程 :)
ngNoForm，添加了多么直观和合乎逻辑的注释。但这只是解决了一个我试图解决一周的问题。

【解决方案2】：

试试这个：

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

http://plnkr.co/edit/Qjh8ooPpkfVgEe0dIv4q?p=preview

【讨论】：

嘿，这对我有用。你能补充解释为什么吗？我刚刚添加了模板变量和点击事件
这就是 html 表单的工作方式，当您提交它们时，它们会按照 method 属性中定义的方式向 action 属性中定义的 url 发送 post 或 get 请求

【解决方案3】：

您也可以通过这种方式提交表单。

这里是 HTML 标记。

<form (ngSubmit)="onSubmit($event)" #f="ngForm">
  (...)
  <input type="text" [(ngModel)]="data.name"/>
  (...)
  <button type="submit">Send</button>
</form>

这是您的 .ts 文件中的代码。

onSubmit(e) {
    e.target.submit();
  }

【讨论】：

我很欣赏这个不使用 ViewChild 的答案

【解决方案4】：

嘿，如果有人在将表单发布到新 url 时在 Firefox 中遇到了一些烦人的问题，会导致页面刷新并且没有跟进到页面添加 target="_parent" 并将解决该问题。

【讨论】：