web-dev-qa-db-ja.com

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()関数をトリガーするのですか？そしてそれを避ける方法は？

javascriptformsangularsubmit
79
kfa

私はそれを解決するための2つのオプションを見ています：

1）type = "button"を明示的に指定します（より望ましいと思います）：

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

W3仕様によると：

2）$event.preventDefault()を使用します。

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

または

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

preview(e){
  e.preventDefault();
  console.log('preview')
}
153
yurzui

このPlunker は、そうでなければ、すべてのボタンが意図したとおりに機能するように見えることを示唆しています。

ただし、フォームのデフォルトの動作を防ぐには、これを行うことができます。

TS：

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

テンプレート：

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

2.0リリースでは(ngSubmit)がnullイベント値をメソッドに渡しているので、代わりに(submit)

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

あなたの.tsファイル

submit($event){
   /* form code */
   $event.preventDefault();
}
7
imal hasaranga perera

送信を実行しないボタンにtype = "button"を設定します。

5
Alexis Gamarra

同じ問題があります。私が見つけた回避策は、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>
4
Arun Ghosh

App.module.tsの「@ angular/forms」からFormsModuleをインポートする必要があります

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