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()機能をトリガーするのはなぜですか?そしてそれを避ける方法は?


1
falseを返します。submit()関数から
Aran Dekar '10

回答:


213

それを解決するための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')
}

3
(click)="preview(); false"同じことをする必要があります。たとえばstopPropagation()、明示的に呼び出す必要がありますがfalse、イベントハンドラーがを返した場合は、イベントpreventDefaultで呼び出されます。
ギュンターZöchbauer

1
@GünterZöchbauerこれを指摘してくれてありがとう!最初に試してみましたが、書いたのですがreturn false
うまくいき

1
returnおそらくバインディング式では許可されていませんが、最後の式の値は暗黙的に返されます。
ギュンターZöchbauer

2
#2を使用するのが最良の答えのようです。ボタンにtype = "button"を追加するだけで問題が解決しました
Michael Washington

1
type=buttonW3Cの仕様については知りませんでした。ありがとうございました!!
Hugo H

17

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

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


TS:

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

テンプレート:

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

回答とplnkrをありがとう...それはすべてボタンタイプplnkr.co/edit/BKIqcz7aKBFQDZioZ5Fy
kfa

確かに !そうです。すべてのボタンを定義したので、意図したとおりに機能していました
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 2017年


6

同じ問題があります。私が見つけた回避策は、アンカー要素に置換buttonaてボタンスタイルを適用することでした:

<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

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

import { FormsModule } from '@angular/forms';
 @NgModule({
  imports: [
    FormsModule
 ],
 })
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.