CODEWITHSUNDEEP
arraysangulartypescripthttp-postasp.net-core-webapi
PNR
PNR

Reputation: 597

How to post array as form data in Angular Typescript

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 :-)

Upvotes: 5

Views: 12660

Answers (3)

Chaster johnson
Chaster johnson

Reputation: 173

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

Upvotes: 0

fingers10
fingers10

Reputation: 7927

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)
{
    ...
}

Upvotes: 7

Mridul
Mridul

Reputation: 1366

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

Upvotes: 0

Related Questions