Empresas
Empleos
  • Sobre nosotros
  • Soluciones
    • Publicación de vacantes
      Publica tu vacante y recibe candidatos calificados en 48h.
    • Evaluación de candidatos
      500+ pruebas técnicas y psicológicas, más anti-fraude.
    • Headhunting
      Búsqueda ejecutiva a la medida de principio a fin.
    • Nómina + EOR
      Dispersión de nómina y EOR en más de 15 países de LATAM.
  • Precios
  • Empleos

0

514
Vistas
¿Cómo enviar un formulario al servidor en Angular2?

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' } }
over 4 years ago · Santiago Trujillo
3 Respuestas
Responde la pregunta

0

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

over 4 years ago · Santiago Trujillo Denunciar

0

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>

http://plnkr.co/edit/Qjh8ooPpkfVgEe0dIv4q?p=vista previa

over 4 years ago · Santiago Trujillo Denunciar

0

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(); }
over 4 years ago · Santiago Trujillo Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Comercial
Legal
Términos y condiciones Política de privacidad
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomiéndame algunas ofertas
Necesito ayuda