title: Post angular 2 form data to symfony api
body: <p>I have angular 2 form and I want to save it in the data base using symfony API web service, I'm trying to fetch data from angular form and sent it as json object to the url endpoint via post http request.</p>
  
  <p>this is the component.html</p>
  
  <pre><code>&lt;div class="ui raised segment"&gt;
    &lt;h2 class="ui header"&gt;Demo Form: Sku&lt;/h2&gt;
    &lt;form #f="ngForm"
          (ngSubmit)="onSubmit(f.value)"
          class="ui form"&gt;
  
      &lt;div class="field"&gt;
        &lt;label for="skuInput"&gt;SKU&lt;/label&gt;
        &lt;input type="text"
               id="skuInput"
               placeholder="SKU"
               name="sku" ngModel&gt;
      &lt;/div&gt;
      &lt;div class="field"&gt;
        &lt;label for="select1" class="col-md-4 col-lg-4 col-sm-2 align form-control-label"&gt;Langues:français/anglais: &lt;/label&gt;
        &lt;select class="form-control" name="note1" id="select1" ngModel&gt;
          &lt;option&gt;1&lt;/option&gt;
          &lt;option&gt;2&lt;/option&gt;
          &lt;option&gt;3&lt;/option&gt;
          &lt;option&gt;4&lt;/option&gt;
          &lt;option&gt;5&lt;/option&gt;
        &lt;/select&gt;
  
        &lt;label for="select2" class="col-md-4 col-lg-4 col-sm-2 align form-control-label"&gt;Langues:français/anglais: &lt;/label&gt;
        &lt;select class="form-control" name="note2" id="select2" ngModel&gt;
          &lt;option&gt;1&lt;/option&gt;
          &lt;option&gt;2&lt;/option&gt;
          &lt;option&gt;3&lt;/option&gt;
          &lt;option&gt;4&lt;/option&gt;
          &lt;option&gt;5&lt;/option&gt;
        &lt;/select&gt;
  
        &lt;label for="select3" class="col-md-4 col-lg-4 col-sm-2 align form-control-label"&gt;Langues:français/anglais: &lt;/label&gt;
        &lt;select class="form-control" name="note3" id="select3" ngModel&gt;
          &lt;option&gt;1&lt;/option&gt;
          &lt;option&gt;2&lt;/option&gt;
          &lt;option&gt;3&lt;/option&gt;
          &lt;option&gt;4&lt;/option&gt;
          &lt;option&gt;5&lt;/option&gt;
        &lt;/select&gt;
  
      &lt;/div&gt;
  
      &lt;button type="submit" class="ui button"&gt;Submit&lt;/button&gt;
    &lt;/form&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>the service :</strong> </p>
  
  <pre><code>import { Injectable } from '@angular/core';
  import {Http, Response, Headers, RequestOptions} from '@angular/http';
  import { savePostEvaluationapi} from '../../constants/api.endpoints';
  
  
  @Injectable()
  export class EvaluationService {
    http: Http;
  
    constructor(protected _http: Http) {
      this.http = _http;
    }
  
    savePostEvaluationService(postEvalform) {
      const headers = new Headers({'Content-Type': 'application/json'});
      const options = new RequestOptions({headers: headers});
      const data = JSON.stringify(postEvalform);
  
      return this.http.post("http://evaluation.dev/app_dev.php/api/savePostEvaluation", data, options).map((res: Response) =&gt; res.json());
    }
  
  }
  </code></pre>
  
  <p><strong>and the component.ts</strong></p>
  
  <pre><code>import {Component, OnInit} from '@angular/core';
  import {EvaluationService} from '../../services/evaluation/evaluation.service';
  
  @Component({
    selector: 'app-eval-en-cours',
    templateUrl: './eval-en-cours.component.html',
    styleUrls: ['./eval-en-cours.component.css']
  })
  export class EvalEnCoursComponent implements OnInit {
  
    constructor(private evaluationService: EvaluationService) {
    }
  
    ngOnInit() {
    }
  
    // savePostEvaluation(data: Object) {
    //   this.evaluationService.savePostEvaluation(data).subscribe((dataResponse) =&gt; {
    //     console.log('execute' + dataResponse);
    //   });
    // }
      savePostEvaluation(form: any): void {
  
        this.evaluationService.savePostEvaluationService(form)
          .subscribe(
            data =&gt; data.json(),
            () =&gt; console.log('done send form to api')
          );
    }
  </code></pre>
  
  <p><strong>here is the symfony web service :</strong> </p>
  
  <pre><code>/**
       * @Rest\View()
       * @Rest\Post("/savePostEvaluation")
       * @return Response
       * @internal param Request $request
       */
  
      public function savePostEvaluation(Request $request){
          header("Access-Control-Allow-Origin: *");
          $data = json_decode($request-&gt;getContent(), true);
          dump($data);die;
      }
  </code></pre>
  
  <p>when I try to dump the data value it return null object ! any help please ! </p>