Angularjs 将angular 2表单数据发布到symfony api

我有angular 2表单，我想使用symfony API web服务将其保存在数据库中，我正在尝试从angular表单获取数据，并通过post http请求将其作为json对象发送到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>

以及组件1.ts

以下是symfony web服务：

---

当我尝试转储数据值时，它返回空对象！请帮忙

您提供的代码中有几个问题可能会导致此问题：

HTML元素似乎没有值属性。如果没有一个值，就没有任何东西可以根据所选的值传递给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以利用双向绑定，以确保在每个输入/选择的更改/选择/etc事件中更新模型属性。否则，您需要使用类似于f form对象的方法提取表单值：

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

最后，在提交时，将this.model传递给服务，而不是表单实例本身：

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

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

---

希望这有帮助

savePostEvaluation中的表单在传递给savePostEvaluationService之前是否有任何值？看起来您并没有将ngModel绑定到任何对象属性。见文件。两个绑定看起来像[ngModel]=someModel.propertyName。更新了绑定并添加了更多关于您在submit上看到的内容的信息。hanks用于共享答案Alexander:但我想将表单作为json对象发送，如下所示：{label:label，value:value}到Web服务以将其保存在数据库中！–感谢分享答案Alexander:但是我想将表单作为json对象发送到Web服务，将其保存在数据库中，就像这样：{label:label，value:value}！可以使用任何方式定义数据模型，包括属性键的名称和值的格式。这种方法使您能够在将对象发送到服务器之前，根据需要修改对象。您可能需要提供有关您的问题的其他信息。提供的示例模型只是一个示例，说明了如何处理问题，并使使用angular forms模块更容易、更结构化。提供您要发送到服务器的确切数据。表单本身的字段将通过web服务“GET”从数据库中检索。您可以提供您要发送到服务器的确切结构中的确切数据吗？这将有助于制定解决方案。

import { Foo } from './Foo';

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

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

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

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