Using Angular: A guide to setting individual values for select dropdowns with form controls

Question

Using Angular: A guide to setting individual values for select dropdowns with form controls

I am working on a project that involves organizing food items into categories. Each item has a corresponding table entry, with a field indicating which category it belongs to. The category is represented by a Guid but displayed in a user-friendly format. Currently, every dropdown menu is part of a new form instance, causing issues with setting values separately as they all use the same form control name.

Below is a snippet of my code:

    <tr *ngFor="let food of foodItems" id="{{food.Guid}}" class="alternate-row">
      <td><label>{{food.foodName}}</label></td>
      <td><label>{{food.foodDescription}}</label></td>
      <td>
        <form class="table_form" [formGroup]="tableForm" (ngSubmit)="onTableFormSubmit(tableForm.value)">
          <select class="form-control" formControlName="foodCategorySelect" (change)="onTableFormSubmit(tableForm.value, food.Guid)">
            <option *ngFor="let foodCategory of foodCategoryList" [value]="foodCategory.Guid" [selected]="foodCategory.Guid == food.category">
              {{ foodCategory.categoryName }}
            </option>
          </select>    
        </form> 
      </td>
    </tr>

Here is some example data from my log:

    foodCategoryList
    0: 
    Guid: "b6b64fba-1879-44fb-8a8d-1b26c2229367"
    categoryName: "Starter"
    [[Prototype]]: Object
    1: 
    Guid: "ba9e3828-ddf0-4db4-bff2-2ec668d973d0"
    categoryName: "Dessert"
    [[Prototype]]: Object

    foodList
    0: 
    foodName: "Chicken Wings"
    Guid: "ec34ce1f-5274-4d32-a17f-4a518fef9a1f"
    foodDescription: "Delicious spicy chicken wings served with sauce"
    category: "b6b64fba-1879-44fb-8a8d-1b26c2229367" --starter
    [[Prototype]]: Object

I'm struggling to figure out how to set values individually. Any help would be greatly appreciated!

javascript jquery angular typescript

Answer 1

Answer №1

If you are looking to create a form for each row, my suggestion would be to utilize template forms for simplicity.

<!-- You do not need a <form> element -->
<select [(ngModel)]="food.category"  <!-- bind the category-->
(ngModelchange)="onTableFormSubmit(food.category, food.Guid)"> <!-- trigger update when it changes -->
...

This should work effectively as is.

Alternatively, if you prefer using the reactive forms API, you would need to create a reactive form instance for each row and then incorporate the form into the model.

foodItemsTableData = this.foodItems.map(food => ({
  ...food,
  categoryControl: 
}))

This method may seem a bit cumbersome, but the binding would simply be

[formControl]="food.categoryControl"

Another option is to establish indexes dependency.

// ts
foodCategoriesControls = this.foodItems.map(food => new FormControl(food.category));
// updates subscriptions can be in typescript file in this case
...
// html
<tr *ngFor="let food of foodItems; index as i"
<select [formControl]="foodCategoriesControls[i]" (change)="onTableFormSubmit(foodCategoriesControls[i].value, food.value)"

You could also nest the category controls within forms, similar to your previous example, although it may not be necessary.

Answer 2

If you are looking to create a form for each row, my suggestion would be to utilize template forms for simplicity.

<!-- You do not need a <form> element -->
<select [(ngModel)]="food.category"  <!-- bind the category-->
(ngModelchange)="onTableFormSubmit(food.category, food.Guid)"> <!-- trigger update when it changes -->
...

This should work effectively as is.

Alternatively, if you prefer using the reactive forms API, you would need to create a reactive form instance for each row and then incorporate the form into the model.

foodItemsTableData = this.foodItems.map(food => ({
  ...food,
  categoryControl: 
}))

This method may seem a bit cumbersome, but the binding would simply be

[formControl]="food.categoryControl"

Another option is to establish indexes dependency.

// ts
foodCategoriesControls = this.foodItems.map(food => new FormControl(food.category));
// updates subscriptions can be in typescript file in this case
...
// html
<tr *ngFor="let food of foodItems; index as i"
<select [formControl]="foodCategoriesControls[i]" (change)="onTableFormSubmit(foodCategoriesControls[i].value, food.value)"

You could also nest the category controls within forms, similar to your previous example, although it may not be necessary.

Using Angular: A guide to setting individual values for select dropdowns with form controls

Answer №1

Similar questions

Looking for a Regex pattern for this example: 12345678/90 MM/DD/YYYY

Increase the Step Size of an HTML Number Input by Holding Down the Time

The package import path varies between dynamic code generation and static code generation

Accessing Ionic rootScope within the config stateprovider - A step-by-step guide

A beginner's guide to using Jasmine to test $http requests in AngularJS

Steps for releasing a third-party library that is compatible with both Angular 2 and Angular 4

Using Sequelize to Link Two Columns Between Tables

The jQuery click event is failing on the second attempt

The Angular Proxy seems to handle GET requests successfully, but encounters issues when it comes to

What strategies can be employed to manage three conflicting versions of a single library within a Vite project?

Making the Select Tag function as an on-click event in JQuery

Control the start and stop of an Express.js app in Node.js using PHP

Generate a CSV file using Javascript

Tips for Safely Utilizing localStorage in Angular

Tips for updating content (wishlist) without the need to refresh the page

Steps to store a string with all characters in a JavaScript variable

Unlocking Extended Functionality in JQuery Plugins

retrieve asynchronous data from the server using ngrx

Is there a method to extract the y value for a specific x value that is not part of the current data set in a Chart.js graph

Exploring the world of typescript with the power of ts-check