title: Angular 6 or 2+ form validation for select option not being validated
body: <p>angular version 6.x</p>
  
  <p>Html file:</p>
  
  <pre><code>&lt;select tabindex="4" class="selectoptn required" formControlName="invoice_type" 
            required [ngClass]="{ 'is-invalid': submitted &amp;&amp; f.invoice_type.errors }"&gt;
              &lt;option value="" [selected]="true" [ngValue]="undefined"&gt;Select an Invoice Type&lt;/option&gt;
              &lt;option value="pdf"&gt;PDF&lt;/option&gt;
              &lt;option value="brc"&gt;BRC&lt;/option&gt;
            &lt;/select&gt;
            &lt;div *ngIf="submitted &amp;&amp; f.invoice_type.errors" class="invalid-feedback"&gt;
              &lt;div *ngIf="f.invoice_type.errors.required"&gt;Invoice type is required&lt;/div&gt;
            &lt;/div&gt;
  </code></pre>
  
  <p>Related code in the Controller:</p>
  
  <pre><code>import { FormBuilder, FormGroup, Validators } from '@angular/forms';
  
  export class ProjectsAddComponent implements OnInit {
  
  constructor(private formBuilder: FormBuilder) {}
  
  this.projectForm = this.formBuilder.group({
    'invoice_type': ['', Validators.required]
  });
  }
  </code></pre>
  
  <p>issues:
   - On submit the error message does not show up.</p>
  
  <p>NOTE:
   - On submit all the other input are validated correctly
   - the inspector shows that the form element is invalid - <a href="http://prntscr.com/m97p2s" rel="nofollow noreferrer">http://prntscr.com/m97p2s</a></p>
  
  <p>Let me know if someone can find a way out.</p>