Html select element option disabled microsoft edge

Question

So i have the following element:

<div class="input-field col s12">
   <select [(ngModel)]="view.frequency" >
      <option value="" disabled selected>Vælg hyppighed</option>
      <option [value]="1">Aldrig</option>
      <option [value]="2">Sjældent</option>
      <option [value]="3">En gang imellem</option>
      <option [value]="4">Ofte</option>
      <option [value]="5">Altid</option>
   </select>
   <label>Vælg hyppighed</label>
</div>

Now on chrome this produces the following result:

however on edge it seems to ignore the disabled option and sets the default to the first value Aldrig:

Can anyone tell me whats going on here?

Sounds like a problem with Angular, since [the same code without the `ngModel` stuff works in Edge](https://jsfiddle.net/tcmrp8md/) (from [@Gambit](https://stackoverflow.com/users/470717/gambit)'s answer on [default select option as blank](https://stackoverflow.com/a/23638053/215552)) — Heretic Monkey, Feb 12 '19 at 21:29

score 2 · Accepted Answer · edited Feb 12 '19 at 21:23

Remove selected in option value you used disabled and selected only use disable then you get value 1 option

   <div class="input-field col s12">
      <select [(ngModel)]="view.frequency" >
          <option value="" disabled>Vælg hyppighed</option>
          <option [value]="1">Aldrig</option>
          <option [value]="2">Sjældent</option>
          <option [value]="3">En gang imellem</option>
          <option [value]="4">Ofte</option>
          <option [value]="5">Altid</option>
      </select>
      <label>Vælg hyppighed</label>
  </div>

Html select element option disabled microsoft edge

1 Answers1