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

javascript angular forms submit

2022-08-30 04:59:16

好吧，也许这不清楚。获取此表单：

<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

我看到两个选项来解决它：

1）明确指定type=“button”（我认为它更可取）：

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

根据W3规范：

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

未指定 type 属性的按钮元素表示与 type 属性设置为“submit”的按钮元素相同。

2）用途：$event.preventDefault()

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

或

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

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

答案 2

这个Plunker建议，否则，每个按钮似乎都按预期工作。

但是，为了防止表单的默认行为，您可以执行此操作，

TS：

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

模板：

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