title: Using angular 4 to send form-data
body: <p>Hi I'm building a WordPress theme and I need to use contact form 7 plugin on it, but I can't figure out the correct way to send the form data to the plugin.</p>
  
  <p>here is my post service:</p>
  
  <pre><code>import {
    Injectable
  } from '@angular/core';
  
  import {
    HttpClient,
    HttpHeaders
  } from '@angular/common/http';
  
  @Injectable()
  export class FormsService {
    constructor(private http: HttpClient) {}
  
    postForm(url, form) {
      return this.http.post(url, form, {
        headers: new HttpHeaders().set('Content-Type', 'multipart/form-data'),
      })
    }
  }
  </code></pre>
  
  <p>and the component part that use the service:</p>
  
  <pre><code>onSubmit() {
      const fd = new FormData();
      fd.append('your-name', this.name);
      fd.append('your-email', this.email);
      fd.append('your-message', this.message);
      fd.append('your-subject', this.sumbject);
  
      const url = `/wp-json/contact-form-7/v1/contact-forms/${this.form_id}/feedback`;
  
      this.sendMsg.postForm(url, fd).subscribe(
        data =&gt; {
          console.log(data);
        },
        err =&gt; console.log({
          error: err
        })
      )
  
      this.submitted = true;
    }
  </code></pre>
  
  <p>At this point the server response that the message was submitted ok, but when I go to the WP admin page, non of the field get the values.</p>
  
  <p>But If I use postman with this url and params the form all works as I want.</p>
  
  <p>I also found another solution that works but its not the angular way as I want to be.</p>
  
  <p>the solution</p>
  
  <pre><code> onSubmit() {
      const url = `/wp-json/contact-form-7/v1/contact-forms/${this.form_id}/feedback`;
      this.submitted = true;
    }
  
   sendData(url) {
      let XHR = new XMLHttpRequest();
      const FD = new FormData();
      FD.append('your-name', this.name);
      FD.append('your-email', this.email);
      FD.append('your-message', this.message);
      FD.append('your-subject', this.subject);
  
  
      // Define what happens on successful data submission
      XHR.addEventListener('load', function(event) {
        alert('Yeah! Data sent and response loaded.');
      });
  
      // Define what happens in case of error
      XHR.addEventListener('error', function(event) {
        alert('Oups! Something went wrong.');
      });
  
      // Set up our request
      XHR.open('POST', url);
  
      // Send our FormData object; HTTP headers are set automatically
      XHR.send(FD);
    }
  </code></pre>