CODEWITHSUNDEEP
javascriptangular
jwBurnside
jwBurnside

Reputation: 867

Angular 5 HttpClient: Send POST params as URL encoded string

Angular 5.0.1

I'm looking at the docs for Angular HttpClient: https://angular.io/guide/http, but I can't seem to figure how to send POST params as a URLEncoded string instead of a JSON string. For instance, my Java http clients will send like this as default: 

username=test%40test.com&password=Password1&rolename=Admin

But Angular wants to send as Json by default: 

{"username":"[email protected]","password":"Password1","rolename":"Admin"}

Here's my code currently: 

    let body = {
      username: "[email protected]",
      password: "Password1",
      rolename: "Admin"
    };

 let headers = new HttpHeaders();
    headers = headers.set("Content-Type", "application/x-www-form-urlencoded");


    this.http.post(this.baseUrl, body, {
      headers: headers,
    })
      .subscribe(resp => {
      console.log("response %o, ", resp);
    });

I've also tried adding HttpParams: 

let  httpParams = new HttpParams();
httpParams.append("username", "[email protected]");
httpParams.append("password", "Password1");
httpParams.append("rolename", "Admin");

...
headers: headers,
      params: httpParams

But HttpParams seem to have no effect.

Any idea how to URL encode the request instead of Json?

Upvotes: 17

Views: 34327

Answers (3)

Srdjan Pazin
Srdjan Pazin

Reputation: 158

Supply the HttpParams object as the body argument for post(). That way, you will send form data as the request body instead of JSON. Also, the params option is not needed.

Here's an example:

const body = new HttpParams()
  .set('username', '[email protected]')
  .set('password', 'Password1')
  .set('rolename', 'Admin');

this.httpClient.post(url, body, {
  headers: new HttpHeaders()
    .set('Content-Type', 'application/x-www-form-urlencoded')
});

The HttpParams class is immutable. All mutation operations will return a new instance. You'll need to chain the set() calls to preserve the previously added parameters. You can use both set() and append().

Upvotes: 0

Ced
Ced

Reputation: 17337

That is because HttpParam is immutable.

You can read why here

In short:

let httpParams = new HttpParams()
    .append("username", "[email protected]")
    .append("password", "Password1")
    .append("rolename", "Admin");

Because the app may retry requests, the interceptor chain may process an individual request multiple times. If requests were mutable, a retried request would be different than the original request. Immutability ensures the interceptors see the same request for each try.

Upvotes: 1

Christian Santos
Christian Santos

Reputation: 5456

append() returns a new HttpParams object, so you'll need to make a slight modification to your httpParams code. Try this:

let httpParams = new HttpParams()
    .append("username", "[email protected]")
    .append("password", "Password1")
    .append("rolename", "Admin");

In the code above, we chain our append calls, creating a new HttpParams object on each call. The last time we call append, the HttpParams object returned will contain all of the previously appended parameters.

Upvotes: 16

Related Questions