Angular服务中int类型0提交后端报'值无效'错误如何解决？

问题根因 #

• 首先FormData.append() 方法的第二个参数仅支持string或Blob类型，你传入数字会触发类型报错，且就算你强制绕过类型校验传入数字，FormData也会自动将其转为字符串，所以始终会向后端发送字符串格式的'0'
• 后端接口要求接收int类型的FlightClass字段，自然会对字符串格式的值返回校验错误

解决方案 #

方案1：改用JSON格式传参（最推荐） #

如果你的提交请求没有上传文件的需求，直接放弃FormData，改用JSON格式传参即可天然支持数字类型字段，代码示例：

// 提交方法submitHandle内部代码
const payload = {
  // 其他表单字段按实际需求添加
  flightClass: Number(this.dealForm.get('flightClass').value)
}
// Angular HttpClient会自动设置application/json请求头，无需额外处理
this.http.post('你的后端接口地址', payload).subscribe(/* 后续逻辑 */)

方案2：必须使用FormData的场景 #

如果你的请求包含文件上传，必须用FormData，可从两个方向处理：

1. 协调后端修改字段校验逻辑，支持将字符串格式的数字自动转为int类型处理，大部分后端框架都可以通过配置全局类型转换器实现，无需改动前端代码
2. 前端将整份请求参数序列化为JSON后，以Blob形式存入FormData：

const formData = new FormData();
// 先构造纯JSON格式的参数对象
const payload = {
  // 其他表单字段
  flightClass: Number(this.dealForm.get('flightClass').value)
}
// 转为Blob存入FormData
formData.append('requestData', new Blob([JSON.stringify(payload)], {type: 'application/json'}))
// 提交后后端从requestData字段中解析JSON即可拿到数字类型的FlightClass

附加优化建议 #

你可以在枚举中补充未选中的状态，避免硬编码0，提升类型安全性和可维护性：

export enum FlightClass {
    Unselected = 0,
    EconomyClass = 1,
    PremiumClass,
    BusinessClass,
    FirstClass,
}

对应的表单初始化代码修改为：

resetForm() {
  this.form = this.fb.group({
    flightClass:  [FlightClass.Unselected],
  })
}

内容的提问来源于stack exchange，提问作者hanushic