title: mat-select Not Working Properly
body: <p>The <code>mat-select</code> element is acting funny. See below.</p>
  
  <p><strong>Code</strong></p>
  
  <pre><code>&lt;mat-form-field&gt;
      &lt;input matInput placeholder="Name" #NameInput&gt;
  &lt;/mat-form-field&gt;
  
  &lt;mat-select placeholder="How Many?"&gt;
      &lt;mat-option&gt;One&lt;/mat-option&gt;
      &lt;mat-option&gt;Two&lt;/mat-option&gt;
      &lt;mat-option&gt;Three&lt;/mat-option&gt;
      &lt;mat-option&gt;Four&lt;/mat-option&gt;
      &lt;mat-option&gt;Five&lt;/mat-option&gt;
  &lt;/mat-select&gt;
  </code></pre>
  
  <p><strong>Results</strong></p>
  
  <p><a href="https://i.stack.imgur.com/3qOni.png" rel="noreferrer"><img src="https://i.stack.imgur.com/3qOni.png" alt="mat-select element acting weird"></a></p>
  
  <p>Wrapping the <code>mat-select</code> in a <code>mat-form-field</code> gives me the following error:</p>
  
  <blockquote>
    <p>mat-form-field must contain a MatFormFieldControl. Did you forget to
    add matInput to the native input or textarea element?</p>
  </blockquote>
  
  <p>However, including an <code>input</code> with <code>matInput</code> shows both the <code>input</code> and the <code>mat-select</code> together, making it look weird. Any way around this?</p>