避免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;来自您的
commit

Answers:


213

我看到两个解决方案:

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,但是没有用:)
yurzui

1
return在绑定表达式中可能不允许使用,但隐式返回最后一个表达式的值。
君特Zöchbauer

2
使用#2似乎是最好的答案。只需在我的按钮上添加:type =“ button”即可解决问题
Michael Washington

1
我不知道type=buttonW3C的规格。谢谢!!
雨果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刚发布时就给出了这个答案,但是在角度2出现了很长一段时间之后,您确定您使用的是最新版本吗?
imal hasaranga perera


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>

By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.