Angular表单提交POST请求失效，寻求技术解决方案

你的核心问题是前后端数据格式不匹配，加上字段名称完全不对应：

• Angular端以application/json格式发送JSON数据，字段名是playerNumber、firstName等；
• ASP.NET Core API用[FromForm]接收表单数据，参数名是pnum、fn等，两者完全不兼容。

推荐采用JSON格式交互（前后端常规做法），以下是具体修改步骤：

1. 修改ASP.NET Core API #

步骤1：创建PlayerDto类 #

在API项目中新增一个数据传输对象（DTO），匹配Angular的表单字段：

public class PlayerDto
{
    public string PlayerNumber { get; set; }
    public string FirstName { get; set; }
    public string LastName { get; set; }
    public string Position { get; set; }
    public string Country { get; set; }
}

步骤2：修改API接口 #

用[FromBody]接收JSON数据，同时优化数据库连接的使用（用using自动释放资源）：

[HttpPost]
public IActionResult AddPlayer([FromBody] PlayerDto player)
{
    if (!ModelState.IsValid)
    {
        return BadRequest(ModelState);
    }

    try
    {
        using (MySqlConnection conn = new MySqlConnection(_connection))
        {
            string query = @"INSERT INTO `player` 
                            (player_number, first_name, last_name, pos_id, country_id)
                            VALUES (@num, @fn, @ln, @pos, @cid)";

            using (MySqlCommand cmd = new MySqlCommand(query, conn))
            {
                cmd.Parameters.AddWithValue("@num", player.PlayerNumber);
                cmd.Parameters.AddWithValue("@fn", player.FirstName);
                cmd.Parameters.AddWithValue("@ln", player.LastName);
                cmd.Parameters.AddWithValue("@pos", player.Position);
                cmd.Parameters.AddWithValue("@cid", player.Country);

                conn.Open();
                int rowsAffected = cmd.ExecuteNonQuery();
                
                return Ok(new { Message = $"成功添加{rowsAffected}条记录" });
            }
        }
    }
    catch (SystemException ex)
    {
        Console.WriteLine(ex);
        return StatusCode(500, "服务器内部错误");
    }
}

2. 调整Angular代码（可选，当前代码已兼容JSON发送） #

你的Angular代码已经正确发送JSON数据，只需确保表单字段和DTO一致即可。另外可以添加错误处理：

onSubmit(){
  if(this.playerForm.valid){
    this.http.post('http://localhost:5151/api/player', this.playerForm.value, this.httpOptions )
    .subscribe({
      next: (res) => {
        console.log(res);
        this.playerForm.reset(); // 提交成功后重置表单
      },
      error: (err) => {
        console.error('提交失败:', err);
      }
    })
  }
}

如果你坚持用[FromForm]接收，需要把Angular的表单数据转换成FormData，并匹配API的参数名：

onSubmit(){
  const formData = new FormData();
  formData.append('pnum', this.playerForm.get('playerNumber')?.value ?? '');
  formData.append('fn', this.playerForm.get('firstName')?.value ?? '');
  formData.append('ln', this.playerForm.get('lastName')?.value ?? '');
  formData.append('posid', this.playerForm.get('position')?.value ?? '');
  formData.append('cid', this.playerForm.get('country')?.value ?? '');

  // 不需要手动设置Content-Type，浏览器会自动添加正确的multipart/form-data及边界
  this.http.post('http://localhost:5151/api/player', formData)
  .subscribe({
    next: (res) => console.log(res),
    error: (err) => console.error(err)
  })
}

注意：此方案下要删除Angular代码中手动设置的Content-Type，否则会出现"缺失边界"错误。

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