Unikaj Angular2 do systematycznego wysyłania formularza po kliknięciu przycisku

107

Ok, więc może to jest niejasne. Pobierz ten formularz:

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

Dlaczego wszystkie przyciski wyzwalają tę submit()funkcję? Jak tego uniknąć?

javascript forms angular submit kfa
źródło
1
return false; z funkcji submit ()
Aran Dekar,

Odpowiedzi:

213

Widzę dwie możliwości rozwiązania tego problemu:

1) Podaj jawnie type = "button" (myślę, że jest to bardziej preferowane ):

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

Zgodnie ze specyfikacją W3:

2) zastosowanie $event.preventDefault():

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

lub 

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

preview(e){
  e.preventDefault();
  console.log('preview')
}
yurzui
źródło
3
(click)="preview(); false"powinien zrobić to samo. Na przykład stopPropagation()musiałaby zostać wywołana jawnie, ale jeśli procedura obsługi zdarzeń zwróci false, preventDefaultzostanie wywołana w zdarzeniu.
Günter Zöchbauer
1
@ Günter Zöchbauer Bardzo dziękuję za zwrócenie uwagi! Najpierw spróbowałem, ale napisałem return falsei nie zadziałało :)
yurzui
1
returnprawdopodobnie nie jest dozwolone w wyrażeniach wiążących, ale wartość ostatniego wyrażenia jest zwracana niejawnie.
Günter Zöchbauer
2
Korzystanie z # 2 wydaje się najlepszą odpowiedzią. Samo dodanie: type = "button" do mojego przycisku rozwiązało problem
Michael Washington
1
Nie wiedziałem o type=buttonspecyfikacji W3C. Dziękuję Ci!!
Hugo H
17

Ten Plunker sugeruje inaczej, każdy przycisk wydaje się działać zgodnie z przeznaczeniem.

Aby jednak zapobiec domyślnemu zachowaniu formularza, możesz to zrobić,

TS:

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

Szablon:

<form (submit)="submit($event)" #crisisForm="ngForm">
Ankit Singh
źródło
Dzięki za odpowiedź i plnkr ... Chodzi o przycisk typu plnkr.co/edit/BKIqcz7aKBFQDZioZ5Fy
kfa
w rzeczy samej ! to jest. i zdefiniowałeś na wszystkich przyciskach, więc działało zgodnie z przeznaczeniem
Ankit Singh
7

Okazało się, że w wersji 2.0 (ngSubmit)przekazuje nullwartość zdarzenia do metody, więc zamiast tego powinieneś nas(submit) 

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

Twój plik .ts 

submit($event){
   /* form code */
   $event.preventDefault();
}
imal hasaranga perera
źródło
Dziękuję Ci! To zadziałało, nie wiem, dlaczego ngSubmit działa, gdy nie jest używany jako grupa formularzy, ale kiedy używam go jako grupy formularzy, muszę użyć twojego rozwiązania
Nikhil Das Nomula
Udzieliłem tej odpowiedzi jakiś czas temu, gdy właśnie wydano 2.0, ale po tym Angular 2 przeszedł długą drogę, więc czy na pewno używasz najnowszej wersji?
imal hasaranga perera
6

Ustaw type = "button" w przycisku, którego nie chcesz przesyłać.

Alexis Gamarra
źródło
6

Mam ten sam problem. Prace wokół znalazłem próżniowej buttonz ai zastosować styl do elementu przycisku kotwicy:

<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
źródło
6

Musisz zaimportować FormsModule z „@ angular / forms” w swoim app.module.ts

import { FormsModule } from '@angular/forms';
 @NgModule({
  imports: [
    FormsModule
 ],
 })
Marouane Afroukh
źródło