Ahora el envío ha sido capturado por angular2 incluso con action= en el <form>.
enlace de demostración: 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' } }
Debe aprovechar la directiva NgSubmit
, como se describe a continuación:
<form (ngSubmit)="onSubmit()" #heroForm="ngForm"> (...) <input type="text" [(ngModel)]="data.name"/> (...) <button type="submit">Send</button> </form>
En este caso, cuando haga clic en el botón Enviar, se llamará al método onSubmit
del componente y podrá enviar datos manualmente al servidor utilizando la clase HTTP
en 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(...); } }
De esta manera puede permanecer en la misma página página.
Editar
Después de su comentario, debe deshabilitar el comportamiento de la directiva NgForm
que detecta el evento de submit
y evita que se propague. Consulte esta línea: https://github.com/angular/angular/blob/master/modules/%40angular/forms/src/directives/ng_form.ts#L141 .
Para hacerlo, simplemente agregue el atributo ngNoForm
a su formulario:
<form ngNoForm action="https://www.google.com" target="_blank" method="POST"> <input name="q" value="test"> <button type="submit">Search</button> </form>
En este caso, se abrirá una nueva ventana para enviar el formulario.
Espero que te ayude Thierry
Prueba esto:
<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>
También puede enviar el formulario de esta manera.
Aquí está el marcado HTML.
<form (ngSubmit)="onSubmit($event)" #f="ngForm"> (...) <input type="text" [(ngModel)]="data.name"/> (...) <button type="submit">Send</button> </form>
Y aquí está el código en su archivo .ts .
onSubmit(e) { e.target.submit(); }