Get id and value from selected Dropdown - html

Question

i need id and value from selected dropdown. i tried things but not getting id, only value is coming. how do i get both id and value?
below is my code
.html
<div class="form-group">
<label>Item</label>
<select id='itemCode' name="" class="form-control">
<option value="" disabled selected>Choose Item</option>
<option *ngFor="let itemValue of itemslistvalue"
[ngValue]="{id: itemValue.itemCode, name: itemValue.itemName}">
{{itemValue.itemName}}
</option>
</select>
</div>
<div class="form-group"><br>
<button type="button" (click)="add()" style=" margin-left:10px;"></button>
</div>
.TS
add() {
var itemName = (<HTMLInputElement>document.getElementById('')).value;
var itemCode = (<HTMLInputElement>document.getElementById('')).value;
if (itemName !== null && itemName !== '' && itemCode !== null && itemCode !== '') {
this.newDynamic = { itemCode: itemCode, ItemName: itemName };
console.log(this.newDynamic);
this.dynamicArray.push(this.newDynamic);
return true;
}
}

Answer 1

just use a variable and ngModel
//In .ts
item:any=null;
<select id='itemCode' [(ngModel)]="item" name="" class="form-control">
<!--see that by defect is [ngValue]="null"-->
<option [ngValue]="null" disabled hidden>Choose Item</option>
...
</select>
And you has stored in item the value
You can call to change if it's necesary separate the [(ngModel)]
<select id='itemCode' [ngModel]="item"
(ngModelChange)="item=$event;doSomething($event)" name="" class="form-control">
...
</select>
//in your .ts
doSomething(item:any){
console.log(item);
}
If you don't want store the variable, use a template reference
<select #itemId id='itemCode' (change)="doSomething(itemId.value)"
name="" class="form-control">
...
</select>
If you use a template reference variable, you only can get the "value" of the select (in this case only the name)
<select #itemId id='itemCode' (change)="doSomething(itemId.value)"
name="" class="form-control">
...
</select>
doSomething(item:string){
console.log(item); //<--it's only the "name"
}
a stackblitz
the referecences:
about ngModel
about template reference variables
Update if we want to add a new element to the array, we declare two variables
newItemName:string=null;
newItemCode:string=null;
And in our .html
<input [(ngModel)]="newItemName">
<input [(ngModel)]="newItemName">
<button (click)="add()">Add</button>
Before the funciton add we need take account that when we use a select with store an object. WE can take two approach
1.-use a function compare, is only write some like
compareFn(a,b){
return !a && !b ||(a && b && a.itemCode==b.itemCode)
}
//or in abreviate mode:
compareFn=(a,b)=>!a && !b ||(a && b && a.itemCode==b.itemCode)
And in .html our select like:
<select [(ngModel)]="item" .. [compareWith]="compareFn">
2.- use the own elements of the array
<option *ngFor="let itemValue of itemslistvalue"
[ngValue]="itemValue">
{{itemValue.itemName}}
</option>
But in this case we need equal to an object of an array, e.g.
item=itemslistvalue[2]
Well, our function add, can use the values of the variables. this is the significance of two-binding-way, the value of the variable is in the input, when change the input the variable change
add() {
//see that inside a function you use "this"
if (this.newItemName && this.newItemCode) {
//if only want to add value if there no selecte any thing
//replace by
// if (this.newItemName && this.newItemCode && !this.item ) {..}
//try to find one with the same code
const item = this.itemslistvalue.find(
x => x.itemCode == +this.newItemCode
);
if (!item) { //if not find
//add
this.itemslistvalue.push({
itemCode: +this.newItemCode,
itemName: this.newItemName
});
//if we want that the select gets the value added
this.item = this.itemslistvalue[this.itemslistvalue.length - 1];
} else {
this.item = item; //just equal the element found
}
}
}

Answer 2

.Html
<div class="form-group">
<label>Item</label>
<select id='itemCode' name="" class="form-control">
<option value="" disabled selected>Choose Item</option>
<option *ngFor="let itemValue of itemslistvalue"
[ngValue]="{{{itemValue | json}}}">
{{itemValue.itemName}}
</option>
</select>
.Ts
add() {
var itemName = (<HTMLInputElement>document.getElementById('itemCode')).value;
console.log(itemName);
let myObj = JSON.parse(itemName);
itemCode = myObj.itemCode;
itemName = myObj.itemName;}