Angular 11与.NET 5应用FormData提交数值属性校验失败问题

问题根因 #

报错核心原因是前端构造FormData时对数值类型字段错误使用了JSON.stringify()，导致提交的数值被额外包裹了双引号：
比如数值777经过JSON.stringify()处理后会变成字符串"777"，后端接收到带双引号的字符串后，无法将其解析为decimal/int类型，所以触发了类型校验错误。

解决方案 #

1. 修改BuildFormData方法，移除数值类型的JSON.stringify()调用

把原本对数字字段的序列化逻辑改成直接转成普通字符串即可：

private BuildFormData(office: OfficeCreateEdit1): FormData {
  const formData = new FormData();

  // 数字字段直接转字符串，不要用JSON.stringify
  formData.append('initialExaminationFee', office.initialExaminationFee.toString());
  formData.append('followUpExaminationFee', office.followUpExaminationFee.toString());
  // hospitalId非必填，有值再传
  if (office.hospitalId) {
    formData.append('hospitalId', office.hospitalId.toString());
  }

  if (office.street){
    formData.append('street', office.street);
  }
  if (office.city){
    formData.append('city', office.city);
  }
  if (office.country){
    formData.append('country', office.country);
  }
  if (office.description){
    formData.append('description', office.description);
  }

  if (office.picture){
    formData.append('picture', office.picture);
  }

  if (office.latitude) {
    // 经纬度也不要用JSON.stringify
    formData.append('latitude', office.latitude.toString());
  }
  if (office.longitude) {
    formData.append('longitude', office.longitude.toString());
  }
  return formData;
}

2. 修复下拉框默认值的类型错误

你现在模板里医院下拉框的默认选项值是字符串"null"，不是真正的空值，需要改成Angular的绑定语法来传真正的null：

<option [value]="null">--Select Hospital if any--</option>
<option
  *ngFor="let hospital of hospitalList"
  [value]="hospital.id"
>
  {{ hospital.hospitalName }}
</option>

3. 可选优化：给数值输入框加type="number"属性

在app-text-input组件或者直接给费用输入框添加type="number"，确保表单拿到的字段值是数字类型，避免字符串转数字的额外问题。

修改完成后提交的数值就不会携带额外双引号，后端的类型校验即可正常通过。

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