title: How send post with form-data in angular2
body: <p>I try to post datas with angular2 but i have a 400 bad request when i'm trying to post...
  With test in postman, everthing is ok, I have a 200 and success</p>
  
  <p><img src="https://i.stack.imgur.com/EsKw0.png" alt="I have a 200 and success..."> </p>
  
  <p>But, with angular2 </p>
  
  <p><img src="https://i.stack.imgur.com/XjJ6o.png" alt="with angular2"> </p>
  
  <p>I have a 400 bad request 
  What i'm doing wrong ? Thank you ! </p>
  
  <p>My code.
  Service to call API :</p>
  
  <pre><code>userAddReview(paramsObj) {
      let headers = new Headers();
      headers.append('Content-Type', 'application/json; charset=UTF-8');
      let params = this.util.transformRequest(paramsObj);
      console.log('sending request');
      return this.authHttp.post(this.wpApiURL + '/users-reviews/reviews?' + params, JSON.stringify({}), { headers: headers })
          .map(
              res =&gt; {
                  let newReview = res.json();
                  this.reviews.push(newReview);
                  console.log(this.reviews);
                  return newReview;
              }
          );
  }
  </code></pre>
  
  <p>Post component : </p>
  
  <pre><code>submitReview(form) {
      console.log(this.review, form);
      let params = {
          id: this.review.post,
          user_id: this.wp.getCurrentAuthorId(),
          name: this.wp.getCurrentAuthorId(),
          email: this.wp.getCurrentAuthorId(),
          title:  this.review.rating_title,
          description: this.review.rating_comment,
          rating:     this.review.rating_score,
      };
      console.log("Review", params);
      this.review.author = this.wp.getCurrentAuthorId();
      this.wp.userAddReview(params)
              .subscribe(
                  data =&gt; {
                      this.statusMessage = "Review added successfully!";
                      //clear form
                      form.reset();
                  },
                  error =&gt; {
                      console.log(error._body);
                      this.statusMessage = error._body;
                  }
      );
  </code></pre>
  
  <p>Template : </p>
  
  <pre><code>&lt;form name="reviewForm" #reviewForm="ngForm" novalidate *ngIf="showPanel()"&gt;
      &lt;div *ngIf="!reviewText.valid &amp;&amp; (reviewText.dirty || reviewText.touched)" class="alert alert-danger padding"&gt;review is required&lt;/div&gt;
  
      &lt;div class="padding"&gt;{{statusMessage}}&lt;/div&gt;
      &lt;ion-input type="text" [(ngModel)]="review.rating_score" #reviewScore="ngModel" name="reviewScore" placeholder="enter your review score..." required&gt;&lt;/ion-input&gt;
      &lt;ion-input type="text" [(ngModel)]="review.rating_title" #reviewTitle="ngModel" name="reviewTitle" placeholder="enter your review title..." required&gt;&lt;/ion-input&gt;
      &lt;ion-textarea
          [(ngModel)]="review.rating_comment"
          #reviewText="ngModel"
          name="reviewText"
          type="text"
          rows="2"
          placeholder="enter your review..."
          required
          &gt;
      &lt;/ion-textarea&gt;
  
      &lt;ion-grid&gt;
          &lt;ion-row&gt;
              &lt;ion-col *ngIf="!isEditMode"&gt;&lt;button ion-button block (click)="submitReview(reviewForm)" [disabled]="!reviewForm.valid"&gt;Add&lt;/button&gt;&lt;/ion-col&gt;
              &lt;ion-col *ngIf="isEditMode"&gt;&lt;button ion-button block (click)="updateReview(reviewForm)" [disabled]="!reviewForm.valid"&gt;Update&lt;/button&gt;&lt;/ion-col&gt;
              &lt;ion-col width-33&gt;&lt;button ion-button block (click)="onCancel()"&gt;Cancel&lt;/button&gt;&lt;/ion-col&gt;
          &lt;/ion-row&gt;
      &lt;/ion-grid&gt;
  
  &lt;/form&gt;
  
  &lt;p *ngIf="!showPanel() &amp;&amp; auth.authenticated()" (click)="isEditing = true;"&gt;Add Review&lt;/p&gt;
  &lt;p *ngIf="!auth.authenticated()" (click)="reviewFormNotAuthClicked()"&gt;Add Review (login required)&lt;/p&gt;
  </code></pre>