Evita che Angular2 invii sistematicamente il modulo al clic del pulsante

107

Ok, forse questo non è chiaro. Ottieni questo modulo:

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

Perché tutti i pulsanti attivano la submit()funzione? E come evitarlo?

— KFA
fonte

1

return false; dalla funzione submit ()

— Aran Dekar

213

Vedo due opzioni per risolverlo:

1) Specifica esplicitamente type = "button" (penso sia più preferibile ):

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

Secondo la specifica W3:

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

Un elemento pulsante con nessun attributo type specificato rappresenta la stessa cosa di un pulsante elemento con il suo set di attributi di tipo a "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')
}

— yurzui
fonte

3

(click)="preview(); false"dovrebbe fare lo stesso. Ad esempio, stopPropagation()dovrebbe essere chiamato esplicitamente, ma se un gestore di eventi ritorna false, preventDefaultviene chiamato sull'evento.

— Günter Zöchbauer

1

@ Günter Zöchbauer Grazie mille per averlo segnalato! Per prima cosa l'ho provato ma ho scritto return falsee non ha funzionato :)

— yurzui

1

returnprobabilmente non è consentito nelle espressioni di associazione, ma il valore dell'ultima espressione viene restituito implicitamente.

— Günter Zöchbauer

2

L'uso del n. 2 sembra la migliore risposta. Basta aggiungere: type = "button" al mio pulsante ha risolto il problema

— Michael Washington

1

Non sapevo type=buttondelle specifiche del W3C. Grazie!!

— Hugo H

17

Questo Plunker suggerisce il contrario, ogni pulsante sembra funzionare come previsto.

Tuttavia, per impedire il comportamento predefinito del modulo puoi farlo,

TS:

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

Modello:

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

— Ankit Singh
fonte

Grazie per la risposta e il plnkr ... Riguarda il tipo di pulsante plnkr.co/edit/BKIqcz7aKBFQDZioZ5Fy

— kfa

infatti ! è. e hai definito tutti i pulsanti, quindi funzionava come previsto

— Ankit Singh

7

Ho scoperto che con la versione 2.0 (ngSubmit)viene passato un nullvalore di evento al metodo, quindi dovresti usarlo(submit)

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

il tuo file .ts

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

— imal hasaranga perera
fonte

Grazie! Ha funzionato, non so perché ngSubmit funziona quando non viene utilizzato come gruppo di moduli, ma quando lo uso come gruppo di moduli devo usare la tua soluzione

— Nikhil Das Nomula

Ho dato questa risposta qualche tempo fa quando 2.0 è appena stato rilasciato, ma dopo che angular 2 ha fatto molta strada, quindi sei sicuro di utilizzare l'ultima versione di rilascio?

— imal hasaranga perera

6

Imposta type = "button" nel pulsante che non vuoi eseguire submit.

— Alexis Gamarra
fonte

6

Ho lo stesso problema. Il lavoro attorno ho trovato è stata la sostituzione buttoncon ae applicare lo stile pulsante per elemento di ancoraggio:

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

6

Devi importare FormsModule da "@ angular / forms" nel tuo app.module.ts

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

— Marouane Afroukh
fonte