javascript - 在 Angular 6 中使用 patchValue 时发送数据格式错误

Question

我在 Angular 6 中创建编辑表单。

当我加载页面时，它使用以下代码设置值:

this.editFG.patchValue({
  productTitle: [data.productTitle],
  productName: [data.productName],
  color: [data.color],
  price: [data.price],
  gurantyMonth: [data.gurantyMonth],
  gurantyCompanyName: [data.gurantyCompanyName],
  catId: [data.catId],
  brandId: [data.brandId]
})

当我需要从服务器发送数据时，它会发送以下格式的数据:

color: ["999"]
gurantyCompanyName: ["999"]
gurantyMonth: ["999"]
price: [999]
productImageName: "999.jpg"
productName: ["999"]
productTitle: ["999"]

服务器向我显示错误:

Bad Request

现在我需要在没有这个[]的情况下发送数据，我需要像这样发送:productTitle:“999”。

有什么问题吗？我该如何解决这个问题？

Answer 1

由于 FormGroup 上的控件名称和数据上的键名称相同，因此这样做就足够了:

import { Component } from '@angular/core';
import { FormGroup, FormBuilder } from '@angular/forms';

import { DataService } from './data.service';

@Component({...})
export class AppComponent  {
  editFG: FormGroup;

  constructor(
    private fb: FormBuilder,
    private dataService: DataService
  ) {}

  ngOnInit() {

    this.editFG = this.fb.group({
      productTitle:[null],
      productName:[null],
      color:[null],
      price:[null],
      gurantyMonth:[null],
      gurantyCompanyName:[null],
      catId:[null],
      brandId:[null]
    });

    this.dataService.getData()
      .subscribe(data => {
        this.editFG.patchValue(data);
        console.log('Here\'s the form value', this.editFG.value);
      });
  }

}

<小时/>

Here's a Working Sample StackBlitz for your ref.