Angular 2アプリケーション内でHTMLフォームを送信できません

Question

私はAngular 2（beta2）アプリケーション内に静的HTMLフォームを含めるようにしていますが、送信ボタンを押しても何もしません。

<form action="upload_path" method="POST"> 
    <input type="text" name="text" /> 
    <button type="submit">Send</button> 
</form> 

どのように私はAngular2で動作するように私のフォームを有効にすることができます。

ここで私が使用してHTMLのですか？

Answer 1

<form ngNoForm ...> 

を使用すると、フォームを処理からの角度防ぐことができます。

Answer 2

角2は、フォームにイベントハンドラを追加し、イベントを送信し、送信されるフォームフォームをブロックします。これは、実際にフォームを提出しないでページをリロードする代わりに、JavaScriptでキャッチしてAJAXリクエストを送信する（または他の方法でデータを処理する）通常のAJAXユースケースのために行われます。

これを回避するには、最初に呼び出されるカスタムイベントハンドラを使用し、フォームがAngularのハンドラに行く前に送信します。

はこれを行うには、このようなあなたのフォーム要素に onsubmit="this.submit()"を追加する必要があります。

<form action="upload_path" method="POST" onsubmit="this.submit()"> 

Answer 3

HTMLフォームのaction属性を使用する場合は、submitイベントをキャッチし、伝播されないようにするNgForm指示の動作を無効にする必要があります。次の行を参照してください：https://github.com/angular/angular/blob/master/modules/angular2/src/common/forms/directives/ng_form.ts#L81。単にあなたのフォームにngNoForm属性を追加することを行うには

：この場合

<form ngNoForm action="https://www.google.com" target="_blank" method="POST"> 
    <input name="q" value="test"> 
    <button type="submit">Search</button> 
</form> 

を、新しいウィンドウがあなたのフォームの送信のために開かれます。

Angular2はSPA（シングルページアプリケーション）に取り組んでいますが、ほとんどの場合、フォームを送信するときに同じページにとどまる必要があります。このような使用例については、あなたが送信ボタンをsubmitイベントを活用することができます

<form [ngFormModel]="companyForm" (submit)="onSubmit()"> 
    Name: <input [ngFormControl]="companyForm.controls.name" 
      [(ngModel)]="company.name"/> 

    <button type="submit">Submit</button> 
</form> 

が、それはあなたのお役に立てば幸い、 ティエリー