Impossibile inviare il modulo HTML all'interno dell'applicazione Angular 2

Question

Sto tentando di includere un modulo HTML statico nella mia app Angular 2 (beta2) ma non fa nulla quando premo il pulsante di invio.

Ecco il codice HTML che uso:

<form action="upload_path" method="POST"> 
    <input type="text" name="text" /> 
    <button type="submit">Send</button> 
</form> 

Come posso attivare la mia forma di lavorare con Angular2?

Answer 1

Con

<form ngNoForm ...> 

è possibile impedire angolare dalla manipolazione della forma.

Answer 2

Angular 2 aggiunge un gestore eventi ai moduli invia evento e blocca il modulo di modulo inviato. Questo viene fatto per il normale caso d'uso AJAX in cui in realtà non si desidera inviare il modulo (e quindi ricaricare la pagina), ma invece catturarlo su JavaScript e inviare una richiesta AJAX (o gestire i dati in altri modi).

È possibile ignorare questo utilizzando il gestore di eventi personalizzato che verrà chiamato prima e in cui si invia il modulo già prima che passi al gestore di Angular.

A tale scopo, è necessario aggiungere onsubmit="this.submit()" sul vostro elemento modulo come questo:

<form action="upload_path" method="POST" onsubmit="this.submit()"> 

Answer 3

Se si desidera utilizzare l'attributo action di form HTML, è 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/angular2/src/common/forms/directives/ng_form.ts#L81.

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.

Detto questo, Angular2 affronta le SPA (Single Page Applications) e nella maggior parte dei casi di utilizzo, è necessario rimanere nella stessa pagina quando si invia un modulo. Per tali casi d'uso, è possibile sfruttare l'evento submit con un pulsante di invio:

<form [ngFormModel]="companyForm" (submit)="onSubmit()"> 
    Name: <input [ngFormControl]="companyForm.controls.name" 
      [(ngModel)]="company.name"/> 

    <button type="submit">Submit</button> 
</form> 

Spero che ti aiuta, Thierry