避免 Angular2 在按钮点击时系统地提交表单 | 在按钮点击时系统地提交表单

本文介绍了避免 Angular2 在按钮点击时系统地提交表单的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

好吧，也许这还不清楚.获取此表单:

<input type="text" name="name" [(ngModel)]="crisis.name"><button type="submit">提交</button><button type="button" (click)="preview()">Preview</button><button type="reset" (click)="reset()">Reset</button></表单>

为什么所有按钮都会触发 submit() 函数?以及如何避免这种情况?

解决方案

我看到了两个解决方案:

1) 明确指定 type="button"(我认为它更可取):

根据 W3 规范:

http://w3c.github.io/html-reference/button.html
一个按钮元素with无类型属性 指定代表与按钮相同的东西元素的类型属性设置为提交".

2) 使用 $event.preventDefault():

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

或

<button (click)="preview($event);">Preview</button>预览(e){e.preventDefault();console.log('预览')}

Ok so maybe this is unclear. Get this form:

<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>

Why do all buttons trigger the submit() function ? And how to avoid that ?

解决方案

I see two options to solve it:

1) Specify type="button" explicitly (i think it's more preferable):

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

According to W3 specification:

http://w3c.github.io/html-reference/button.html

2) Use $event.preventDefault():

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

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

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

这篇关于避免 Angular2 在按钮点击时系统地提交表单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！