Error: mat-form-field must contain a MatFormFieldControl.

[icvanee]

Bug, feature request, or proposal:

When doing a karma/jasmine test I get an error on the tag.
This in combination with a

<mat-form-field> <mat-select name="country" placeholder="Country" [(ngModel)]="address.countryName" class="input-full-width"> <mat-option *ngFor="let country of countries | orderBy: 'name'" [value]="country.name">{{ country.name }}</mat-option> </mat-select> </mat-form-field>

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

Using angular 4.4.5 material 2.0.0-beta.12

Is there anything else we should know?

When running the project it's working okay, but just the test gives an error and fails.

[tomchovanec]

I have the same issue... Angular 4.4.6, material 2.0.0-beta.12

[tomchovanec]

You have to add to app.module.ts:

import {MatInputModule} from '@angular/material';
@NgModule({
  imports: [
  ...
    MatInputModule
  ...
]

[icvanee]

As said, in the normal situation it work. I have added de MatInputModule in the imports section.
And when testing in the .spec.ts file I have imported the MatInputModule also. Even in the TestBed.configureTestingModule imports section is is added too.

[Abdullah-FAl]

You have to add matInput to input

<div class="fields-container">
      <mat-form-field>
        <input matInput placeholder="Input">
      </mat-form-field>

    </div>

[icvanee]

I know a matInput must be inside a mat-form-field. But the issue is that I don't want an input field, but a select.

[willshowell]

@icvanee to be sure, have you imported MatSelectModule into your testing module? And you don't have an ngIf on your mat-select, right?

[icvanee]

shame that was it. I really really thought I had added that. Imissed it when I was migrating also with the removal of MatModule. Thx for noticing!

[jagomf]

I have hadded MatSelectModule and I still get the error.

This is my component:

<mat-form-field>
  <mat-select [placeholder]="receivedLabel" [(ngModel)]="value" (blur)="onBlur()" class="select-country-main">
    <ng-template ngFor let-country [ngForOf]="countries" [ngForTrackBy]="trackByCountryId">
      <mat-option *ngIf="!isExcluded(country)" [value]="country">
        <country-flag [country]="country"></country-flag>
      </mat-option>
    </ng-template>
  </mat-select>
</mat-form-field>

[mattmcardle]

I had an issue similar to yours @jagomf
For me it was corrected when I modified the ngIf condition of my mat-select, I had value !== null in the ngIf, when I changed it to just value this fixed it. I would suggest setting an excluded property on your country objects and checking this in the ngIf, rather than calling the isExcluded method on your ngIf. You might also notice performance improvements if you do this, as referencing a method call in your html template causes it to be called on every change detection round.

[ORESoftware]

seems. like. the. error. message. could. be. improved.

[SekoViper]

i also have this same error and trying to fix but can't. Any help please.

<mat-form-field [floatLabel]="options.value.floatLabel">
Tenant Name

  <mat-form-field 
      [hideRequiredMarker]="options.value.hideRequired"
      [floatLabel]="options.value.floatLabel">
    <mat-select required>
      <mat-option mdInput *ngFor="let room of roomType" value="option">{{room.name}}</mat-option>
    </mat-select>
    <mat-placeholder>-Select Room Type-</mat-placeholder>
  </mat-form-field>

but it keeps giving

FusePricingStyle2Component.html:17 ERROR Error: mat-form-field must contain a MatFormFieldControl.
at getMatFormFieldMissingControlError (form-field.es5.js:111)
at MatFormField._validateControlChild (form-field.es5.js:637)
at MatFormField.ngAfterContentInit (form-field.es5.js:392)
at callProviderLifecycles (core.js:12699)
at callElementProvidersLifecycles (core.js:12673)
at callLifecycleHooksChildrenFirst (core.js:12656)
at checkAndUpdateView (core.js:13806)
at callViewAction (core.js:14153)
at execComponentViewsAction (core.js:14085)
at checkAndUpdateView (core.js:13808)

[EdricChan03]

@SekoViper That's because you're using mdInput instead of matInput. Replace it.