title: Angular 4 mat-form-field with mat-select
body: <p>So, I am having problems using mat-select with mat-form-field . Using mat-form-field with mat-input is not a problem, and I am fairly sure my imports are correct as well, yet I receive the following error when trying to use mat-select:</p>
  
  <blockquote>
    <p>Error: md-form-field must contain a MdFormFieldControl. Did you forget to add mdInput to the native...</p>
  </blockquote>
  
  <p>My HTML code is the following:</p>
  
  <pre><code>&lt;mat-form-field class="full-width"&gt;
    &lt;mat-select name="sampleType" formControlName="sampleTypeCtrl" 
     placeholder="Sample Type" required&gt;
       &lt;mat-option *ngFor="let sample of samples" [value]="sample.value"&gt;
         {{ sample.viewValue }}
       &lt;/mat-option&gt;
    &lt;/mat-select&gt;
  &lt;/mat-form-field&gt;
  </code></pre>
  
  <p>My view module that contains this component and is imported into my main app.module.ts file is the following:</p>
  
  <pre><code>...
  import { MatFormFieldModule, MatInputModule, MatSelectModule } from 
     '@angular/material';
  ...
  
  @NgModule({
    imports: [
      ...
      MatInputModule,
      MatFormFieldModule,
      MatSelectModule,
      ...
    ],
  })
  export class ViewModule {}
  </code></pre>
  
  <p>My main app.module.ts file includes both the ViewModule and the NoConflictStyleCompatibilityMode imports and looks like the following:</p>
  
  <pre><code>...
  import { ViewModule } from './view/view.module';
  import { NoConflictStyleCompatibilityMode } from '@angular/material';
  ...
  @NgModule({
    ...
    imports: [
      ViewModule,
      NoConflictStyleCompatibilityMode
    ],
    ...
  })
  export class AppModule { }
  </code></pre>
  
  <p>When I remove the mat-form-field from around the mat-select, the error goes away, but I get inconsistencies with how mat-input (using mat-form-field) and mat-select are styled. I am importing both the MatSelectModule and MatFormFieldModule, yet I get this error. I have also updated my npm for angular material 2 so that it has the latest and greatest, but still nothing. What am I overlooking? I have seen this type of problem addressed in recent stackoverflows, but each solution I have already tried without luck.</p>
  
  <p><a href="https://stackoverflow.com/questions/46957415/mat-select-not-working-properly">mat-select Not Working Properly</a><br />
  <a href="https://stackoverflow.com/questions/46705101/mat-form-field-must-contain-a-matformfieldcontrol">mat-form-field must contain a MatFormFieldControl</a></p>