Come inviare il modulo al server in Angular2

Question

Ora l'invio è stato rilevato da angular2 anche con action = nel formato < >.

collegamento

demo: 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

Si dovrebbe sfruttare la direttiva NgSubmit, come descritto di seguito:

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

In questo caso, quando si fa clic sul pulsante di invio, il metodo della onSubmit verrà chiamato il componente e sarà possibile inviare manualmente i dati al server utilizzando la classe HTTP su 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(...); 
    } 
} 

In questo modo è possibile rimanere nella stessa pagina.

Modifica

Seguendo il tuo commento, è necessario disattivare il comportamento della direttiva NgForm che cattura l'evento submit e impedisce che venga propagato. Vedi questa riga: https://github.com/angular/angular/blob/master/modules/%40angular/forms/src/directives/ng_form.ts#L141.

Per fare che è sufficiente aggiungere l'attributo ngNoForm al modulo:

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

In questo caso, una nuova finestra sarà aperta per vostro modulo di presentazione.

Spero che ti aiuta, Thierry

Answer 2

Prova questo:

<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

Hey, se qualcuno altro ha mai qualche problema fastidioso in Firefox quando la pubblicazione di un modulo per un nuovo URL causa un aggiornamento della pagina e non segue la pagina aggiungi target="_parent" e risolverà il problema.