Angular 6中表单提交数据带[]格式错误的问题及解决方法

为什么会出现这个问题？ #

你在使用patchValue给表单赋值时，错误地把每个字段的单个值都包裹在了数组里（例如productTitle: [data.productTitle]）。但你的这些表单控件应该都是普通的FormControl（而非用于批量数据的FormArray），所以Angular会把这个数组当作控件的实际值存储，提交到服务器时自然就带着[]格式，而服务器期望的是单个字符串/数值，因此返回了Bad Request错误。

怎么解决？ #

只需要去掉每个字段值外面的数组包裹，直接传递单个值即可，修改后的代码如下：

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

额外提醒 #

如果你的表单中存在需要批量处理的字段（比如多个相同类型的输入项），才需要使用FormArray并传递数组值。但从你的提交数据来看，这些字段都是单个值的输入，所以用普通FormControl+单个值赋值就完全没问题了。

内容的提问来源于stack exchange，提问作者Mr-Programer