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

Bug, feature request, or proposal:

When doing a karma/jasmine test I get an error on the <mat-form-field> tag. This in combination with a <mat-select>

<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.

About this issue

Original URL
State: closed
Created 7 years ago
Reactions: 10
Comments: 39 (3 by maintainers)

Most upvoted comments

You have to add to app.module.ts:

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

+934

tomchovanec on Oct 19, 2017

You have to add matInput to input

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

    </div>

+127

Abdullah-FAl on Oct 21, 2017

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

+50

ORESoftware on Feb 13, 2018

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

+36

willshowell on Oct 23, 2017

try to solve my issue

+21

sriharsha6 on Apr 24, 2018

I add MatInputModule in component’s module.ts and it solve the problem

+18

pranaykohad on May 11, 2018

Be sure that you don’t have any *ngIf on your input / select

+11

pierreclr on Apr 16, 2018

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>

jagomf on Nov 20, 2017

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.

icvanee on Oct 23, 2017

mat-form-field must contain a MatFormFieldControl this is missing? in app.module.ts MatInputModule

Ukmandal on Apr 24, 2018

You have to add to app.module.ts:

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

Thanks man, it’s a real nightmare to use Angular Material when examples juste won’t work because you can’t figure out what to import…

hhsissi on Sep 26, 2018

I had to place that *ngIf on the <mat-form-field> tag instead of any tag inside that. This was driving me nuts… 😭 <mat-form-field *ngIf="config.type === 'string'" class="field-full-width"> <input type="text" matInput placeholder="{{config.name}}" [formControlName]="config.name"> </mat-form-field>

ktsangop on May 5, 2018

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

just add to the app.module.ts:

import { MatFormFieldModule, MatSelectModule, MatInputModule } from ‘@angular/material’; @NgModule({ imports: [ … MatFormFieldModule, MatSelectModule, MatInputModule … ]

leolanese on Sep 28, 2018