Post Method not working when sending via Angular Form

I have a baseball-themed project with the following stack: Angular 16 front-end, a dotnet 8 web api, and MySQL docker container. Get request works fine. Was able to iterate through table of data and display as cards, but I'm stuck on the POST method for adding a player. The POST method adds players just fine using Swagger and Postman, but cannot get it to work when submitting form data using Angular reactive forms.

This is my angular code:

import { Component, inject, OnInit } from '@angular/core';
import { HttpClient, HttpHeaders} from '@angular/common/http';
import { FormBuilder, ReactiveFormsModule, Validators } from '@angular/forms';



@Component({
selector: 'app-add-player-form',
templateUrl: './add-player-form.component.html',
styleUrls: ['./add-player-form.component.css']
})

export class AddPlayerFormComponent {


constructor(private fb: FormBuilder,
private http: HttpClient
){}

playerForm = this.fb.group({
playerNumber: '',
firstName: ['', Validators.required],
lastName: '',
position:'',
country: ''
})

httpOptions = {
headers: new HttpHeaders({
'Content-Type' : 'application/json'
})
};

onSubmit(){
this.http.post('http://localhost:5151/api/player', this.playerForm.value, this.httpOptions ).
subscribe((res) => {
console.log(res);
})
}

}


<form [formGroup]="playerForm" (ngSubmit)="onSubmit()">
<label>player number</label>
<input formControlName="playerNumber" >
<br>
<label>first name</label>
<input formControlName="firstName" >
<br>
<label>last name</label>
<input formControlName="lastName" >
<br>
<label>position</label>
<input formControlName="position" >
<br>
<label>country</label>
<input formControlName="country" >
<br>
<button type="submit" >add player</button>
</form>





This is my ASP.NET code

// http post - Add player using parameters
[HttpPost]
public void AddPlayer([FromForm] string pnum, string fn, string ln, string posid, string cid)
{
try
{

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)";

MySqlCommand cmd = new MySqlCommand(query, conn);
cmd.Parameters.AddWithValue("@num", pnum);
cmd.Parameters.AddWithValue("@fn", fn);
cmd.Parameters.AddWithValue("@ln", ln);
cmd.Parameters.AddWithValue("@pos", posid);
cmd.Parameters.AddWithValue("@cid", cid);

cmd.Connection.Open();

cmd.ExecuteNonQuery();
}
catch (SystemException ex)
{
Console.WriteLine(ex);
}
}





error when i try to send form data from angular

player table in mysql

I've tried a lot of different things: I've tried changing the attribute from [FROM BODY] to [FROM FORM] in the controller. I've tried sending the request with different Content-Type because in Swagger it shows my POST endpoint as "multipart/form-data", but that would then trigger a Content-Type missing boundary error. I need help! Thanks in advance.

Continue reading...