title: How to handle Angular 5 select binding to a null value
body: <p>I have a reactive form with a select</p>
  
  <pre><code>&lt;select [(ngModel)]="user.positionId" name="positionId" class="custom-select form-control form-control-sm" required
          formControlName="positionId"
          [ngClass]="{
          'is-invalid': positionId.invalid &amp;&amp; (positionId.dirty || positionId.touched),
          'is-valid': positionId.valid &amp;&amp; (positionId.dirty || positionId.touched)
          }"&gt;         
      &lt;option value=""&gt;--Select--&lt;/option&gt;
      &lt;option *ngFor="let position of user.positionSelectList" value="{{position.value}}"&gt;
          {{position.text}}
      &lt;/option&gt;
  &lt;/select&gt;
  </code></pre>
  
  <p>It gets passed positionId which is a nullable number</p>
  
  <pre><code>export class User{
      id: string;
      userName: string;
      positionId?: number;
  }
  </code></pre>
  
  <p>The above works when I pass a number value as positionId.</p>
  
  <p>However when it gets passed a null value then the default option of "--Select--" is not selected but an additional blank option appears above it.</p>
  
  <p>What I have tried.</p>
  
  <pre><code> &lt;option value=null&gt;--Select--&lt;/option&gt;    
  </code></pre>
  
  <p>and</p>
  
  <pre><code> &lt;option value=udefined&gt;--Select--&lt;/option&gt;
  </code></pre>
  
  <p>but this gives the same result of "--Select--" not selected</p>
  
  <p>I do not wish to set hardcoded  number values a fixed number e.g. -1 as I need the required validation to kick in which requires a blank value if not selected.</p>