Can't submit HTML form inside Angular 2 application

问题

I'm trying to include static HTML form inside my Angular 2 (beta2) app but it doesn't do anything when I hit the submit button.

Here's the HTML I use:

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

How can I enable my form to work with Angular2?

回答1:

With

<form ngNoForm ...>

you can prevent Angular from handling the form.

回答2:

If you want to use the action attribute of HTML form, you need to disable the behavior of the NgForm directive that catches the submit event and prevents it from being propagated. See this line: https://github.com/angular/angular/blob/master/modules/angular2/src/common/forms/directives/ng_form.ts#L81.

To do that simply add the ngNoForm attribute to your form:

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

In this case, a new window will be opened for your form submission.

That said, Angular2 tackles SPAs (Single Page Applications) and in most use cases, you need to stay in the same page when submitting a form. For such use cases, you can leverage the submit event with a submit button:

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

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

Hope it helps you, Thierry

回答3:

Angular 2 adds an event handler to forms submit event and blocks the forms form being sent. This is done for the sake of normal AJAX use case where you don't actually want to submit the form (and thus reload the page), but instead catch it on JavaScript and send an AJAX request (or handle the data other ways).

You can bypass this by using your custom event handler which will be called first and in which you send the form already before it goes to the Angular's handler.

To do this, you need to add onsubmit="this.submit()" on your form element like this:

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

来源：https://stackoverflow.com/questions/35129718/cant-submit-html-form-inside-angular-2-application

标签

javascript

html

forms

angular