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

Ответ 1

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

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')
}

Ответ 2

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

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

TS:

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

Шаблон:

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

Ответ 3

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

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

ваш .ts файл

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

Ответ 4

У меня такая же проблема. Работа, которую я нашел, это заменить 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>

Ответ 5

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

Ответ 6

Вам нужно импортировать FormsModule из '@ angular/forms' в ваш app.module.ts

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

Ответ 7

Использование ReactiveForms - лучший способ избежать этих проблем и иметь больший контроль над элементами управления и событиями всей формы.