How to submit form to server in Angular2?

Question

Now the submission has been caught by angular2 even with action= in the <form>.

demo link: 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'
  }
}

Posting a form directly causes a page reload, that's usually not what you want in an Angular application (SPA). Grab the data from the form and send an HTTP request from your code to the server instead. — Günter Zöchbauer, Jan 17 '16 at 08:40
With `target="_blank"` the post should be should to a new page. And the action actually point to a different domain, so xhr is not a option. — Tim Green, Jan 17 '16 at 11:43

score 90 · Accepted Answer · edited Dec 20 '16 at 20:39

90

You should leverage the NgSubmit directive, as described below:

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

In this case, when you click on the submit button, the onSubmit method of the component will be called and you'll be able to manually send data to the server using the HTTP class on 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(...);
  }
}

This way you can remain in the same page page.

Edit

Following your comment, 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/%40angular/forms/src/directives/ng_form.ts#L141.

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.

Hope it helps you, Thierry

edited Dec 20 '16 at 20:39

bob

2,674
1
29
46

answered Jan 17 '16 at 09:30

Thierry Templier

198,364
44
396
360

As I mentioned in the comment above. ngSubmit is not what I want. I just want to open a new window with post data. – Tim Green Jan 17 '16 at 11:46
1

Sorry I didn't understand your problem... You shoud use the `ngNoForm` attribute for your form. I updated my answer ;-) – Thierry Templier Jan 17 '16 at 17:50
Kudos! I was running in to the same issue, where my form (wrapping a submit button to log out of my application) wasn't executing. I spent an hour looking at my markup before it clicked that it might be an Angular2 specific thing. Dropped in the ngNoForm attribute, and boom! Success! Thanks a ton! – Jamie Nordmeyer May 12 '16 at 03:56
@ThierryTemplier You should make some ng2 tutorials :) – mtyson Oct 01 '16 at 20:57
4

`ngNoForm`, what an intuitive and logical annotation to add. But this just solved a problem I banged my head trying to get around for a week. – Bronanaza May 16 '17 at 13:48
Submitting form in this way give the following error. _Access to XMLHttpRequest at 'https://www.buyerzone.com/retail/atm-machines/rfqhp/?publisherId=myId&publisherTypeId=type&keywordID=' from origin 'http://localhost:4200' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource._ – Musaddiq Khan Oct 31 '18 at 07:09

score 15 · Answer 2 · answered Jan 17 '16 at 17:37

15

Try this:

<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

answered Jan 17 '16 at 17:37

Langley

5,326
2
26
42

Hey this worked for me. Can you possibly add an explanation why? I just added the template variable and the click event – L1ghtk3ira Aug 23 '18 at 02:36
1

It's just how html forms work, when you submit them they'll send either a post or get request as defined in the method attribute to the url defined in the action attribute – Langley Aug 23 '18 at 02:56

score 6 · Answer 3 · edited Nov 27 '20 at 15:53

6

You can also submit form in this way.

Here is HTML markup.

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

And here is code in your .ts file.

onSubmit(e) {
    e.target.submit();
  }

edited Nov 27 '20 at 15:53

bhucho

3,903
3
16
34

answered Oct 31 '18 at 05:03

Musaddiq Khan

1,837
18
16

i appreciate this answer for not using ViewChild – ahong Jan 21 '21 at 11:03

score 2 · Answer 4 · answered Jul 25 '16 at 11:14

2

Hey if any one else ever has some annoying issue in Firefox when posting a form to a new url causes a page refresh and does not follow through to the page add target="_parent" and will fix the issue.

answered Jul 25 '16 at 11:14

rtn

2,012
4
21
39

How to submit form to server in Angular2?

4 Answers4

Linked