Избегайте Angular2 для систематической отправки формы при нажатии кнопки

107

Хорошо, может быть, это неясно. Получите эту форму:

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

Почему все кнопки запускают submit()функцию? И как этого избежать?

javascript forms angular submit kfa
источник
1
вернуть ложь; из вашей функции submit ()
Аран Декар

Ответы:

213

Я вижу два варианта решения:

1) Укажите type = "button" явно (я думаю, что это предпочтительнее ):

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

Согласно спецификации W3:

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

    Кнопка элемент с без атрибута типа , указанного представляет то же самое , что и кнопку элемента с его набором атрибутов типа на «отправить» .

2) Используйте $event.preventDefault():

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

или 

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

preview(e){
  e.preventDefault();
  console.log('preview')
}
Юрзуй
источник
3
(click)="preview(); false"должен делать то же самое. Например, stopPropagation()может потребоваться явный вызов, но если обработчик события возвращается false, он preventDefaultвызывается для события.
Günter Zöchbauer
1
@ Günter Zöchbauer Спасибо, что указали на это! Сначала я попробовал, но написал, return falseи это не сработало :)
yurzui
1
returnвероятно, не допускается в выражениях привязки, но значение последнего выражения возвращается неявно.
Günter Zöchbauer
2
Использование №2 кажется лучшим ответом. Простое добавление: type = "button" к моей кнопке решило проблему
Майкл Вашингтон
1
Я не знал о type=buttonспецификации W3C. Спасибо!!
Hugo H
17

Этот Plunker говорит об обратном, каждая кнопка работает, как задумано.

Однако, чтобы предотвратить поведение формы по умолчанию, вы можете сделать это,

TS:

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

Шаблон:

<form (submit)="submit($event)" #crisisForm="ngForm">
Анкит Сингх
источник
Спасибо за ответ и plnkr ... Все дело в кнопке типа plnkr.co/edit/BKIqcz7aKBFQDZioZ5Fy
kfa 05
на самом деле ! это. и вы определили на все кнопки, так что она работает как задумано
ANKIT Singh
7

Я обнаружил, что в версии 2.0 методу (ngSubmit)передается nullзначение события, поэтому вместо этого вы должны(submit) 

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

ваш файл .ts 

submit($event){
   /* form code */
   $event.preventDefault();
}
имал хасаранга перера
источник
Спасибо! Это сработало, не знаю, почему ngSubmit работает, когда не используется в качестве группы форм, но когда я использую его как группу форм, я должен использовать ваше решение
Nikhil Das Nomula
Я дал этот ответ некоторое время назад, когда только что вышел 2.0, но после этого angular 2 прошел долгий путь, так что вы уверены, что используете последнюю версию выпуска?
imal hasaranga perera
6

Установите type = "button" в кнопке, для которой вы не хотите выполнять отправку.

Алексис Гамарра
источник
6

У меня такая же проблема. Обходной я нашел необходимость замены buttonс aи применить стиль кнопки для анкерного элемента:

<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>
Арун Гош
источник
6

Вам необходимо импортировать FormsModule из '@ angular / forms' в свой app.module.ts

import { FormsModule } from '@angular/forms';
 @NgModule({
  imports: [
    FormsModule
 ],
 })
Маруан Афрух
источник