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

Навигация
18

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

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

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

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

    
задан Roope Hakulinen 01.02.2016 в 12:45
источник

3 ответа

31

С 

<form ngNoForm ...>

вы можете запретить обработке Угловой формы.     

ответ дан Günter Zöchbauer 01.02.2016 в 12:47
  • Отлично, не нашел это из руководства по форме вообще! –  Roope Hakulinen 01.02.2016 в 12:51
  • Спасибо, это должно быть добавлено в документы –  Thanh Nguyen Van 26.04.2018 в 09:41
  • Вы можете получить его из селектора в angular.io/api/forms/NgForm, но я согласен с тем, что его следует упомянуть явно. –  Günter Zöchbauer 26.04.2018 в 09:51
10

Если вы хотите использовать атрибут action формы HTML, вам необходимо отключить поведение директивы NgForm , которая ловит событие submit и не позволяет его распространять. См. Эту строку: Ссылка .

Для этого просто добавьте атрибут 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

    
ответ дан Thierry Templier 01.02.2016 в 12:50
6

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

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

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

<form action="upload_path" method="POST" onsubmit="this.submit()">
    
ответ дан Roope Hakulinen 01.02.2016 в 12:45
  • Трудно было найти, но этот ответ самый изящный, который я мог найти. Он отправит форму в том же окне (вместо того, чтобы открывать другой, как и все другие найденные мной решения), а также не требует отключения ngForm (хотя я не тестировал, какую функциональную потерю вы получите, переопределив обработчик событий сюда). Таким образом, конечно, идти против точки SPA, проводя от него, но если вы можете жить с этим, это будет сделано. –  ByteFlinger 16.11.2016 в 23:50

Неустранимая ошибка: «break» не в контексте «loop» или «switch» в

VS Код с es6