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?

— kfa
fuente

1

falso retorno; desde su función submit ()

— Aran Dekar

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:

http://w3c.github.io/html-reference/button.html

Un elemento de botón con ningún tipo de atributo especificado representa lo mismo que un botón de elemento con su conjunto de tipo de atributo de "enviar" .

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