Combining Two Dropdown Selections to Create a Unique Name using Angular

I am facing a challenge with 2 dropdown values and input fields, where I want to combine the selected values from the dropdowns into the input field.

Below is the HTML code snippet:

<div class="form-group">
  <label>{{l("RoomType")}}</label>
  <p-dropdown [disabled]="!roomTypes.length" [options]="roomTypes" autoWidth="false" [style]="{'width':'100%'}"
    name="roomTypes" [autoWidth]="true" [(ngModel)]="room.roomTypeId"></p-dropdown>
</div>
<div class="form-group">
  <label>{{l("RoomNumber")}}</label>
  <p-dropdown [disabled]="!roomNumber.length" [options]="roomNumber" autoWidth="false" [style]="{'width':'100%'}"
    name="roomTypes" [autoWidth]="true" [(ngModel)]="room.roomNumber"></p-dropdown>
</div>
<div class="form-group">
  <label>{{l("RoomName")}}</label>
  <input #roomNameInput="ngModel" class="form-control" type="text" name="roomName" [(ngModel)]="room.roomName"
    maxlength="32">
</div>

I am looking for a way to automatically populate the value of RoomName by combining the selected values from RoomType and RoomNumber when they are chosen. Any ideas on how to achieve this?

javascriptangulartypescript

Answer №1

To combine values, use the ngModelChangeto function. Refer to the following code snippet.

HTML

<div class="form-group">
  <label>{{l("RoomType")}}</label>
  <p-dropdown [disabled]="!roomTypes.length" [options]="roomTypes" autoWidth="false" [style]="{'width':'100%'}"
    name="roomTypes" [autoWidth]="true" [(ngModel)]="room.roomTypeId" (ngModelChange)="setRoomName(room.roomTypeId,room.roomNumber)"></p-dropdown>
</div>
<div class="form-group">
  <label>{{l("RoomNumber")}}</label>
  <p-dropdown [disabled]="!roomNumber.length" [options]="roomNumber" autoWidth="false" [style]="{'width':'100%'}"
    name="roomTypes" [autoWidth]="true" [(ngModel)]="room.roomNumber" (ngModelChange)="setRoomName(room.roomTypeId,room.roomNumber)"></p-dropdown>
</div>
<div class="form-group">
  <label>{{l("RoomName")}}</label>
  <input #roomNameInput="ngModel" class="form-control" type="text" name="roomName" [(ngModel)]="room.roomName"
    maxlength="32">
</div>

Typescript file

setRoomName(id,number){
 this.roomName=id + ' ' + number;
}

Added a space between the id and number for the Room Name!

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

What steps should I follow to transform SRM into L*a*b* values using the E-308 algorithm?

I'm grappling with the application of ASTM E-308 to SRM measurements in beer. The project I'm working on necessitates a reliable conversion from SRM to RGB (or sRGB) through the Lab* route. It's clear that each site I visit for beer recipe c ...

javascriptcolors

Having trouble setting the `variant='dense'` for material-ui Toolbar – it remains at a height of 64px no matter what

Implemented a hello world AppBar/Toolbar with the variant='dense' style. import React from 'react'; import ReactDOM from 'react-dom'; import './index.css'; import registerServiceWorker from './registerServiceWo ...

javascriptreactjsmaterial-ui

Error: The function `this.xhr_.upload.addEventListener` is not supported in Firebase Storage

Having some trouble with file uploads. Small files work fine, but when it comes to larger ones I keep getting this error: this.xhr_.upload.addEventListener is not a function. I'm currently using vue.js along with the firebase 6.1.0 npm package. Th ...

javascriptfirebasevue.jsfirebase-storage

Tips on how to utilize JavaScript to display data on a page without the need for refreshing, updating every 2-5

Could you please assist me? I am working on a CRUD application and have created a function called loaddata();. My issue is that when another user adds data, it should be displayed in my table without the need to refresh. Is there a way to achieve this? fun ...

javascriptphpjquery

In MUI v5 React, the scroll bar vanishes from view when the drawer is open

Currently, I am working on developing a responsive drawer in React using mui v5. In the set-up, the minimum width of the drawer is defined as 600px when it expands to full width. However, an issue arises when the screen exceeds 600px - at this point, the d ...

javascriptcssreactjsmaterial-uiscrollbar

Strategies for efficiently retrieving delayed ajax data to display in a Rails view

When working with an API action that takes around 10 seconds to retrieve data, I typically use an alert to ensure the data is successfully fetched. However, my main concern is how to effectively transmit this data to a Rails view for displaying purposes. B ...

javascriptruby-on-railsajaxview

React-file-viewer shrinks any document to a compact size

I have been searching extensively for information on how to adjust file sizing in react-file-viewer without any success. My objective is to utilize the react-file-viewer to allow users to click on a filename hyperlink and open the file (be it an image, do ...

javascriptreactjstypescriptreact-reduxreact-hooks

Changing the color of a menu item in Bootstrap when a modal window is closed: A guide

I am implementing Twitter Bootstrap and attempting to launch a modal popup by clicking on a menu item. Below is the code snippet: <div class="navbar navbar-fixed-bottom"> <div class="navbar-inner"> <ul class="nav pull-right"> ...

javascriptcsstwitter-bootstrap

The lack of definition for e.PreventDefault causes an error

In my code, I have a registerAjax(e) function: function registerAjax(e) { e.preventDefault(); let userData = { username: $("#username").val(), password: $("#password").val(), }; $.ajax({ method: "POST", url: kinveyBaseUrl + "user/" + kinve ...

javascriptjqueryajax

Adding data to an array using V-Bind in VueJS

I am currently working on a project that involves retrieving data from multiple devices and displaying the data on a chart in real-time. The goal is to update the chart every second as new data comes in. Below is the code snippet I have been using: index ...

javascriptvue.jsreal-time-data

Having trouble accessing the theme in a styled component with @emotion/styled

https://i.stack.imgur.com/zHLON.png I've been using @emotion/react for theming and successfully injected the theme into it. I can access the theme using useTheme within components, but I'm facing some difficulties in accessing the theme within s ...

reactjstypescriptmaterial-uistyled-componentsemotion

What is the proper way to invoke express-validator within a middleware function?

I am facing a challenge in invoking the express-validator function from a middleware function. Although I can see that the execution is happening within the express-validator, validation does not seem to occur. The code snippet is provided below: router.g ...

javascriptnode.jsexpressmiddlewareexpress-validator

Troubleshooting issue with Vue3 - TS Custom State Management

Issue: I am facing a challenge in transferring data between two separate components - the main component and another component. Despite attempting to implement reactive State Management based on Vue documentation, the object's value remains unchanged ...

typescriptvue.jsvuejs3

Problem with Pinia: nested array in an object

My unique store located within a vue3 application, contains an object called currentReservation with a property named pricings which is an array. Each pricing includes an id and quantity. When I add a new pricing, it is added to both the store and compone ...

javascriptvue.jsvuejs3pinia

Calculate the total value of a specific field within an array of objects

When pulling data from a csv file and assigning it to an object array named SmartPostShipments [], calculating the total number of elements in the array using the .length property is straightforward. However, I also need to calculate the sum of each field ...

javascriptnode.js

Saving a picture to a document after retrieving it through an HTTP request in a Node application

I seem to be overlooking something obvious, but here's the issue - I am receiving a PNG from a Mapbox call with the intention of saving it to the file system and then serving it to the client. I have successfully made the call, received raw data as a ...

javascripthttpexpresspngfs

A guide on seamlessly incorporating FlotJs functionalities into a ReactJs application

Having trouble integrating Flot charts into React due to a '$.plot' is not a function error. Here's the code I'm using: Script tags Index.html <script src="dist/libs/js/jquery.min.js"></script> <script src="dist/libs/js ...

javascriptjqueryreactjsflot

What is the method for specifying the content type when generating a signed URL for an object in AWS S3?

I am trying to generate a signed URL with a custom content-type, but I am encountering an issue when attempting the following: s3.getSignedUrl('getObject', {Bucket: AWS_BUCKET_NAME, Key: 'myObjectsKey', ContentType: 'image/png&apos ...

javascriptnode.jsamazon-web-servicesamazon-s3

Prevent title flickering in Android using Ionic

I am attempting to create a tab content page using the "standard" method recommended by the ionic template example. However, I have noticed that when switching between tabs on Android, the view title flickers. This issue is not present on iOS or desktop b ...

javascriptangularjscordovaionic-framework

Display a confirmation dialog using AngularConfirm after a function in AngularJS has finished executing

Trying to figure out how to update the $ngConfirm box after a function is done. When submit is clicked, a spinning cog appears: https://i.sstatic.net/lxwrH.png $scope.inProgress = function(){ $ngConfirm({ theme: 'modern', i ...

javascriptjqueryangularjsnode.js