Question

我想知道表单提交事件和按钮单击事件之间的区别是什么？

表单提交示例：

<httpProtocol>
<customHeaders>
<add name="Access-Control-Allow-Origin" value="*" />
<add name="Access-Control-Allow-Headers" value="Content-Type" />
<add name="Access-Control-Allow-Methods" value="GET, POST, PUT, DELETE, OPTIONS" />
<add name="Access-Control-Allow-Credentials" value="true" />
</customHeaders>  
</httpProtocol>

按钮单击示例：

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

有人知道有什么区别吗？

非常感谢。

Answer 1

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

submit事件在<form>元素本身上触发，而不在任何<button>上触发。只有当用户单击“提交”按钮时，才会引发Submit事件。

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

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

Answer 2

到目前为止，我知道的区别之一是，如果您在ngForm内部，并且您有(ngSubmit)事件，那么如果执行以下操作，与该事件链接的函数将被执行按 ENTER 键。这有助于快速浏览表单，而无需触摸鼠标。

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

Answer 3

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

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

角形式：Submit事件和click事件之间有什么区别？

3 个答案: