Невозможно отправить HTML-форму внутри приложения Angular 2

Я пытаюсь включить статическую HTML-форму внутри моего приложения Angular 2 (beta2), но ничего не делает, когда я нажимаю кнопку отправки.

Вот HTML, который я использую:

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

Как я могу включить мою форму для работы с Angular2?

Ответы

Ответ 1

С

<form ngNoForm ...>

вы можете предотвратить Angular от обработки формы.

Ответ 2

Если вы хотите использовать атрибут action формы HTML, вам нужно отключить поведение директивы NgForm, которая ловит событие submit и не позволяет его распространять. См. Эту строку: 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 (Single Pages Applications), и в большинстве случаев использования вам нужно оставаться на одной странице при отправке формы. Для таких случаев использования вы можете использовать событие submit с помощью кнопки отправки:

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

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

Надеюсь, это поможет вам, Thierry

Ответ 3

Angular 2 добавляет обработчик событий для формы отправки события и блокирует отправку формы. Это делается для обычного использования AJAX, когда вы фактически не хотите отправлять форму (и, следовательно, перезагружать страницу), но вместо этого перехватите ее на JavaScript и отправьте запрос AJAX (или обработайте данные другими способами).

Вы можете обойти это, используя свой пользовательский обработчик событий, который будет вызываться первым и в котором вы отправите форму уже перед тем, как перейти к обработчику Angular.

Для этого вам нужно добавить onsubmit="this.submit()" в свой элемент формы следующим образом:

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