1

I am facing strange issue on IE 9/10. Two way binding works for all html elements except dropdown. Values do not get selected on the dropdown even if the value exists in the dropdown.

Here is the sample code.

HTML

<select [(ngModel)]="model.city" id="city">
  <option value="Lahore">Lahore</option>
  <option value="Karachi">Karachi</option>
</select>

TS (Angular 2)

this.model.city="Karachi";

Two way binding does not work for the above condition in IE.

I have included all shims that require for the IE but still it's not getting selected.

<script src="node_modules/es6-shim/es6-shim.min.js"></script>
<script src="node_modules/angular2/es6/dev/src/testing/shims_for_IE.js"></script>
<script src="node_modules/angular2/bundles/angular2-polyfills.js"></script>
Waqas Ahmed
  • 473
  • 5
  • 21

2 Answers2

0

This is a known issue

You can work around by adding the SelectControlValueAccessor from the linked PR manually until it is provided by Angular by default.

See also Selects' events in Angular2 and Angular2 access a select event change within the component for other workarounds.

Community
  • 1
  • 1
Günter Zöchbauer
  • 623,577
  • 216
  • 2,003
  • 1,567
  • The linked issues are marked as resolved. But I have still the problem with IE on latest version of Angular RC5. – Johannes Aug 23 '16 at 20:58
0

HTML

 <select class="classic" [(ngModel)]="city" id="selectoption">
          <option *ngFor="#city of cityValues">{{city}}</option>
  </select>

TS(Angular2)

 public cityValues:Array<any>;
  public city:any

  //Add below line in constructor

  this.cityValues=["Lahore","Karachi"];

 //get the selected value using javascript

 var getSelectedId= document.getElementById('selectoption');
 var getSelectedValue=getSelectedId.options[getSelectedId.selectedIndex].text;
this.city=getSelectedValue;

*Note: Above js code shown error when you type.It gets the value on run time.

jeeva
  • 396
  • 6
  • 22