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

validar formulario javascript onclick

Question

Ok, entonces 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 función submit() ? ¿Y cómo evitar eso?

Answer 1

Debe importar FormsModule desde ''@ angular / forms'' en su app.module.ts

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

Answer 2

Descubrí que con la versión 2.0 (ngSubmit) se pasa un null evento null al método, por lo que en su lugar, debería enviarnos (submit)

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

su archivo .ts

submit($event){
   /* form code */
   $event.preventDefault();
}

Answer 3

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

Answer 4

Tengo el mismo problema El trabajo que encontré fue el button reemplazar con a y aplicar el estilo del botón al 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>

Answer 5

Veo dos opciones para resolverlo:

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

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

De acuerdo con la especificación W3:

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

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

2) Use $event.preventDefault() :

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

o

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

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

Answer 6

Este Plunker sugiere lo contrario, cada botón parece 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">