Уникайте Angular2 систематично надсилати форму при натисканні кнопки

Гаразд, можливо, це незрозуміло. Отримайте цю форму:

<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()функцію? І як цього уникнути?

Я бачу два варіанти її вирішення:

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

Цей Plunker пропонує інакше, кожна кнопка, здається, працює за призначенням.

Однак, щоб запобігти поведінці форми за замовчуванням, ви можете це зробити,

TS:

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

Шаблон:

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

Я виявив, що з випуском 2.0 (ngSubmit)передається nullметоду значення події, тож замість цього ви повинні нам(submit)

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

ваш .ts файл

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

Встановіть тип = "кнопка" у кнопці, яку ви не хочете виконати.

У мене те саме питання. Обхідний я знайшов необхідність заміни 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>

Вам потрібно імпортувати FormsModule з "@ angular / form" у своєму app.module.ts

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