Combine Two Values within Model for Dropdown Menu

I am currently facing a situation where I have a select box that displays a list of users fetched from the backend. The select box is currently linked to the name property of my ng model.

However, each user object in the list also contains an email property which I wish to link to another property in the model when a user selects a name from the dropdown menu.

Is there a way to achieve this functionality?

Here is the code for my current select box that successfully binds to the name property in my ng model:

<select [(ngModel)]="model.name" name ='name'>
    <option value="">--Select a User--</option>
    <option *ngFor="let user of users" [value]="user.name">{{user.name}}</option>
</select>
htmlangulartypescript

Answer №1

Resolved the issue by iterating through the users array to get the index for select options. Used this index as the value and added a change property on the select tag to set the information from the users array to the model:

<select class="form-control" [(ngModel)]="selectedUser" name ='name' (change)="userChange()">
    <option value="" selected="true">--Select a User--</option>
    <option *ngFor="let user of users; let i=index" [value]="i">{{user.name}}</option>
</select>

In the component file:

userChange() {
    this.model.name = this.users[this.selectedUser].name;
    this.model.email = this.users[this.selectedUser].email;
}

Answer №2

<select [(ngModel)]="model" name ='name'>
    <option value="">--Choose a User--</option>
    <option *ngFor="let user of users" [value]="user">{{user.name}}</option>
</select>

By selecting the entire object, you will be able to access both the email and name of the user.

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 content inside the inner div does not stretch to match the height of its parent element

I want to address a specific issue I am facing with my div structure. Although it may seem similar to other questions on StackOverflow, none of the existing solutions have worked for me. The problem is that I have two child divs inside a parent div. The h ...

htmlcss

Is it possible to produce data on the server and then transmit it to the client?

Can you provide guidance on creating a webpage that prompts a python script to run on the server, and then displays the output of the script back in the browser? I'm put time into researching and seeking assistance during my web programming course. A ...

pythonhtml

Issue with Socket.io Client: Consistently receiving error messages for an incorrect

Here is the server-side code: import http from 'http'; import Koa from 'koa'; import { Server } from 'socket.io'; (async () => { const app = new Koa(); var server = http.createServer(app.callback()); var io = new Se ...

node.jstypescriptsocket.iokoa

What is the process for being directed to the identity server login within an Angular application?

Immediately redirecting users to the identity server upon accessing the application is my goal. Currently, there is a login button that directs users to the ID server with a click, but I want to eliminate this button and have the redirection occur automati ...

angularidentityserver4

Troubleshooting challenges with LoaderService while implementing the MSAL Service for authentication in Angular

I am currently working on an Angular application that requires Microsoft credentials for logging in. In addition, I have implemented an Http Interceptor to display a loading component whenever any HttpClient call is being made. However, I am facing an issu ...

angularazure-ad-msalangular-http-interceptorsmsal-angularangular-httpclient-interceptors

What does Angular 5 offer in terms of functionality that is equivalent to?

I am working on my AngularJS 1.5 application where I have controllers directly calling service functions. What is the recommended approach to achieve this in Angular? $scope.permissions = ClockingMenuService.permissions; $scope.data = ClockingMenuService ...

angulartypescriptserviceangular5

Why doesn't AngularJS validation function properly with input elements of type "number"?

Struggling with Angularjs validation here. Ng-pattern seems to work fine only when the input type is text. However, when the input type is number, ng-pattern doesn't seem to work, although required, min, and max attributes still function. <input t ...

javascriptangularjshtml

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" ...

javascripthtmlcssangularjs

Collaborate and apply coding principles across both Android and web platforms

Currently, I am developing a web version for my Android app. Within the app, there are numerous utility files such as a class that formats strings in a specific manner. I am wondering if there is a way to write this functionality once and use it on both ...

javascriptjavaandroidtypescriptweb

Dealing with nullable objects in Typescript: Best practices

Looking for a solution to have a function return an object or null. This is how I am currently addressing it: export interface MyObject { id: string } function test(id) : MyObject | null { if (!id) { return null; } return { ...

typescript

Iterating through textboxes and buttons to trigger actions in JavaScript

Having an issue with JavaScript (or jQuery) where I can successfully input text and click a button on a page using the following script: document.getElementsByName('code')[0].value='ads0mx0'; document.getElementsByName('event&a ...

javascriptjqueryhtml

Incorporate additional form element functionalities using radio inputs

Recently, I created code that allows a user to duplicate form elements and add values by clicking on "add more". Everything is functioning properly except for the radio inputs. I am currently stuck on this issue. Does anyone have any suggestions on how I c ...

javascriptjqueryhtml

Angular 5 disregards subscription response data

Struggling with handling HttpClient get request responses in my Angular component. Despite having no compilation errors, I can't seem to access the response from the service. Take a look at how I'm calling the service method in my component: ...

angularrxjshttpclientsubscription

Express throwing module errors

I encountered an issue while attempting to expose a REST service in an electron app using expressJS. Following a tutorial, I added express and @types/express to the project. However, when trying to implement a "get" method and running the build with ng bui ...

javascripttypescriptexpressnpmelectron

A guide on exporting an Excel file with Spring Boot and Angular 2

To fulfill the requirements of my project, I am tasked with exporting customer data into an Excel file. Utilizing a table structure using Hibernate build. Here is my controller code: @RequestMapping(value="exporttoexcel", method= RequestMethod.GET, prod ...

javaangularspring-bootangular-ui-bootstrap

Can Puppeteer extract the complete HTML content of a webpage, including any shadow roots?

When using Puppeteer to navigate a webpage, I typically can retrieve the full HTML content as text with this code: let htmlContent = await page.evaluate( () => document.querySelector('body').innerHTML ); However, I am currently faced with ...

javascripthtmlnode.jspuppeteer

Tips for changing a "raw" DOM Event into a React SyntheticEvent

Currently, I am working with two separate libraries. The first library emits "raw" DOM events (lib.dom.d.ts), while the other library consumes React.SyntheticEvents. I am seeking advice on the most efficient method to transform the raw event into a Synthe ...

javascriptreactjstypescript

"Angular Google Maps module working perfectly on local environment but failing to render on live production site

My little application utilizes the official Angular Google Maps module. While it runs smoothly in my local setup, it simply displays a gray window in production. Upon inspecting the code, I can see that the map, marker, and info window are present, but not ...

angulargoogle-maps-api-3angular-google-maps

JavaScript: retrieving undefined value from a text element

My goal is to retrieve the text entered into each textbox by querying and looping through their ID tags. However, when I attempt to print what I have retrieved, it always displays "undefined". Seems like your post consists mostly of code: </h ...

javascripthtmlselectorelement

Using Angular in conjunction with Azure Durable Functions to implement a retry mechanism for HTTP responses

In my Angular 10 application, I am attempting to integrate Azure Functions. The key is to simplify the Azure function protocol by using a single Observable. Executing an Azure function requires the following steps: Initiate a POST request to the Azure fu ...

angularazurerxjsazure-functionsazure-durable-functions