Vermeiden Sie, dass Angular2 das Formular systematisch auf Knopfdruck absendet

Lesezeit: 3 Minuten

Benutzer-Avatar
kfa

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 aus submit() Funktion ? Und wie kann man das vermeiden?

  • falsch zurückgeben; aus Ihrer Submit()-Funktion

    – Aran Dekar

    10. Februar 2017 um 6:14 Uhr

Benutzer-Avatar
yurzui

Ich sehe zwei Lösungsmöglichkeiten:

1) Spezifizieren Typ = “Schaltfläche” ausdrücklich (ich denke, es ist eher vorzuziehen):

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

Gemäß W3-Spezifikation:

2) Verwenden $event.preventDefault():

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

oder

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

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

  • (click)="preview(); false" sollte das gleiche tun. Zum Beispiel stopPropagation() müsste explizit aufgerufen werden, aber wenn ein Event-Handler zurückkehrt falsedann preventDefault wird zur Veranstaltung aufgerufen.

    – Günter Zöchbauer

    18. Oktober 2016 um 8:49 Uhr

  • @Günter Zöchbauer Vielen Dank für den Hinweis! Zuerst habe ich es versucht, aber ich habe geschrieben return false und es hat nicht funktioniert 🙂

    – Yurzui

    18. Oktober 2016 um 8:56 Uhr

  • return ist in Bindungsausdrücken wahrscheinlich nicht erlaubt, aber der Wert des letzten Ausdrucks wird implizit zurückgegeben.

    – Günter Zöchbauer

    18. Oktober 2016 um 9:03 Uhr


  • Die Verwendung von # 2 scheint die beste Antwort zu sein. Nur das Hinzufügen von: type=”button” zu meiner Schaltfläche löste das Problem

    – Michael Washington

    25. November 2016 um 23:17 Uhr


  • Ich wusste nichts davon type=button Die Spezifikation des W3C. Vielen Dank!!

    – Hugo H

    14. Februar 2018 um 17:42 Uhr

Benutzer-Avatar
Ankit Singh

Dieser Plunker schlägt etwas anderes vor, jede Taste scheint wie beabsichtigt zu funktionieren.

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


TS:

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

Schablone:

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

  • Vielen Dank für die Antwort und das plnkr … Es dreht sich alles um den Schaltflächentyp plnkr.co/edit/BKIqcz7aKBFQDZioZ5Fy

    – kfa

    5. August 2016 um 17:12 Uhr

  • in der Tat ! es ist. und Sie haben auf allen Schaltflächen definiert, also funktionierte es wie vorgesehen

    – Ankit Singh

    6. August 2016 um 4:20 Uhr

Sie müssen FormsModule aus ‚@angular/forms‘ in Ihre app.module.ts importieren

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

  • Das ist die richtige Antwort, alle anderen sind hacky, nicht eckig wie unnötige Problemumgehungen.

    – Sebi2020

    24. Dezember 2021 um 11:01 Uhr

Ich habe das mit Version 2.0 gefunden (ngSubmit) geht vorbei a null event value zur Methode, also sollten Sie uns stattdessen verwenden (submit)

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

Ihre .ts-Datei

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

Satz Typ = “Schaltfläche” in die Schaltfläche, die Sie nicht senden möchten.

  • Das ist semental keine gute Idee.

    – Sebi2020

    24. Dezember 2021 um 11:02 Uhr

Ich habe das gleiche Problem. Die Arbeit, die ich gefunden habe, war das Ersetzen button mit a und wenden Sie den Schaltflächenstil auf das Ankerelement an:

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

  • Das ist semental keine gute Idee.

    – Sebi2020

    24. Dezember 2021 um 11:02 Uhr

Benutzer-Avatar
Amanjot Singh

Angular bietet dafür eine integrierte Lösung. Sie müssen nur die ersetzen (submit)="handleSubmit()" mit (ngSubmit)="handleSubmit()". Indem Sie dies tun e.preventDefault() wird implizit von angle selbst unter der Haube aufgerufen.

1241820cookie-checkVermeiden Sie, dass Angular2 das Formular systematisch auf Knopfdruck absendet

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy