title: When sending ajax POST FormData object key and value are not as set
body: <p>I am programatically setting a FormData like so:</p>
  
  <pre><code>    const formData = new FormData();
      formData.append('id', '12345678');
  </code></pre>
  
  <p>After which I am sending a POST request with this object. (using angular HttpClient).</p>
  
  <p>I am using Postman to debug the request and see what values were sent by importing the request as cURL and I see that the formData values appear differently.</p>
  
  <pre><code>key:------WebKitFormBoundaryI1mdsdmKkradYVMS\r\nContent-Disposition: form-data; name
  
  value: "id"\r\n\r\n12345678\r\n------WebKitFormBoundaryI1mdsdmKkradYVMS--\r\n
  </code></pre>
  
  <p>What am I doing wrong?</p>
  
  <p>I want to the send the data so that the server will receive an x-form-urlencoded request with the following object:</p>
  
  <pre><code>key: id
  value: 12345678
  </code></pre>
  
  <p>EDIT: The solution is this:</p>
  
  <pre><code> const body = new URLSearchParams({id: "12345678"});
  
      const httpOptions = {
        headers: new HttpHeaders({
          'Content-Type':  'application/x-www-form-urlencoded',
        })
      };
      return this.http.post(url, body.toString(), httpOptions).pipe(mergeMap( (response:any) =&gt; {
        console.log('response ', response);
        return of (response);
      }));
  </code></pre>
  
  <p>Thanks,
  Yaron</p>