How to post array as form data in Angular Typescript - arrays

Question

I am working in Angular 8 and is using web.api in .net core 2.2
I have a form including some "regular" inputs, a file and multi selectable checkboxes.
The problem is the multi selectable checkboxes, that I turn into an array of numbers. Before I post the data to the server, I Convert my FormGroup into FormData and add the file manually and also the array of ints from the multiselectable checkboxes:
data.append('locationsSecondaryIds',
new Blob( [ JSON.stringify(this.profilePersonalData.locationsSecondaryIds)], { type : 'application/json' } ) );
if (this.file) {
data.append('document', this.file, this.file.name);
}
locationsSecondaryIds is a number[].
I have also tried leaving out the Blob and just send it as [1,1], but when the server gets to the server it can't convert it to a List
Any good suggestions?
Thanks very much in advance :-)

Answer 1

I had the same scenario and here is how I did.
My component.ts File in Angular:
const formData = new FormData();
formData.append('Parameter1', "Some String Value");
formData.append('Parameter2', this.currentUserId.toString());
for (const index in this.arrayValues)
{
// instead of passing this.arrayValues.toString() iterate for each item and append it to form.
formData.append(`ArrayValue[${index}]`,this.arrayValues[index].toString());
}
for (const file of this.importedFiles)
{
formData.append('Files', file);
}
Now post it to asp.net core web api and it should work.
My server side C# Class:
public class SomeClass
{
public string Parameter1 { get; set; }
public int Parameter2 { get; set; }
public string[] ArrayValue { get; set; }
public IFormFile[] Files { get; set; }
}
Note: Make sure to decorate your parameter with [FromForm]in your action method.
Asp.Net Core Web Api Controller action method:
public async Task<IActionResult> SomeMethod([FromForm] SomeClass someClass)
{
...
}

Answer 2

You can try this for picking multiple checkbox values and appending it in a form data.
On submit button:
let subs = [];
subs = this.skillForm.value.subjects; // here subject refers to multi select dropdown
let subString = subs.toString(); // you can let the values to be int as per your DB
//column
let fd = new FormData();
fd.append('values',subString);

Answer 3

The answer from fingers10 worked for me. For my code, I had to add an array of objects, to do this I used his answer with the following code.
for (const index in voteData.feedMessageTags) {
// instead of passing this.arrayValues.toString() iterate for each item and append it to form.
formData.append(`feedMessageTags[${index}].key`, voteData.feedMessageTags[index].key);
formData.append(`feedMessageTags[${index}].value`, voteData.feedMessageTags[index].value);
}