Angular 4 mat-form-field with mat-select

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 am fairly sure my imports are correct as well, yet I receive the following error when trying to use mat-select:

Error: md-form-field must contain a MdFormFieldControl. Did you forget to add mdInput to the native...

My HTML code is the following:

<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 that contains this component and is imported into my main app.module.ts file is the following:

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

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

My main app.module.ts file includes both the ViewModule and the NoConflictStyleCompatibilityMode imports and looks like the following:

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

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.

mat-select Not Working Properly
mat-form-field must contain a MatFormFieldControl

Maenad

These modules MatInputModule, MatFormFieldModule, MatSelectModule are present in ViewModule but they are not a part of AppModule. you should export the material modules from ViewModule – Secunderabad

Answer 1

I was facing similar issue and from this issue on github I realized that ngIf must not be on mat-select.

This may help some one:

Make sure you don't have an ngIf on your mat-select.

Separatist

Answer 2

Try to just add matInput attribute to your nested mat-select (as error message suggests):

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

This construction works for me.

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

Tutty

thank you for your response. When I add the 'matInput' , I still get the following error: Error: md-form-field must contain a MdFormFieldControl. Did you forget to add mdInput to the native … – Maenad

Also, why is it still complaining about stuff using the 'md' prefix too? I have switched everything over to use the 'mat' prefix. This is confusing. – Maenad

Can you please check if your module imports MatInputModule, MatSelectModule and MatFormFieldModule? Can you provide plnkr example of your code? – Tutty

There is also a thing that you need to import material theme in order to use components. github.com/angular/material2/issues/6948 Did you use it? – Tutty

yes, I imported a theme already and have imported MatInputModule, MatSelectModule and MatFormFieldModule in my module. I will try to get a plunker done tonight. – Maenad

Answer 3

just updated my angular to latest release , which was 5 in this case and it fixed the problem

Maenad