Estoy tratando de incluir un formulario HTML estático dentro de mi aplicación Angular 2 (beta2), pero no hace nada cuando presiono el botón de enviar.
Aquí está el HTML que uso:
<form action="upload_path" method="POST"> <input type="text" name="text" /> <button type="submit">Send</button> </form>¿Cómo puedo habilitar mi formulario para que funcione con Angular2?
Con
<form ngNoForm ...>puede evitar que Angular maneje el formulario.
Si desea utilizar el atributo de action del formulario HTML, 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/angular2/src/common/forms/directives/ng_form.ts#L81 .
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.
Dicho esto, Angular2 aborda las SPA (aplicaciones de una sola página) y, en la mayoría de los casos de uso, debe permanecer en la misma página al enviar un formulario. Para tales casos de uso, puede aprovechar el evento de submit con un botón de envío:
<form [ngFormModel]="companyForm" (submit)="onSubmit()"> Name: <input [ngFormControl]="companyForm.controls.name" [(ngModel)]="company.name"/> <button type="submit">Submit</button> </form>Espero que te ayude Thierry
Angular 2 agrega un controlador de eventos al evento de envío de formularios y bloquea los formularios que se envían. Esto se hace por el bien del caso de uso normal de AJAX en el que en realidad no desea enviar el formulario (y, por lo tanto, volver a cargar la página), sino capturarlo en JavaScript y enviar una solicitud de AJAX (o manejar los datos de otra manera).
Puede omitir esto utilizando su controlador de eventos personalizado, que se llamará primero y en el que ya envía el formulario antes de que vaya al controlador de Angular.
Para hacer esto, debe agregar onsubmit="this.submit()" en su elemento de formulario de esta manera:
<form action="upload_path" method="POST" onsubmit="this.submit()">