Post eckig 2 Form Daten zu symfony api

Question

Ich habe eckig 2 Form und ich möchte es in der Datenbank mit Symfony API Web Service zu speichern, ich versuche, Daten aus eckigen Form zu holen und schickte es als JSON-Objekt an die URL-Endpunkt über Post-HTTP-Anfrage.

ist dies die 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> 

der Service:

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()); 
    } 

} 

und die 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') 
     ); 
    } 

hier ist die symfony Web-Service:

/** 
    * @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; 
    } 

wenn ich versuche, den Datenwert dump es null Objekt zurück! jede Hilfe bitte!

Answer 1

Es gibt ein paar Probleme mit dem Code Ihrer Verfügung gestellt, die das Problem verursachen können:

1. HTML <option> Elemente scheinen nicht value Attribute zu haben. Ohne eine value gäbe es nichts, was in Bezug auf den ausgewählten Wert an die API übergeben werden könnte.
2. ngModel tut derzeit nichts, da es weder die einseitige [] noch die zwei bindende [()] Syntax hat, die an eine Komponente der Klasseneigenschaft bindet.

Versuch, ein Modell zu, die die Formulardaten zu erstellen:

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

Dann erstellen Sie eine Instanz des Modells in EvalEnCoursComponent mit einigen default/leeren Werten:

import { Foo } from './Foo'; 

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

In dem Formular, Aktualisieren Sie die ngModel, um eine bidirektionale Bindung zu verwenden, um sicherzustellen, dass die Modelleigenschaften bei Änderung/Auswahl von/etc-Ereignissen für jeweilsinput/aktualisiert werden. Andernfalls müssen Sie die Formularwerte extrahieren etwas wie FormData aus dem #f Form-Objekt:

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

auch sicher sein, dass Ihre <select> Elemente <options> haben tatsächlich value Eigenschaften:

<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> 

schließlich auf einreichen übergeben Sie this.model an den Dienst anstelle der Formularinstanz selbst:

savePostEvaluation(): void { 
    this.evaluationService.savePostEvaluationService(this.model) 
     .subscribe(data => console.log(data)); 
} 

Durch die Verwendung einer Klasse oder Schnittstelle zur Darstellung Ihres Formulardatenmodells erhalten Sie mehr Kontrolle über Ihre Struktur und die Verwendung der bidirektionalen Datenbindung aktualisiert automatisch die Modellwerte.

Hoffentlich hilft das!