Evite que Angular2 envíe el formulario sistemáticamente al hacer clic en el botón

107

Ok, tal vez esto no esté claro. Obtenga este formulario:

<form (ngSubmit)="submit()" #crisisForm="ngForm">
   <input type="text" name="name" [(ngModel)]="crisis.name">
   <button type="submit">Submit</button>
   <button type="button" (click)="preview()">Preview</button>
   <button type="reset" (click)="reset()">Reset</button>
</form>

¿Por qué todos los botones activan la submit()función? ¿Y cómo evitarlo?

javascript forms angular submit kfa
fuente
1
falso retorno; desde su función submit ()
Aran Dekar

Respuestas:

213

Veo dos opciones para solucionarlo:

1) Especifique type = "button" explícitamente (creo que es más preferible ):

<button type="button" (click)="preview();">Preview</button>

Según la especificación W3:

2) Uso $event.preventDefault():

<button (click)="preview(); $event.preventDefault()">Preview</button>

o 

<button (click)="preview($event);">Preview</button>

preview(e){
  e.preventDefault();
  console.log('preview')
}
yurzui
fuente
3
(click)="preview(); false"debería hacer lo mismo. Por ejemplo, stopPropagation()sería necesario llamarlo explícitamente, pero si un controlador de eventos regresa false, entonces preventDefaultse llama en el evento.
Günter Zöchbauer
1
@ Günter Zöchbauer ¡Muchas gracias por señalar esto! Primero lo probé, pero escribí return falsey no funcionó :)
yurzui
1
returnProbablemente no esté permitido en expresiones vinculantes, pero el valor de la última expresión se devuelve implícitamente.
Günter Zöchbauer
2
Usar el n. ° 2 parece la mejor respuesta. Simplemente agregando: type = "button" a mi botón resolvió el problema
Michael Washington
1
No conocía type=buttonlas especificaciones del W3C. ¡¡Gracias!!
Hugo H
17

Este Plunker sugiere lo contrario, todos los botones parecen funcionar según lo previsto.

Sin embargo, para evitar el comportamiento predeterminado del formulario, puede hacer esto,

TS:

submit(e){
 e.preventDefault();
}

Modelo:

<form (submit)="submit($event)" #crisisForm="ngForm">
Ankit Singh
fuente
Gracias por la respuesta y el plnkr ... Se trata del tipo de botón plnkr.co/edit/BKIqcz7aKBFQDZioZ5Fy
kfa
en efecto ! es. y ha definido en todos los botones, por lo que funcionó según lo previsto
Ankit Singh
7

Descubrí que con la versión 2.0 (ngSubmit)se pasa un nullvalor de evento al método, por lo que debería(submit) 

<form (submit)="submit($event)" #crisisForm="ngForm">

su archivo .ts 

submit($event){
   /* form code */
   $event.preventDefault();
}
imal hasaranga perera
fuente
¡Gracias! Esto funcionó, no sé por qué ngSubmit funciona cuando no se usa como un grupo de formulario, pero cuando lo uso como un grupo de formulario, tengo que usar su solución
Nikhil Das Nomula
Di esta respuesta hace algún tiempo cuando se lanzó 2.0, pero después de que angular 2 ha recorrido un largo camino, ¿está seguro de que está utilizando la última versión de lanzamiento?
imal hasaranga perera
6

Establezca type = "button" en el botón que no desea ejecutar enviar.

Alexis Gamarra
fuente
6

Tengo el mismo problema. El trabajo en torno a lo que encontré fue la sustitución buttoncon ay aplicar estilo de botón de elemento de anclaje:

<form (ngSubmit)="submit()" #crisisForm="ngForm">
   <input type="text" name="name" [(ngModel)]="crisis.name">
   <button type="submit">Submit</button>
   <a class="btn" (click)="preview()">Preview</a>
   <a class="btn" (click)="reset()">Reset</a>
</form>
Arun Ghosh
fuente
6

Tienes que importar FormsModule desde '@ angular / forms' en tu app.module.ts

import { FormsModule } from '@angular/forms';
 @NgModule({
  imports: [
    FormsModule
 ],
 })
Marouane Afroukh
fuente