Búsqueda de sitios web

javascript - Evitar que Angular2 envíe un formulario sistemáticamente al hacer clic en un botón

Ok, así que tal vez esto no esté claro. Consigue 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 función submit()? ¿Y cómo evitar eso?

Respuesta #1

Veo dos opciones para resolverlo:

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

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

Según la especificación de W3:

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

    Un elemento de botón sin atributo type especificado representa lo mismo que un elemento de botón con su atributo type establecido en "submit".

2) Usa $event.preventDefault():

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

o

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

preview(e){
  e.preventDefault();
  console.log('preview')
}

Respuesta #2

Este Plunker sugiere lo contrario, cada botón parece funcionar como se espera.

Sin embargo, para prevenir el comportamiento predeterminado del formulario puedes hacer esto,

TS:

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

Plantilla:

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

Respuesta #3

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

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

Artículos relacionados