角度提交和 ngSubmit 事件之间的区别？答案

【问题标题】：Difference between angular submit and ngSubmit events?角度提交和 ngSubmit 事件之间的区别？
【发布时间】：2017-05-17 19:30:02
【问题描述】：

我正在 Angular 2 应用程序中构建一个表单。

Html 给了我提交事件。在 Angular 中，我可以使用（提交）事件绑定来监听这个事件。最重要的是，Angular 添加了 ngSubmit 事件，我可以使用 (ngSubmit) 来监听它。

我知道 submit 来自 html，而 ngSubmit 来自 Angular。我不明白为什么我需要听一个特殊的 ngSubmit 事件，而不是普通的提交事件。

我创建了一个plunker 来监听这两个事件，并且似乎都做同样的事情。

听(submit)和(ngSubmit)有什么区别？

@Component({
  selector: 'my-app',
  template: `
    <form (submit)='onSubmit(form)' (ngSubmit)='onNgSubmit(form)' novalidate #form='ngForm'>
      <input type='text' name='input' [(ngModel)]='input' required>
      <input type='submit' value='Submit' required>
    </form>
  `,
})
export class App {

  input : string;

  onSubmit(form): void {
    console.log(`submit: ${this.input}, valid: ${form.valid}`);
  }

  onNgSubmit(form): void {
    console.log(`ng-submit: ${this.input}, valid: ${form.valid}`);
  }
}

【问题讨论】：

当你打算使用 Angular 自带的验证器时，我认为 ngSubmit 是必需的
这听起来合乎逻辑。但是在上面的例子中，在 onSubmit 和 onNgSubmit 方法中，$form.valid 已经正确更新了。那么有什么区别呢？

标签： angular

【解决方案1】：

没有一个答案像此链接中给出的解释那样清楚地解释。

提交 - 触发对浏览器 URL/服务器的 post 调用。

Ngsubmit- 调用本地角度组件来做一些有用的事情，比如在回发到浏览器 url/服务器之前进行表单验证。可用于劫持表单提交或控制提交过程。

https://codecraft.tv/courses/angular/forms/submitting-and-resetting/

【讨论】：

该链接描述了带有提交按钮的普通 HTML 表单之间的区别，而不是 Angular 事件绑定 (submit) 和 (ngSubmit) 之间的区别，这是 OP 所要求的。

【解决方案2】：

提交：如果函数未在其点击事件中定义，则它永远不会发布数据。

(ngsubmit)="saveEmployee(ngForm)": 它将 ngform 值以角度形式发布到控制台

【讨论】：

【解决方案3】：

submit：是html默认的表单提交事件，表单提交时会调用底层方法。

ngSubmit: 是host binding 位于form 元素上。基本上它是浏览器的prevent default submit event（可以是post），返回false。最终，您可以防止由于表单加载而导致的传统 PostBack 调用或页面重新加载。这样您就可以验证您的表单并通过手动 ajax 从 Component 代码将其提交到服务器

【讨论】：

【解决方案4】：

ngSubmit 确保表单在处理程序代码时不提交抛出并导致一个实际的 http post 请求。

来自https://blog.thoughtram.io/angular/2016/03/21/template-driven-forms-in-angular-2.html

【讨论】：

有人能解释一下'when the handler code throws'是什么意思吗？
当您提交表单时运行的代码抛出错误时会发生这种情况。
"...引起一个实际的 http post 请求。"但是到哪个 URL？
标签上没有“action”属性。 Angular 应用程序中的所有 http 请求不都是显式 Ajax 调用（使用 HttpClient 等）而不是浏览器发起的请求的结果吗？
@Leogout - 你能给我一个真实的例子吗？