Why POST using a 'Form' vs using a 'Body'? - asp.net

Question

The title expresses my post succinctly. Though the following side-note expresses my specific situation which sparked the question.
*Side Note: I'm making a web app with an Angular Front-end. I've found that once I encapsulate my data in a 'FormData' object from an
html form template, I am then unable to get those values back from
within client-side Angular (as posts like this one state:
How do i get the content from a formData?
). Though when I POST to ASP.Net with a '[FromForm]' attribute the
values get mapped fine.
So to make things easier I might rather acquire data from the form in
the first place and then use it in a 'body' POST instead of a 'form'
POST. Doing this so that I am passing around straight data I can work
with, instead of data wrapped in a form which I'm unable to work with
client-side.
So, thus, I'm wondering the differences between Posting 'forms' and
posting 'bodies', and whether there's any reason I should use one over
the other?
Update
In ASP.Net Core you can put attributes on your parameter types for REST endpoints. [FromForm] and [FromBody] are what I'm curious about. On the angular side, calling these REST endpoints requires passing either a 'FormData' (for the [FromForm]), or some sort of user defined type (for [FromBody]).
See below for examples.
Update
Here's the signature for the ASP.NET Endpoint for the '[FromBody]':
[HttpPost]
public async Task<IActionResult> CreateToken([FromBody] LoginViewModel model)
{...}
Here's the Angular snippet that calls this '[FromBody]' endpoint, along with the type that is passed in for the POST call:
public creds = {
username: "",
password: ""
}
login(creds): Observable<boolean> {
return this.http.post("api/account/createtoken", creds)
.pipe(
map((data: any) => {
this.token = data.token;
this.tokenExpiration = data.expiration;
this.username = data.username;
return true;
}));
}
Here is the signature for the ASP.NET Endpoint for the '[FromForm]':
[HttpPost]
public async Task<IActionResult> Signup([FromForm] SignupViewModel viewModel)
{...}
and here is the Angular snippet that calls this '[FromForm]' endpoint:
registerUser(formData: FormData) {
const options = {
headers: new HttpHeaders().set('Accept', 'application/json')
};
return this.http.post('api/account/signup', formData, options)
.pipe(
map(() => {
return true;
}),
catchError(this.handleError)
);
}

Answer 1

The FromForm attribute is for incoming data from a submitted form sent by the content type application/x-www-url-formencoded while the FromBody will parse the model the default way, which in most cases are sent by the content type application/json, from the request body