角度2のフォームデータをsymfony APIにポスト

Question

私は角度2のフォームを持っています。symfony API Webサービスを使用してデータベースに保存したいのですが、角度フォームからデータをフェッチしようとしています。ポストhttpリクエスト経由のURLエンドポイント。

これはcomponent.html

<div class="ui raised segment"> 
    <h2 class="ui header">Demo Form: Sku</h2> 
    <form #f="ngForm" 
     (ngSubmit)="onSubmit(f.value)" 
     class="ui form"> 

    <div class="field"> 
     <label for="skuInput">SKU</label> 
     <input type="text" 
      id="skuInput" 
      placeholder="SKU" 
      name="sku" ngModel> 
    </div> 
    <div class="field"> 
     <label for="select1" class="col-md-4 col-lg-4 col-sm-2 align form-control-label">Langues:français/anglais: </label> 
     <select class="form-control" name="note1" id="select1" ngModel> 
     <option>1</option> 
     <option>2</option> 
     <option>3</option> 
     <option>4</option> 
     <option>5</option> 
     </select> 

     <label for="select2" class="col-md-4 col-lg-4 col-sm-2 align form-control-label">Langues:français/anglais: </label> 
     <select class="form-control" name="note2" id="select2" ngModel> 
     <option>1</option> 
     <option>2</option> 
     <option>3</option> 
     <option>4</option> 
     <option>5</option> 
     </select> 

     <label for="select3" class="col-md-4 col-lg-4 col-sm-2 align form-control-label">Langues:français/anglais: </label> 
     <select class="form-control" name="note3" id="select3" ngModel> 
     <option>1</option> 
     <option>2</option> 
     <option>3</option> 
     <option>4</option> 
     <option>5</option> 
     </select> 

    </div> 

    <button type="submit" class="ui button">Submit</button> 
    </form> 
</div> 

サービスです：

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) => res.json()); 
    } 

} 

、ここcomponent.ts

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) => { 
    //  console.log('execute' + dataResponse); 
    // }); 
    // } 
    savePostEvaluation(form: any): void { 

     this.evaluationService.savePostEvaluationService(form) 
     .subscribe(
      data => data.json(), 
     () => console.log('done send form to api') 
     ); 
    } 

はsymfonyですWebサービス：

/** 
    * @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->getContent(), true); 
     dump($data);die; 
    } 

私はそれがnullオブジェクトを返すデータ値をダンプしようとします！助けてください！

Answer 1

問題を引き起こしている可能性のコードをあなたの提供に問題がいくつかあります：<option>要素がvalue属性を持っていないように見えます

1. HTML。 valueがなければ、選択された値の点でAPIに渡すことはできません。
2. ngModelは、片方向の[]または2つのバインディング[()]構文がコンポーネントクラスプロパティに結びついていないため、現在何もしていません。

フォームデータを表現するモデルを作成してみてください：

export class Foo { 
    constructor(
    public sku: string, 
    public note1: string, 
    public note2: string, 
    public note3: string 
) { } 
} 

は、その後、いくつかのデフォルト/空の値でEvalEnCoursComponentにモデルのインスタンスを作成します。フォームで

import { Foo } from './Foo'; 

export class EvalEnCoursComponent implements OnInit { 
    model = new Foo('', '', '', ''); 
    // rest of code 
} 

を、 を更新して、双方向バインディングを利用して、の変更/選択/ etcイベントでモデルプロパティが更新されるようにします。input/select。そうしないと、#fフォームオブジェクトからFormDataのようなものを使用して、フォームの値を抽出必要があるでしょう：

<select class="form-control" name="note2" id="select2" ngModel> 
    <option value="1">1</option> 
    <option value="2">2</option> 
    <option value="3">3</option> 
    <option value="4">4</option> 
    <option value="5">5</option> 
    </select> 

最後に提出：

<div class="field"> 
    <label for="skuInput">SKU</label> 
    <input type="text" 
     id="skuInput" 
     placeholder="SKU" 
     name="sku" [(ngModel)]="model.sku"> 
</div> 

はまた、あなたの<select>要素が<options>実際value性質を持っていることを確認してくださいフォームインスタンス自体の代わりにthis.modelをサービスに渡します。

フォームデータモデルを表すクラスまたはインターフェイスを使用すると、構造をより詳細に制御でき、双方向データバインディングを使用すると自動的にモデルの値が更新されます。

うまくいけば、これが役に立ちます。