现在,即使在
演示链接:http://plnkr.co/edit/4wpTwN0iCPeublhNumT5?p=preview 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'
}
}
您应该利用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(...);
}
}
这样您就可以保持在同一页面页面。
Edit
根据您的评论,您需要禁用NgForm
捕获指令submit
事件并阻止其传播。看到这一行:https://github.com/angular/angular/blob/master/modules/%40angular/forms/src/directives/ng_form.ts#L141 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>
在这种情况下,将打开一个新窗口供您提交表单。
希望对你有帮助,
蒂埃里
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)