title: Reactive form validation treats default 'select' value of select input box as valid
body: <p>I have been struggling to validate a Reactive form with default "select" option to my select input box when there's no value selected. If a value is present in the form then I need to select the respective value.</p>
  
  <p>I am using reactive form and below is my code implementation:</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;select class="form-control" formControlName="environment" &gt;
      &lt;option disabled [value]="null"&gt;-- Select --&lt;/option&gt;
      &lt;option *ngFor="let ami of envs" [value]="ami.amiid"&gt;
          {{ami.name}}
      &lt;/option&gt;
  &lt;/select&gt;
  </code></pre>
  
  <pre class="lang-ts prettyprint-override"><code>this.onlineTestForm = this._fb.group({
              .
              .    
              environment: ['', Validators.required],
              .
              .         
          });
  
  //value is present in the model
  (&lt;FormControl&gt;this.onlineTestForm.controls['environment'])
             .setValue(this.model.environment, { onlySelf: true });
  
  //value is not present in model
  (&lt;FormControl&gt;this.onlineTestForm.controls['environment'])
             .setValue('null', { onlySelf: true });
  </code></pre>
  
  <p>Is there a better way to achieve the above?</p>