Question

我有角度2形式，我想使用symfony API Web服务将其保存在数据库中，我正在尝试从角形式获取数据并通过post http请求将其作为json对象发送到url端点。 / p>

这是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网络服务：

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

您提供的代码存在一些可能导致此问题的问题：

HTML <option>元素似乎没有value个属性。如果没有value，则无法根据所选值传递给API。
ngModel目前没有做任何事情，因为它没有单向[]或双重绑定[()]语法绑定到某个组件类属性。

尝试创建表示表单数据的模型：

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
}

在您的表单中，更新ngModel以使用双向绑定，以确保模型属性正在针对每个 input / {{更改/选择/ etc事件进行更新1}}。否则，您需要使用select表单对象中的FormData之类的内容提取表单值：

#f

另外请确保您的<div class="field"> <label for="skuInput">SKU</label> <input type="text" id="skuInput" placeholder="SKU" name="sku" [(ngModel)]="model.sku"> </div>元素<select>实际拥有<options>个属性：

value

最后在提交时，将<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>传递给服务而不是表单实例本身：

this.model

利用类或接口来表示表单数据模型将为您提供对结构的更多控制，并且使用双向数据绑定将自动更新模型的值。

希望这有帮助！

将角度2表格数据发布到symfony api

1 个答案: