Posting an array as form data in Angular Typescript: A step-by-step guide

Question

Posting an array as form data in Angular Typescript: A step-by-step guide

Hello there, I'm currently developing an application using Angular 8 and integrating web.api within .net core 2.2.

One of the challenges I encountered is dealing with multi-selectable checkboxes in a form that also includes "regular" inputs and file upload functionality.

To handle the array of numbers from the multi-selectable checkboxes, I convert my FormGroup into FormData before posting it to the server. I manually add the file and the array of integers like this:

data.append('locationsSecondaryIds',
    new Blob( [ JSON.stringify(this.profilePersonalData.locationsSecondaryIds)], { type : 'application/json' } ) );
    if (this.file) {
        data.append('document', this.file, this.file.name);
    }

The variable locationsSecondaryIds represents a number array.

I have attempted to send the data without converting it to a Blob by simply sending [1,1], but unfortunately, the server is unable to convert it to a List on receiving the request.

If anyone has any suggestions or solutions to this issue, I would greatly appreciate your help!

Thank you in advance for your assistance :-)

arrays angular typescript http-post asp.net-core-webapi

Answer 1

Answer №1

I encountered a similar situation and approached it like this.

This is how I structured my Angular component.ts File:

const formData = new FormData();
formData.append('Parameter1', "Some String Value");
formData.append('Parameter2', this.currentUserId.toString());
for (const index in this.arrayValues) 
{
    // Instead of converting this.arrayValues to string, I looped through each item and added it to the form.
    formData.append(`ArrayValue[${index}]`,this.arrayValues[index].toString());
}
for (const file of this.importedFiles)
{
    formData.append('Files', file);
}

After that, I sent it to an asp.net core web API where everything functioned smoothly.

In 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: Remember to use [FromForm] attribute on your parameter in the action method.

In the Asp.Net Core Web API Controller action method:

public async Task<IActionResult> SomeMethod([FromForm] SomeClass someClass)
{
    ...
}

Answer 2

I encountered a similar situation and approached it like this.

This is how I structured my Angular component.ts File:

const formData = new FormData();
formData.append('Parameter1', "Some String Value");
formData.append('Parameter2', this.currentUserId.toString());
for (const index in this.arrayValues) 
{
    // Instead of converting this.arrayValues to string, I looped through each item and added it to the form.
    formData.append(`ArrayValue[${index}]`,this.arrayValues[index].toString());
}
for (const file of this.importedFiles)
{
    formData.append('Files', file);
}

After that, I sent it to an asp.net core web API where everything functioned smoothly.

In 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: Remember to use [FromForm] attribute on your parameter in the action method.

In the Asp.Net Core Web API Controller action method:

public async Task<IActionResult> SomeMethod([FromForm] SomeClass someClass)
{
    ...
}

Answer 3

Answer №2

If you want to select multiple checkbox values and add them to a form data, you can follow these steps before clicking the submit button:

const selectedValues = [];
selectedValues = this.skillForm.value.subjects; // 'subjects' here refers to a multi-select dropdown
let selectedString = selectedValues.toString(); // You can convert the values to integers based on your database column type
let formData = new FormData();
formData.append('selectedValues', selectedString);

Answer 4

If you want to select multiple checkbox values and add them to a form data, you can follow these steps before clicking the submit button:

const selectedValues = [];
selectedValues = this.skillForm.value.subjects; // 'subjects' here refers to a multi-select dropdown
let selectedString = selectedValues.toString(); // You can convert the values to integers based on your database column type
let formData = new FormData();
formData.append('selectedValues', selectedString);

Answer 5

Answer №3

Following fingers10's advice was the key to solving my issue. I modified my code by incorporating an array of objects, using their recommended approach as shown below.

    for (const index in voteData.feedMessageTags) {
        // Instead of converting this.arrayValues to a string, I loop through each item and add it to the form.
        formData.append(`feedMessageTags[${index}].key`, voteData.feedMessageTags[index].key);
        formData.append(`feedMessageTags[${index}].value`, voteData.feedMessageTags[index].value);
    }

Answer 6

Following fingers10's advice was the key to solving my issue. I modified my code by incorporating an array of objects, using their recommended approach as shown below.

    for (const index in voteData.feedMessageTags) {
        // Instead of converting this.arrayValues to a string, I loop through each item and add it to the form.
        formData.append(`feedMessageTags[${index}].key`, voteData.feedMessageTags[index].key);
        formData.append(`feedMessageTags[${index}].value`, voteData.feedMessageTags[index].value);
    }

Posting an array as form data in Angular Typescript: A step-by-step guide

Answer №1

Answer №2

Answer №3

Similar questions

Loop through an array of elements in JavaScript and retrieve the element with the largest pixel size

using angular and firestore to grant public reading permission for a document

Pressing Enter in a Material-UI Dialog does not trigger form submission

Troubleshooting issue: Unable to Subscribe to Subject in Angular 5+ with RxJS

What is the best way to transfer the userId from the browser to protractor?

Changing the background color of .pane and .view elements in an Ionic web application using JavaScript

Using the Post method in Angular will result in a 400 status code being returned

Experimenting with key directive in the newest version of Angular (9)

Using Ionic to send email verification via Firebase

Challenges when transitioning from Angular 8 to Angular 9

Limit the typescript generic type to only a singular string literal value, preventing the use of unions

I am having trouble viewing the input value on my Angular5 form

How can we effectively map Typescript Enums using their keys without relying on a Map?

Fill in the missing keys, values, and data within the JSON object

Upon launching Google Chrome, a series of errors plague the WSL2 Ubuntu setup while running Karma and Jasmine for Angular testing

Convert potentially undefined boolean into a boolean by utilizing "!!"

Begin the NextJS project by redirecting the user to the Auth0 page without delay

Can a File Object be transmitted to an AWS Lambda function via API Gateway using JavaScript?

When passing parameters through a URL in TypeScript, the display shows up as "[object object]" rather than as a string

Implement a T3 App Redirect in a TRPC middleware for unsigned users