Angular 5 HttpClient: send POST parameters as URL encoded string

Question

Angular 5.0.1

I am looking at the docs for Angular HttpClient: https://angular.io/guide/http , but I can't imagine how to send POST parameters as a URLEncoded string instead of a JSON string. For example, my Java client clients will send this default value:

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

But Angular wants to send as Json by default:

{"username":"[e-mail]","password":"Password1","rolename":"Admin"}

Here is my code:

    let body = {
      username: "[e-mail]",
      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 also tried adding HttpParams:

let  httpParams = new HttpParams();
httpParams.append("username", "[e-mail]");
httpParams.append("password", "Password1");
httpParams.append("rolename", "Admin");

...
headers: headers,
      params: httpParams

But HttpParams don't seem to have an effect.

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

Answer 1

append()returns the object new HttpParams , so you need to make a small modification to the code HttpParams. Try the following:

let httpParams = new HttpParams()
    .append("username", "[e-mail]")
    .append("password", "Password1")
    .append("rolename", "Admin");

append, HttpParams . , append, HttpParams .

Answer 2

, HttpParam .

:

let httpParams = new HttpParams()
    .append("username", "[e-mail]")
    .append("password", "Password1")
    .append("rolename", "Admin");

, . , . , .