Angular 4 mat form fields with select mat

Question

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'm sure my import is also correct, but when I try to use mat-select, I get the following error:

Error: md-form field must contain MdFormFieldControl. You forgot to add mdInput to your own ...

My HTML code is as follows:

<mat-form-field class="full-width">
  <mat-select name="sampleType" formControlName="sampleTypeCtrl" 
   placeholder="Sample Type" required>
     <mat-option *ngFor="let sample of samples" [value]="sample.value">
       {{ sample.viewValue }}
     </mat-option>
  </mat-select>
</mat-form-field>

My view module, which contains this component and is imported into my main app.module.ts file, is as follows:

...
import { MatFormFieldModule, MatInputModule, MatSelectModule } from 
   '@angular/material';
...

@NgModule({
  imports: [
    ...
    MatInputModule,
    MatFormFieldModule,
    MatSelectModule,
    ...
  ],
})
export class ViewModule {}

My main app.module.ts file includes both ViewModule and NoConflictStyleCompatibilityMode import and looks like this:

...
import { ViewModule } from './view/view.module';
import { NoConflictStyleCompatibilityMode } from '@angular/material';
...
@NgModule({
  ...
  imports: [
    ViewModule,
    NoConflictStyleCompatibilityMode
  ],
  ...
})
export class AppModule { }

mat-form mat-select, , , mat-input ( mat-form-field) mat-select. MatSelectModule, MatFormFieldModule, . npm angular 2, , . ? , stackoverflow, , , .

mat-select
mat-form MatFormFieldControl

Answer 1

matInput mat-select ( ):

<mat-form-field>
    <mat-select matInput name="mySelect">
        <mat-option>
            ...
        </mat-option>
    </mat-select>
</mat-form-field>

.

UPD.: plnkr https://plnkr.co/edit/9Yz6xkcVMCMpRhP3Qse9

Answer 2

angular , 5,

Answer 3

I ran into a similar problem, and from this issue on github, I realized that ngIf should not be on a matte choice.

This might help someone:

Make sure you don't have ngIf when choosing a mat.