Question

现在提交已被angular2捕获，即使在＆lt; form＆gt;中有action =。

演示链接：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'
  }
}

Answer 1

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

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

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

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

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

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

修改

根据您的评论，您需要禁用捕获NgForm事件的submit指令的行为并阻止其传播。请参阅此行：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>

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

希望它可以帮到你，亨利

Answer 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

Answer 3

嘿，如果任何其他人在Firefox中将表单发布到新网址时遇到一些令人烦恼的问题会导致页面刷新，并且不会跟进页面添加target="_parent"并解决问题。

Answer 4

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

这是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(); }

如何在Angular2中将表单提交到服务器？

4 个答案: