Angular提交表单时出现非空字段请求报错问题排查

我正在为网店创建网页并向数据库上传数据，前端通过FormData提交数据，后端使用[FromForm]接收WebPage DTO，已确认请求体中所有必填字段非空且字段名称与DTO完全一致，但仍收到非空字段请求报错，相关代码如下：

前端提交代码 #

OnSubmit(): void {
  const formData = new FormData();

  formData.append('Language', 'en');
  formData.append('Token', 'dfdfbsbfuefnbyxvfg6327jf843i');
  formData.append('Domain', 'localhost');

  formData.append('WebPageName', this.website.WebPageName);
  formData.append('Company_ID', this.website.CompanyId.toString());     
  formData.append('CountryId', this.website.CountryId.toString());      
  formData.append('LanguageId', this.website.LangId.toString() || '0');       

  formData.append('CssBasics', this.website.CssBasic || '0');
  formData.append('HTMLCode', this.website.HTMLCode || '0');

  this.apiService.postMultipart('Domain/adddomain', formData).subscribe(
    res => {
      console.log('domain saved successfully:', res);
      this.loadWebPages();  
    },
    err => console.error('Error saving domain:', err)
  );
}

WebPage DTO定义 #

public int ID { get; set; }
public string WebPageName { get; set; }
public string? Comments { get; set; }
public DateTime? Created_At { get; set; }
public DateTime? Updated_At { get; set; }
public int Company_ID { get; set; }
public int CountryId { get; set; }
public int LanguageId { get; set; }
public string? CssBasics { get; set; }
public string? HTMLCode { get; set; }

后端控制器代码 #

[HttpPost("adddomain")]
public async Task<IActionResult> AddDomain([FromForm] WebPage domain)
{
    domainModule = new BIDomain(1, _configuration);

    if (!ModelState.IsValid)
    {
        return BadRequest(ModelState);
    }

    try
    {
        // 调用DomainModule的AddDomainAsync方法
        bool result = await domainModule.AddDomainAsync(domain);

        if (result)
        {
            return Ok(new { Message = "域名已成功添加！" });
        }

        return StatusCode(StatusCodes.Status500InternalServerError, "无法添加域名。");
    }
    catch (Exception ex)
    {
        // 错误时返回500状态码
        return StatusCode(StatusCodes.Status500InternalServerError, new { Error = ex.Message });
    }
}

排查与解决方案 #

• 查看具体验证错误信息
  前端错误回调中打印完整的错误响应，确认是哪个字段触发了非空验证：

  err => {
    console.error('Error saving domain:', err);
    console.error('Validation Details:', err.error); // 输出具体字段错误
  }
  

  或修改后端返回更明确的错误信息：

  return BadRequest(ModelState.SelectMany(x => x.Value.Errors).Select(e => e.ErrorMessage));
  

• 检查数值类型字段的实际传递值
  前端将CompanyId/CountryId等int类型转为字符串传递，需确认这些值不是undefined/null转成的空字符串。在浏览器开发者工具的Network面板中查看FormData的实际内容，确保Company_ID、CountryId、LanguageId都是有效的数字字符串。

• 核对前端对象属性名与字段映射
  注意到前端中LanguageId对应的值是this.website.LangId，需确认前端website对象的属性名是否应为LanguageId而非LangId，若属性名拼写错误会导致传递值为undefined，触发后端非空验证失败。同理检查其他必填字段的属性名是否与DTO匹配。

• 验证字符串类型必填字段的有效值
  DTO中WebPageName为非空字符串，需确认前端传递的不是空字符串或仅空格的字符串。可在前端添加前置校验：

  if (!this.website.WebPageName?.trim()) {
    console.error('WebPageName cannot be empty');
    return;
  }
  

• 检查请求Content-Type与绑定配置
  确认前端postMultipart方法正确设置了multipart/form-data的请求头，未手动篡改边界值导致后端无法解析FormData。同时确保ASP.NET Core项目未自定义模型绑定规则影响FormData的字段映射。

内容的提问来源于stack exchange，提问作者Roland Radványi