web-dev-qa-db-ja.com

angular submitイベントとngSubmitイベントの違いは？

Angular 2アプリケーションでフォームを構築しています。

Htmlは送信イベントを提供します。 In Angular（submit）イベントバインディングを使用してこのイベントをリッスンできました。その上に、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
23
Michel Vollebregt

ngSubmitは、ハンドラーコードが実際のhttp投稿リクエストをスローして引き起こしたときにフォームが送信されないようにします。

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

15
Adrien SAULNIER

submit：これはhtmlのデフォルトフォーム送信イベントであり、フォームが送信されると、基になるメソッドを呼び出します。

ngSubmit：Is Host bindingform要素に配置されます。基本的には デフォルトのsubmitイベントを防ぐ false（ブラウザはpostの形式にできます）をfalseで返します。最終的に、従来のPostBack呼び出しまたはフォームの読み込みによるページの再読み込みを防ぐことができます。この方法で、フォームを検証し、Componentコードから手動のajaxでサーバーに送信できます。

23
Pankaj Parkar

submit：関数がクリックイベントで定義されていない場合、データを送信しません。

（ngsubmit）= "saveEmployee（ngForm）"：ngform値をコンソールに角度でポストします

0
Sandhya Kuamri