Obtain every selection from the multiselect box and add them to the database

How do I assign all selected measures to my "answers" object?

The selected measures are:

get selectedMeasures() {
    const items = this.measureItems.filter((item: any) => item.selected);
    return items.length ? JSON.stringify(items.map(item => ({value: item.value}))) : '';
  }

This is the output of selected measures:

console.log('selectedMeasures: '+ this.selectedMeasures);

Output:

selectedMeasures: [{"value":"Average"},{"value":"Last"}]

I have an exported interface called answers.ts:

export interface Answers {
    id?: number;
    f01: string;
    f02: string;
    cb1: string;
}

In my main .ts file, I have:

answers: Answers = {
    id: undefined,
    f01: '',
    f02: '',
    cb1: this.selectedMeasures
  };

However, there is nothing in cb1.

f01 and f02 work fine. For example, for f01:

<input id="f01" [(ngModel)]="answers.f01" type="text" class="form-control cc-exp">

I did the same for my multiselect component:

<ngx-dropdown-list [items]="measureItems" id="cb1" [(ngModel)]="answers.cb1" [multiSelection]="true" [placeHolder]="'Measures'"></ngx-dropdown-list>

How can I correctly insert the output into cb1?

Answer №1

It is necessary to swap out [(ngModel)] for [(selectedValue)] in this manner.

<ngx-dropdown-list [items]="measureItems" id="cb1" [(selectedValue)]="answers.cb1" [multiSelection]="true" [placeHolder]="'Measures'"></ngx-dropdown-list>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The variable in my scope is not reflecting the changes in the HTML view

Here is my code for handling file attachments in AngularJS: $scope.attachments = []; $scope.uploadFile = function(files){ for(var i=0; i<files.length; i++){ $scope.attachments.push(files[i]); console.log($scope.attachments.length); } } ...

Vue 3 feature: Click the button to dynamically insert a new row into the grid

Just starting out in the world of coding, I've zero experience with Vue - it's my introduction to frameworks and arrays are currently my nemesis. In a recent exercise, I managed to display the first five elements of an array in a table after filt ...

Vue enables seamless click-and-edit functionality for text input

I am in search of a Vue component that allows for click-and-edit functionality. After discovering this fiddle, I made some modifications. It functions like this: https://i.sstatic.net/bSMPj.gif Access the fiddle here. The issue: Currently, an additiona ...

Counting nodes that have the 'enabled' property: A guide

I am dealing with a tree structure that has Node objects: class Node implements ITreeNode { id?: any; name: string; children:? Node[], enabledState = new Subject<boolean>(); toggle() { this.enabled = !this.enabled; this.enabledStat ...

Maintaining the original layout upon refreshing the page

Incorporating two forms on my website, I added a button that transitions between the login and sign-up forms smoothly. The process is as follows: Initially, the login form is displayed; clicking the button switches to the sign-up form. Proceeding to subm ...

Navigating through the year selection with your keyboard

By default, a dropdown menu containing years allows for keyboard navigation. For example, if you type in 1992 while the dropdown is selected, it will automatically move to that specific year option. I am curious to know if there is a way to activate a two ...

Alert: there was an issue with the datatable regarding an "unknown parameter 0."

Currently, I am facing an issue while trying to implement datatables with a fixed number of columns and an array of objects retrieved from jQuery ajax. The error message that I encounter reads as follows: datatables warning (table id = myId requested unk ...

What are some ways to display HTML content as a string using JavaScript?

Below is the javascript code I am currently using: var html = '<div class="col-lg-4 col-references" idreference="'+response+'"><span class="optionsRefer"><i class="glyphicon glyphicon-remove delRefer" style="color:red; curso ...

Generating and delivering files without the need to save them to a hard drive

I've been attempting to create a file and send it as a response using expressjs. Here's what I've tried: import { createWriteStream } from 'fs'; const writeStream = createWriteStream('./file.sxcu'); const data = { " ...

Ways to deactivate a button using CSS

I need to use Javascript to disable a link based on its id. By default, the link is invisible. I will only enable the link when the specific id value comes from the backend. HTML <li id="viewroleId" style="display: none;"> <a href="viewrole" ...

Transfer an Object from the LoginComponent to the ProfilComponent

Beginning with Angular, I am curious about the process of passing an object (connectedUser) from the LoginComponent to the ProfileComponent. Your help is greatly appreciated. Thank you in advance. ...

Using javascript to quickly change the background to a transparent color

I am in the process of designing a header for my website and I would like to make the background transparent automatically when the page loads using JavaScript. So far, I have attempted several methods but none seem to be working as desired. The CSS styles ...

Do all components in Angular 4 need to be unit tested individually?

When using Angular 4, the cli tool is included. It automatically generates files for a new component, such as the component file, template file, stylesheet, and spec file (unit test). The MainComponent serves as a placeholder for other components. The te ...

Exploring the nuances of checking lists in TypeScript

In the following list: empList = ['one','two','finish','one','three'] I am required to evaluate conditions based on empList: Condition 1: If 'two' appears before 'finish', set this ...

Ways to enhance the Response in Opine (Deno framework)

Here is my question: Is there a way to extend the response in Opine (Deno framework) in order to create custom responses? For instance, I would like to have the ability to use: res.success(message) Instead of having to set HTTP codes manually each time ...

Using ngFor to dynamically call functions

In my code, I have an array called 'actionsArray' which contains objects of type 'Action'. Each Action object has two parameters: the function name and a boolean value (which is currently not important). let actionsArray: Action[] = [{ ...

What happens when you combine an if-else statement with a pair of rules

I'm new to coding and I need help with an if statement that has two conditions. I know my attempt is not correct, but I hope it conveys the idea of what I am trying to achieve. $('.album_tracks_light, .album_tracks_dark').mouseenter(functio ...

Issue with mssql.connect await causing timeout in Jest

Testing some functionality in a nextjs Typescript project that needs to interact with the database directly, not relying on mocked sql query results. But encountering issues with it actually writing to the database. A brief example of the problem: /* @/li ...

Vue table does not update when checkbox is unchecked

I am currently utilizing Daisy UI and basic VUE to create a checkbox functionality. When I check the checkbox, it successfully filters the table entries; however, when I uncheck or check another checkbox, the filter does not refresh again. Below is my tab ...

Optimal method for relocating an element efficiently

I'm currently working on a project where I need to implement horizontal movement for a DOM element. The movement should start on mousedown, continue on mousemove, and end on mouseup. This task is especially challenging due to the site's numerous ...