Vermeiden Sie, dass Angular2 das Formular beim Klicken auf die Schaltfläche systematisch sendet

Ok, vielleicht ist das unklar. Holen Sie sich dieses Formular:

<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>

Warum lösen alle Tasten die submit()Funktion aus? Und wie kann man das vermeiden?

Ich sehe zwei Möglichkeiten, um es zu lösen:

1) Geben Sie type = "button" explizit an (ich denke, es ist vorzuziehen ):

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

Gemäß W3-Spezifikation:

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

  Ein Schaltflächenelement, für das kein Typattribut angegeben ist, entspricht einem Schaltflächenelement , dessen Typattribut auf "Senden" festgelegt ist .

2) Verwenden Sie $event.preventDefault():

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

oder

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

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

Dieser Plunker schlägt etwas anderes vor, jeder Knopf scheint wie beabsichtigt zu funktionieren.

Um jedoch das Standardverhalten des Formulars zu verhindern, können Sie dies tun:

TS:

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

Vorlage:

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

Ich habe festgestellt, dass mit der Version 2.0 (ngSubmit)ein nullEreigniswert an die Methode übergeben wird. Stattdessen sollten Sie uns dies tun(submit)

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

Ihre .ts-Datei

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

Setzen Sie type = "button" in die Schaltfläche, die Sie nicht ausführen möchten.

Ich habe das gleiche Problem. Die Arbeit, die ich gefunden habe, war das Ersetzen buttondurch aund Anwenden des Schaltflächenstils auf das Ankerelement:

<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>

Sie müssen FormsModule aus '@ angle / forms' in Ihre app.module.ts importieren

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