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

106

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?

javascript forms angular submit kfa
quelle
1
falsch zurückgeben; von Ihrer submit () Funktion
Aran Dekar

Antworten:

212

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:

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')
}
Yurzui
quelle
3
(click)="preview(); false"sollte das gleiche tun. Zum Beispiel stopPropagation()müsste explizit aufgerufen werden, aber wenn ein Ereignishandler zurückkehrt false, preventDefaultwird er für das Ereignis aufgerufen.
Günter Zöchbauer
1
@ Günter Zöchbauer Vielen Dank für den Hinweis! Zuerst habe ich es versucht, aber ich habe geschrieben return falseund es hat nicht funktioniert :)
Yurzui
1
returnist in verbindlichen Ausdrücken wahrscheinlich nicht zulässig, aber der Wert des letzten Ausdrucks wird implizit zurückgegeben.
Günter Zöchbauer
2
Die Verwendung von # 2 scheint die beste Antwort zu sein. Nur das Hinzufügen von: type = "button" zu meinem Button löste das Problem
Michael Washington
1
Ich wusste nichts über die type=buttonW3C-Spezifikation. Danke dir!!
Hugo H
17

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">
Ankit Singh
quelle
Vielen Dank für die Antwort und die plnkr ... Es dreht sich alles um die Schaltfläche Typ plnkr.co/edit/BKIqcz7aKBFQDZioZ5Fy
kfa
tatsächlich ! es ist. und Sie haben auf allen Schaltflächen definiert, so dass es wie vorgesehen funktionierte
Ankit Singh
7

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();
}
imal hasaranga perera
quelle
Danke dir! Dies hat funktioniert, ich weiß nicht, warum ngSubmit funktioniert, wenn es nicht als Formulargruppe verwendet wird, aber wenn ich es als Formulargruppe verwende, muss ich Ihre Lösung verwenden
Nikhil Das Nomula
Ich habe diese Antwort vor einiger Zeit gegeben, als 2.0 gerade veröffentlicht wurde, aber nachdem Angular 2 einen langen Weg zurückgelegt hat, sind Sie sicher, dass Sie die neueste Release-Version verwenden?
Imal Hasaranga Perera
6

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

Alexis Gamarra
quelle
6

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>
Arun Ghosh
quelle
6

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

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