What is the best way to fetch the chosen item in an Angular select dropdown

Question

What is the best way to fetch the chosen item in an Angular select dropdown

I am working on a dropdown that populates with items of type ObjectA.

item.component.html:

<label>items list:
    <select formControlName="itemsCtl" (change)="onChange()">
        <option *ngFor="let item of itemList" [value]="item">{{item.label}}</option>
    </select>
</label>

When using reactive forms, I require the selected item. After researching extensively, I found suitable code for my requirement:

item.component.ts:

selectedItem : ObjectA;
...
onChange()
{  
    this.selectedItem = this.factorForm.controls['itemsCtl'].value;
}

However, upon retrieving the selected item, it is displayed as [object object] instead of as ObjectA. How can I ensure that the selected item is returned as ObjectA, or how can I convert [object object] to ObjectA?

This project is built using Angular version 5.0.1.

angular typescript angular-forms

Answer 1

Answer №1

Consider implementing the ngValue directive instead of using the value attribute.

    <option  *ngFor="let item of itemList"  [ngValue]="item"   >{{item.label}}</option>

Answer 2

Consider implementing the ngValue directive instead of using the value attribute.

    <option  *ngFor="let item of itemList"  [ngValue]="item"   >{{item.label}}</option>

Answer 3

Answer №2

It seems like there may be some uncertainty regarding the structure of your (itemList) or your (ObjectA).

In order to provide a more accurate solution, I would require additional information.

If your current method is not yielding desired results, you can attempt the following approach:

<label>items list:
<select formControlName="itemsCtl" (change)="onChange()" [(ngModel)]="someVar">
    <option *ngFor="let item of itemList" [value]="item">{{item.label}}</option>
</select>

Next, in your function:

selectedItem : ObjectA;
someVar: any;
...
onChange()
{  
    this.selectedItem = this.factorForm.controls['itemsCtl'].value;
    console.log(someVar);
}

Observe the output generated by this code snippet.

I hope that these suggestions prove helpful!

Answer 4

It seems like there may be some uncertainty regarding the structure of your (itemList) or your (ObjectA).

In order to provide a more accurate solution, I would require additional information.

If your current method is not yielding desired results, you can attempt the following approach:

<label>items list:
<select formControlName="itemsCtl" (change)="onChange()" [(ngModel)]="someVar">
    <option *ngFor="let item of itemList" [value]="item">{{item.label}}</option>
</select>

Next, in your function:

selectedItem : ObjectA;
someVar: any;
...
onChange()
{  
    this.selectedItem = this.factorForm.controls['itemsCtl'].value;
    console.log(someVar);
}

Observe the output generated by this code snippet.

I hope that these suggestions prove helpful!

What is the best way to fetch the chosen item in an Angular select dropdown

Answer №1

Answer №2

Similar questions

Generating a custom type in Typescript based on specific array keys

Working with Vue class-based components in TypeScript and setting props

Automatically closing the AppDateTimePicker modal in Vuexy theme after selecting a date

What makes TS unsafe when using unary arithmetic operations, while remaining safe in binary operations?

Sending information to custom components in Angular2 Smart Tables

React TypeScript throws an error when a Socket.IO object is passed to a child component and appears as undefined

Attempting to grasp Angular through an online tutorial - currently facing challenges with understanding ViewContainerRef and TemplateRef

utilizing props to create a navigational link

Tips for executing forEach on a promise?

Error: The 'update' property cannot be found on the specified type

Uncertainty surrounding refinement in Typescript

Is it possible for a React selector to retrieve a particular data type?

Importing from source code instead of a file in TypeScript: How to do it

Custom generator designed for projects with tailored ng/nrwl versions

Showing a notification in Angular 4 following a background request

Exploring Aurelia's Integration with ASP.NET Core Models

Tips for sorting through the properties of the Record<K, T>:

Function is not triggered in React component

Utilizing Regular Expressions in Angular 4 by Referencing Patterns Stored in an Object

Unable to resolve host name for registry.npmjs.org on port 80