如何在Angular 7中的表单中创建一个不会冒出提交事件的按钮？

Question

我有一个Angular 7表单中的按钮，该按钮仅应切换高级表单选项。为此，它起作用了，但是它也被我的表单对象捕获了，并且NgForm正在运行该功能，该功能仅应在按下提交按钮时运行。

我正在使用模板驱动的方法。我将在此处显示我的表单元素和不应提交的按钮。

<form (ngSubmit)="onSubmit(form)" #form="ngForm">

休息

<button 
  class="btn btn-success"
  (click)="onDisplayOptions()">
  Toggle more options
</button>

有什么办法可以向Angular指定这不是一个提交按钮？

Answer 1

您需要将按钮类型设置为“按钮”，因为按钮的默认类型属性是“提交”。

<button 
  type="button"
  class="btn btn-success"
  (click)="onDisplayOptions()">
  Toggle more options
</button>