Избегайте 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()функцию? И как этого избежать?

— 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
 ],
 })

— Маруан Афрух
источник