Как отправить форму на сервер в Angular2

Теперь представление было поймано angular2 даже с действием = в форме < form.

демонстрационная ссылка: http://plnkr.co/edit/4wpTwN0iCPeublhNumT5?p=preview

//our root app component
import {Component} from 'angular2/core'

@Component({
  selector: 'my-app',
  providers: [],
  template: `
    <div>
      <h2>Hello {{name}}</h2>
      <form action="https://www.google.com" target="_blank" method="POST">
        <input name="q" value="test">
        <button type="submit">Search</button>
      </form>
    </div>
  `,
  directives: []
})
export class App {
  constructor() {
    this.name = 'Angular2'
  }
}

Ответы

Ответ 1

Вы должны использовать директиву NgSubmit, как описано ниже:

<form (ngSubmit)="onSubmit()" #heroForm="ngForm">
  (...)
  <input type="text" [(ngModel)]="data.name"/>
  (...)
  <button type="submit">Send</button>
</form>

В этом случае, когда вы нажимаете кнопку отправки, вызывается метод onSubmit компонента, и вы сможете вручную отправлять данные на сервер с помощью класса HTTP в Angular2:

@Component({
})
export class MyComponent {
  constructor(private http:Http) {
    this.data = {
      name: 'some name'
      (...)
    };
  }

  onSubmit() {
    this.http.post('http://someurl', JSON.stringify(this.data))
        .subscribe(...);
  }
}

Таким образом, вы можете оставаться на одной странице страницы.

Edit

Следуя вашему комментарию, вам необходимо отключить поведение директивы NgForm, которая ловит событие submit и предотвращает его распространение. См. Эту строку: https://github.com/angular/angular/blob/master/modules/%40angular/forms/src/directives/ng_form.ts#L141.

Для этого просто добавьте атрибут ngNoForm к вашей форме:

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

В этом случае откроется новое окно для отправки вашей формы.

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

Ответ 2

Попробуйте следующее:

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

http://plnkr.co/edit/Qjh8ooPpkfVgEe0dIv4q?p=preview

Ответ 3

Эй, если у кого-нибудь еще есть какая-то раздражающая проблема в Firefox, когда публикация формы на новый URL-адрес вызывает обновление страницы и не переходит на страницу, добавьте target="_parent" и исправит проблему.