代码之家 › 专栏 › 技术社区 › Tim Green

如何在Angular2中向服务器提交表单?

angular

41

Tim Green · 技术社区 · 10 年前

现在,即使在<表单>。

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

4 回复 | 直到 8 年前

1

90

bob 9 年前

你应该利用 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>

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

希望它能帮助你, 蒂埃里

2

15

Langley 10 年前

试试这个:

<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

3

5

bhucho 5 年前

你也可以用这种方式提交表格。

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

4

2

rtn 10 年前

嘿,如果有人在Firefox中遇到了一些恼人的问题,当将表单发布到一个新的url时,会导致页面刷新,并且不会继续添加页面 target="_parent" 并将解决该问题。