I am working on a component that consists of 2 dropdowns. Below is the HTML code snippet for this component:
<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] = "!roomNumbers.length" [options]="roomNumbers" autoWidth="false" [style]="{'width':'100%'}" name="numberRoom" [autoWidth]="true" [(ngModel)]="room.roomNumber"></p-dropdown>
</div>
The population of these dropdowns in typescript is as follows:
getRoomTypes(): void {
this._roomTypeService.getRoomTypesDropdownValues().subscribe(r => {
r.items.forEach((value) => {
this.roomTypes.push({label: value.name, value: value.id});
});
});
}
getRoomNumber(): void {
for (let i = 1; i <= 10; i++) {
this.roomNumbers.push({label: i.toString(), value: i});
}
}
After the dropdowns, I have an input field that needs to display the concatenated label of the selected options from both dropdowns.
Here is the input field:
<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 attempted to achieve this by using
(ngModelChange)="setRoomName(room.roomTypeId,room.roomNumber)"Can anyone guide me on how to correctly concatenate the labels from the dropdown options?