angular: bug(forms) Initial select option set to null not working on IE/Edge

I can confirm that this issue still exists in all of IE, Edge and Safari. Works as expected in Chrome and Firefox. Our clients were confused because of this.

Currently using Angular 4.1.3 with reactive forms.

Can we re-open this issue please?

Why was this closed? I see it on chrome. Adding a disabled option first does not help and the form group is not valid even though something is selected by default.

As of 4.1.3 this is still broken in reactive forms on IE11. This also causes issues in the rare cases where a select tag only has one option. You can’t select the only option in the select tag.

Any progress on this? I still experience this issue in IE11.

Same for me on IE11

This issue was reported over 2 years ago and it has yet to be fixed. I think it should be given some priority to have it fixed. Personally, I would appreciate it if fixing existing issues was given higher priority than adding new features.

The probles still exists with ReactiveForms In Edge and Safari the first item of select is shows as selected, but the form value for select is actually empty. In Chrome everythink is ok. https://plnkr.co/edit/Zmz7NNRgV7oYUXkHf2m8?p=preview

Please, reopen this issue

This also affects the current Extended Support Release (ESR) of Mozilla Firefox (version 45)!

Mozilla will offer an Extended Support Release (ESR) based on an official release of Firefox for desktop for use by organizations including schools, universities, businesses and others who need extended support for mass deployments.

using angular: 2.1.0

As a workaround I hook into the ngAfterViewInit lifecycle event and call

$('#my-select').prop('selectedIndex', -1); // Using jQuery to unset the selected index.

Repeat, when changing the model for the select options afterwards

setTimeout(
  () => {
    $('#my-select').prop('selectedIndex', -1);
  }
);

This temporarily fixes the issue for me on FF ESR 45, Edge 14, IE 11.

Related #5206

@monica7l Yes, I did the same way to get my APP working well in Edge and Safari, but adding the default disabled option is not what Ireally want, because I prefer placeholder, but no one more option

As a quick hack, i did this. In my case when [ngModel] sets to “undefined”, i have as first option <option value=“undefined” disabled selected></option> and it worked well for me.

Tested on Edge/IE11 Using Angular 2.2.1

We worked around the issue by executing a selectedIndex = ‘-1’ on ngOnInit()

using IE 11 , angular 4

. <select class="form-control" id="SHospital" formControlName="SelectHospital"> <optgroup label="Choose..."> <option value="All Hospitals">All Hospitals</option> <option value="2">Two</option> <option value="3">Three</option> </optgroup> </select>

initial option group label doesn’t automatically load. If I remove "formControlName " it will load.

@patrickracicot I had tried and I see with Chrome and Firefox work good, Edge/IE and Safari have problem

Now, this problem with safari and IE with angular2 2.0.1 final release. Any solution for this ?

@patrickracicot then let’s hope it will be fixed in RC6 !

@gnujeremie Unfortunately this option is not always viable. In a case where you don’t want to permit a user the selection of an empty value once he has actually chosen one in the first place.