Hey there! Currently, I have a UI built using Angular 5 and TypeScript. In one of my components, I have a reactive form with a select box form control in the view. What I'm trying to achieve is that whenever a different option is selected from the select box, it should display the chosen value. For this purpose, I have implemented a function called contactListChanged in my component class.
<select formControlName="contactList" [compareWith]="compareResource" (change)="contactListChanged($event)">
<option value="" disabled>{{ 'PLACEHOLDERS.CONTACT_LIST' | translate }}</option>
<option *ngFor="let contactList of contactLists" [ngValue]="contactList">{{ contactList.name }}</option>
</select>
In the component's TypeScript file:
contactListChanged($event){
let selectedValue = $event.target.value ;
console.log(selectedValue);// prints 1: Object
console.log(this.contactListControl.value); // prints Object {id: "1", name: "irish msisdn 1", total: 1000, displayName: "irish msisdn 2(1000)"}
}
The line console.log(selectedValue) displays the value as "2: Object". However, console.log(this.contactListControl.value) shows the correct value as Object {id: "2", name: "irish msisdn 2", total: 1200, displayName: "irish msisdn 2(1200)"}
Why does this happen? I expected console.log(selectedValue) to display the correct value, similar to console.log(this.contactListControl.value).
My goal is to use [ngValue] and retrieve the selected object in the contactListChanged method. How can I accomplish this?
Any help would be greatly appreciated!
Thank you.