Angular 表单：提交事件和点击事件有什么区别？答案

【问题标题】：Angular form: what is the different between submit event and click event?Angular 表单：提交事件和点击事件有什么区别？
【发布时间】：2019-03-08 15:28:27
【问题描述】：

我想知道表单提交事件和按钮单击事件执行 http post 操作有什么不同。

表单提交示例：

<form #f="ngForm" (ngSubmit)="onSubmit(f)">
  <input name="first" ngModel required #first="ngModel">
  <input name="last" ngModel>
  <button>Submit</button>
</form>

按钮点击示例：

<form #f="ngForm">
  <input name="first" ngModel required #first="ngModel">
  <input name="last" ngModel>
</form>

<div>
  <button (click)="onSubmit(f)">Submit</button>
</div>

在后台处理是一样的。

  @ViewChild(NgForm) f: NgForm;

  onSubmit() {
    console.log(this.f);  
  }

有人知道有什么区别吗？

非常感谢。

【问题讨论】：

标签： angular

【解决方案1】：

不同之处在于它们是注册到 DOM 中不同元素的两个不同事件。

submit 事件在<form> 元素本身上触发，而不是在任何<button> 上触发 .提交事件仅在用户单击提交按钮时触发

默认情况下，您的提交按钮类型为type="submit"

另一方面，click 事件会在用户点击某个元素（在本例中为您的按钮）时触发。

【讨论】：

【解决方案2】：

到目前为止，我知道的其中一个区别是，如果您在 ngForm 中并且如果您有 (ngSubmit) 事件，则如果您按 ，将执行链接到该事件的函数ENTER 键。这有助于快速浏览表单，而无需触摸鼠标。

此地址有更多关于该主题的信息 https://angular.io/guide/reactive-forms

【讨论】：

是的，和@Narm 回答的一样
是的，不过我在他之前回复了...很高兴能提供帮助

【解决方案3】：

两者之间没有明显的区别。但是@HMarteau 的回答并不准确，因为无论是使用ngSubmit 还是click 事件，您都可以使用“Enter”按钮提交Angular 表单。

主要区别在于Angular的ngSubmit允许你使用一些强大的内置属性，如required、max-length等，用于验证，在以下情况下你可能无法使用click.

【讨论】：

嗯，你是对的，但我可以使用 FormGroup 来验证如果使用点击事件。无论如何，也谢谢你。