Angular 4 setting selected option in Dropdown

Question

several questions about this and diffrent answeres  But none of them realy answeres the question  So again   Setting default of a Dropdown select by value isnt working in my case  why  This is from the dynamic Form tutorial of Angular 4    lt select  id   question key   formControlName   question key  gt         lt option  ngFor  let opt of question options   value   opt key   selected   opt selected  gt   opt selected opt value   lt  option gt   lt  select gt    It doesnt select anything  Available options are    trueaaa falsebbb falseccc   But static true    lt option      selected   true  gt     lt  option gt    selects the last value  all true   It also works with a private variable boolvar   true and using it in  selected   boolvar   I dont understand the difference between the  opt  object and the class variable

User · Accepted Answer

If you want to select a value based on true / false use

[selected]="opt.selected == true"

 <option *ngFor="let opt of question.options" [value]="opt.key" [selected]="opt.selected == true">{{opt.selected+opt.value}}</option>

checkit out

Angular 2 - Setting selected value on dropdown list

User · Answer

To preselect an option when the form is initialized  the value of the select element must be set to an element attribute of the array you are iterating over and setting the value of option to  Which is the key attribute in this case  From your example   lt select  id   quot question key quot   formControlName   quot question key quot  gt     lt option  ngFor  quot let opt of question options quot   value   quot opt key quot  lt  option gt   lt  select gt   You are iterating over  options  to create the select options  So the value of select must be set to the key attribute of an item in options the one you want to display on initialization   This will display the default of select as the option whose value matches the value you set for select  You can achieve this by setting the value of the select element in the onInit method like so  ngOnInit    void      myForm   new FormGroup                     question key   new FormControl null                Get desired initial value to display on  lt select gt      desiredValue   question options find opt   gt  opt     initialValue      this myForm get question key  setValue desiredValue key

User · Answer

If you want to select a value as default  in your form builder give it a value     this myForm   this FB group       mySelect   this options 0  key      Validators here            Now in your HTML      lt form  formGroup   myForm  gt       lt select  formControlName   mySelect  gt           lt option  ngFor  let opt of options   value   opt key  gt ANY TEXT YOU WANT HERE lt  option gt       lt  select gt   lt  form gt    What my code does is giving your select a value  that is equal to the first value of your options list  This is how you select an option as default in Angular  selected is useless

User · Answer

Remove  selected  from option tag    lt option  ngFor  let opt of question options   value   opt key  gt      opt selected opt value    lt  option gt    And in your form builder add   key  this question options filter val   gt  val selected     true  map data   gt  data key

User · Answer

Lets see an example with Select control  binded to   scope cboPais  source   scope geoPaises  HTML   lt select    ng-model  cboPais      ng-options  item strPais for item in geoPaises     gt  lt  select gt    JavaScript   http get strUrl2  success function  response      if  response length  gt  0         scope geoPaises   response    Data source     nIndex   indexOfUnsortedArray response   iPais   default values iPais     array index of default value  using a custom function to search     if  nIndex  gt   0           scope cboPais   response nIndex     if index of array was found       else          scope cboPais   response 0     select the first element of array            scope geo getDepartamentos

User · Answer

Here is my example    lt div class  form-group  gt       lt label for  contactMethod  gt Contact method lt  label gt       lt select          name  contactMethod           id  contactMethod           class  form-control            ngModel    contact contactMethod  gt           lt option  ngFor  let method of contactMethods   value   method id  gt    method label    lt  option gt       lt  select gt   lt  div gt    And in component you must get values from select   contactMethods           id  1  label   Email           id  2  label   Phone        So  if you want select to have a default value selected  and proabbly you want that    contact         firstName   CFR       comment   No comment       subscribe  true      contactMethod  2    this id you ll send and get from backend

[javascript] Angular 4 setting selected option in Dropdown

Examples related to javascript

Examples related to angular