角度提交和ngSubmit事件之间的区别? [英] Difference between angular submit and ngSubmit events?

问题描述

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

I'm building a form in an Angular 2 application.

HTML给我提交事件.在Angular中，我可以使用(提交)事件绑定来监听此事件.最重要的是，Angular添加了ngSubmit事件，我可以使用(ngSubmit)进行监听.

Html gives me the submit event. In Angular I could listen to this event using a (submit) event binding. On top of that, Angular adds the ngSubmit event, which I could listen to, using (ngSubmit).

我了解到Submit来自html，而ngSubmit来自Angular.我不明白的是为什么我需要监听一个特殊的ngSubmit事件，而不是正常的Submit事件.

I understand that submit comes from html, and ngSubmit from Angular. What I don't understand is why I would need to listen to a special ngSubmit event, instead of the normal submit event.

我创建了一个 plunker ，它监听两个事件，并且两者似乎都做同样的事情东西.

I created a plunker that listens to both events and both seem to do the same thing.

收听(submit)和(ngSubmit)有什么区别?

What is the difference between listening to (submit) and (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}`);
  }
}

推荐答案

ngSubmit确保处理程序代码提交时不提交表单 引发并导致实际的http发布请求.

ngSubmit ensures that the form doesn’t submit when the handler code throws and causes an actual http post request.

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

这篇关于角度提交和ngSubmit事件之间的区别?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！