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ąć?

— kfa
źródło

1

return false; z funkcji submit ()

— Aran Dekar,

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:

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

Element przycisk ze bez atrybutu typu określonego reprezentuje samo jak przycisk elementu z ustawionym atrybutem jego typ na „wyślij” .

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