如何提交表单服务器Angular2 [英] How to submit form to server in Angular2

问题描述

现在提交已经陷入由angular2甚至用行动=的＆lt;形式的方式＆gt;

演示链接：<一个href=\"http://plnkr.co/edit/4wpTwN0iCPeublhNumT5?p=$p$pview\">http://plnkr.co/edit/4wpTwN0iCPeublhNumT5?p=$p$pview

  //我们的根应用程序组件
从angular2 /核心进口{}组件@零件（{
  选择：我的应用，
  供应商：[]，
  模板：`
    ＆LT; D​​IV＆GT;
      ＆LT; H2＆GT;您好{{名}}＆LT; / H＆GT;
      ＆LT;形式的行动=htt​​ps://www.google.com目标=_空白的方法=POST＆GT;
        ＆LT;输入名称=Q值=测试＆GT;
        ＆LT;按钮式=提交＆GT;搜索和LT; /按钮＆GT;
      ＆LT; /表及GT;
    ＆LT; / DIV＆GT;
  `
  指令：[]
}）
出口类应用{
  构造函数（）{
    this.name ='Angular2
  }
}
 

解决方案

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

 ＆LT;形式（ngSubmit）=的onsubmit（）＃heroForm =ngForm＆GT;
  （......）
  ＆LT;输入类型=文本[（ngModel）] =data.name/＆GT;
  （......）
  ＆LT;按钮式=提交＆GT;发送和LT; /按钮＆GT;
＆LT; /表及GT;
 

在这种情况下，当你点击提交按钮，组件的的onsubmit 方法将被调用，你就可以手动将数据发送到服务器使用 HTTP 上Angular2类：

  @Component（{
}）
出口类MyComponent的{
  构造函数（私人HTTP：HTTP）{
    this.data = {
      名称：有些名称'
      （......）
    };
  }  的onSubmit（）{
    this.http.post（的http：// someurl'，JSON.stringify（this.data））
        。订阅（...）;
  }
}
 

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

修改

随着你的评论，你需要禁用先得 NgForm 指令的行为提交事件$ p $被传播pvents它。看到这一行：<一href=\"https://github.com/angular/angular/blob/master/modules/angular2/src/common/forms/directives/ng_form.ts#L81\" rel=\"nofollow\">https://github.com/angular/angular/blob/master/modules/angular2/src/common/forms/directives/ng_form.ts#L81.

要做到这一点只需将 ngNoForm 属性添加到您的窗体：

 ＆LT;形式ngNoForm行动=htt​​ps://www.google.com目标=_空白的方法=POST＆GT;
  ＆LT;输入名称=Q值=测试＆GT;
  ＆LT;按钮式=提交＆GT;搜索和LT; /按钮＆GT;
＆LT; /表及GT;
 

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

希望它可以帮助你，
蒂埃里

Now the submission has been caught by angular2 even with action= in the <form>.

demo link: 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'
  }
}

解决方案

You should leverage the NgSubmit directive, as described below:

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

In this case, when you click on the submit button, the onSubmit method of the component will be called and you'll be able to manually send data to the server using the HTTP class on 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(...);
  }
}

This way you can remain in the same page page.

Edit

Following your comment, you need to disable the behavior of the NgForm directive that catches the submit event and prevents it from being propagated. See this line: https://github.com/angular/angular/blob/master/modules/angular2/src/common/forms/directives/ng_form.ts#L81.

To do that simply add the ngNoForm attribute to your form:

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

In this case, a new window will be opened for your form submission.

Hope it helps you, Thierry

这篇关于如何提交表单服务器Angular2的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！