angular - Angular 提交和 ngSubmit 事件之间的区别？

Question

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

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

我知道 submit 来自 html，而 ngSubmit 来自 Angular。我不明白的是为什么我需要监听一个特殊的 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

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

ngSubmit:是host binding位于 form 元素上。基本上是prevent default submit event通过返回 false 来浏览器(可以是 post)。最终，您可以防止传统的 PostBack 调用或由于表单加载而导致的页面重新加载。这样你就可以验证你的表单并通过 Component code

手动 ajax 将其提交到服务器