Question

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

Html为我提供了提交事件。在Angular中，我可以使用（submit）事件绑定来监听此事件。最重要的是，Angular使用（ngSubmit）添加了我可以收听的ngSubmit事件。

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

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

听（提交）和（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}`);
  }
}

Answer 1

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

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

Answer 2

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

（ngsubmit）=“ saveEmployee（ngForm）”：它将ngform值发布到用angular控制台中

Answer 3

没有一个答案可以清楚地解释为该链接中给出的解释。

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

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

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

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

3 个答案: