Angular 2 - Setting selected value on dropdown list

Question

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     But the dropdown still appears empty     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      lt div gt           lt label gt Colour lt  label gt           lt div gt               lt select   ngModel    car colour   gt                   lt option  ngFor  let x of colours   value   x id   selected   car color id    x id  gt   x name   lt  option gt               lt  select gt           lt  div gt       lt  div gt    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 lt Colour gt          ngOnInit    void            this colours   Array lt Colour gt             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

User · Answer

lt div class  quot col-md-3 col-sm-3 quot  gt                           lt label gt Outlet Ready lt  label gt                               lt div gt                                   lt select class  quot form-control quot                                           ngModel    quot selectedColor quot  gt                                  lt option  ngFor  quot let x of colours quot   ngValue   quot x quot   gt   x name   lt  option gt                                   lt  select gt                               lt  div gt                           lt  div gt   Compoent ts 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     colours  Array lt Colour gt     ngOnInit    void        this colours   Array lt Colour gt         this colours push new Colour -1   Please select         this colours push new Colour 1   Green         this colours push new Colour 2   Pink          this car   new Car        this car colour   this colours 1                   export class Car       colour Colour      export class Colour      constructor id number  name string        this id id      this name name          id number    name string   this is working fine

User · Answer

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

User · Answer

If your values are coming from the database  show selected values in that way    lt div class  form-group  gt       lt label for  status  gt Status lt  label gt       lt select class  form-control  name  status    ngModel    category status  gt          lt option  value   1   selected   category status   1  gt Active lt  option gt          lt option  value   0   selected   category status   0  gt In Active lt  option gt       lt  select gt   lt  div gt

User · Answer

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   lt div class  quot form-group quot  gt       lt label for  quot status quot  gt Status lt  label gt       lt select class  quot form-control quot  name  quot status quot    ngModel    quot category status quot  gt          lt option  value   quot 1 quot   selected   quot category status   1 quot  gt Active lt  option gt          lt option  value   quot 0 quot   selected   quot category status   0 quot  gt In Active lt  option gt       lt  select gt   lt  div gt

User · Answer

I would like to add   ngValue        support strings  but you need to add simple quotes if it represents a number  like  ngValue           It was to complement the G  nter Z  chbauer answer

User · Answer

Actually if You use ReactiveForms i found this way much easier to acomplish   If the form is defined like this   public formName   new FormGroup        fieldName  new FormControl  test     where  test is field default value         Then thats the way You can change its value   this formName controls fieldName setValue  test 2      setting field value to  test 2

User · Answer

This works for me    lt select formControlName  preferredBankAccountId  class  form-control  value    gt       lt option value    gt Please select lt  option gt           lt option  ngFor  let item of societyAccountDtos   value   item societyAccountId   gt   item nickName   lt  option gt   lt  select gt    Not sure this is valid or not  correct me if it s wrong  Correct me if this should not be like this

User · Answer

In my case i was returning string value from my api eg   quot 35 quot  and in my HTML i was using         lt mat-select placeholder  quot State  quot  formControlName  quot states quot    ngModel    quot selectedState quot   ngModelChange   quot getDistricts   quot  gt               lt mat-option  ngFor  quot let state of formInputs states quot   value   quot state stateId quot  gt                   state stateName                 lt  mat-option gt             lt  mat-select gt   Like others mentioned in the comment value will only accept integer values i guess  So what I did is I converted my string value to integer in my component class like below           var x   user state            var y  number    x   and then assigned it like   this EditProfileForm get  states   setValue y    Now the correct values is getting setting by default

User · Answer

Thanks for the tip G  nter  it got me moving in the right direction  There was a mis-matched spelling of  color  in my solution which was causing issues and I needed to use  ngValue  not  value  in the template html    Here is the complete solution using objects for the ngModel and select list options and avoiding use of the  selected  attribute   I have updated the Plunker to show the full working solution  https   plnkr co edit yIVEeLK7PUY4VQFrR48g p preview  Component template    lt div gt           lt label gt Colour lt  label gt           lt div  ngIf  car    null  gt               lt select   ngModel    car colour  gt                   lt option  ngFor  let x of colours   ngValue   x   gt   x name   lt  option gt               lt  select gt           lt  div gt       lt  div gt    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      colours  Array lt Colour gt        ngOnInit    void            this colours   Array lt Colour gt             this colours push new Colour -1   Please select             this colours push new Colour 1   Green             this colours push new Colour 2   Pink              this car   new Car            this car colour   this colours 1                    export class Car         colour Colour     export class Colour       constructor id number  name string            this id id          this name name             id number      name string

User · Answer

This Example solution is for reactive form   lt select formControlName  quot preferredBankAccountId quot  class  quot form-control quot  gt                   lt option  ngFor  quot let item of societyAccountDtos quot   value   quot item societyAccountId quot   gt                      item nickName                    lt  option gt                 lt  select gt   In the Component  this formGroup patchValue           preferredBankAccountId   object id to be pre selected            You can also give this value where you initialize your formGroup or later depending on your requirement  You can do this by using   ngModel   binding also where you don t have to initialize your formControl  Example with   ngModel   binding   lt select   ngModel    quot matchedCity quot  formControlName  quot city quot  class  quot form-control input-sm quot  gt                     lt option  ngFor  quot let city of cities quot   ngValue   quot city quot  gt   city cityName   lt  option gt                   lt  select gt   Here  matchedCity is one of object within cities

[typescript] Angular 2 - Setting selected value on dropdown list

Examples related to typescript

Examples related to angular

Examples related to angular2-forms