Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Angular 2 - Setting selected value on dropdown list

I have run into an issue in pre-selecting values on a dropdown list in Angular 2.

I set an array of colours in the component which I bind successfully to the dropdown list. The issue I'm experiencing is with pre-selecting a value on page init.

The line [selected]="car.color.id == x.id" should be selecting the value which has been set on the car model this.car.color = new Colour(-1,''); however this only works when I set the car colour id to the last item in the list (in this case black) this.car.color = new Colour(4,'');

I am using the latest version of Angular (rc3) and have experienced the same issues in rc1 and rc2.

Here is a plunker showing the issue.

https://plnkr.co/edit/yIVEeLK7PUY4VQFrR48g?p=preview

Another odd aspect is that when looking at the meta data Angular has set the selected value to true.

enter image description here

But the dropdown still appears empty.

enter image description here

It appears to be a seperate issue from these related questions.

Angular 2 Set begin value of select

Binding select element to object in Angular 2

How to use select/option/NgFor on an array of objects in Angular2

Regards

Steve

Component template

   <div>         <label>Colour</label>         <div>             <select [(ngModel)]="car.colour"">                 <option *ngFor="let x of colours" [value]="x.id" [selected]="car.color.id == x.id">{{x.name}}</option>             </select>         </div>     </div> 

Component

import { Component, OnInit } from '@angular/core'; import {AbstractControl,FORM_DIRECTIVES } from '@angular/common';  @Component({     selector:'dropdown',     templateUrl:'app/components/dropdown/dropdown.component.html',     directives:[FORM_DIRECTIVES] }) export class DropdownComponent implements OnInit {     car:Car = new Car();     colours = Array<Colour>();      ngOnInit(): void {          this.colours = Array<Colour>();         this.colours.push(new Colour(-1, 'Please select'));         this.colours.push(new Colour(1, 'Green'));         this.colours.push(new Colour(2, 'Pink'));         this.colours.push(new Colour(3, 'Orange'));         this.colours.push(new Colour(4, 'Black'));          this.car = new Car();         this.car.color = new Colour(-1,'');             } }  export class Car {     color:Colour; }  export class Colour {     constructor(id:number, name:string) {         this.id=id;         this.name=name;     }      id:number;     name:string; } 
like image 933
CountZero Avatar asked Jun 22 '16 12:06

CountZero


People also ask

How do I get the value of the selected dropdown menu item with angular?

Angular has another way to get the selected value in the dropdown using the power of ngModel and two-way data binding. The ngModel is part of the forms module. We need to import it into the NgModule list in the app. module , which will be available in our app.

How do you bind a selected item in a dropdown list in to textbox and edit?

You can bind a selected value from the drop-down list using the ngModel and edit it inside the text box or numeric input box. The selected item text and value can be got using the change event of the drop-down list through the args. itemData.


2 Answers

Setting car.colour to the value you want to have initially selected usually works.

When car.colour is set, you can remove [selected]="car.color.id == x.id".

If the value is not a string [ngValue]="..." must be used. [value]="..." only supports strings.

like image 175
Günter Zöchbauer Avatar answered Oct 19 '22 18:10

Günter Zöchbauer


Angular 2 simple dropdown selected value

It may help someone as I need to only show selected value, don't need to declare something in component and etc.

If your status is coming from the database then you can show selected value this way.

<div class="form-group">     <label for="status">Status</label>     <select class="form-control" name="status" [(ngModel)]="category.status">        <option [value]="1" [selected]="category.status ==1">Active</option>        <option [value]="0" [selected]="category.status ==0">In Active</option>     </select> </div> 
like image 28
Muhammad Shahzad Avatar answered Oct 19 '22 19:10

Muhammad Shahzad