Components: 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

```

```

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

[EdricChan03]

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

[SekoViper]

Thanks very much. I have been able to fix that.
My next problem is to implement timer in a quiz app am building. How do I
go about it?
Thanks.

On Wed, 4 Apr 2018, 12:03 p.m. Edric Chan, [e-mail] wrote:

@SekoViper https://github.com/SekoViper That's because you're using
mdInput instead of matInput. Replace it.

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/angular/material2/issues/7898#issuecomment-378576235,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AgRdXDTvjL86uR9nZr7aWXd1IcBZjU7xks5tlLargaJpZM4P-1f7
.

[sriharsha6]

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

edit mode_edit save check_circle

    </div>
    <hr>

    <div class="row litre">
      <div class="col-md-6">
    <form class="litre">
        <mat-form-field class="example-full-width">
            <label *ngIf="!editMode">{{litre}}</label>
            <input matInput placeholder="Input" *ngIf="editMode" [(ngModel)]="litre"  [ngModelOptions]="{standalone: true}">
        </mat-form-field>
  </form>
  </div>

[mucbits]

Try this way:

    <mat-form-field class="example-full-width">
        <input matInput placeholder="Input" [disabled]="!editMode" [(ngModel)]="litre"  [ngModelOptions]="{standalone: true}">
    </mat-form-field>

[sriharsha6]

Thanks very much,

I want edit mode_edit save check_circle in a single button

edit mode_edit save check_circle

    </div>
    <hr>

    <div class="row litre">
      <div class="col-md-6">
    <form class="litre">
        <mat-form-field class="example-full-width">
             <input matInput placeholder="Input" [disabled]="!editMode" [(ngModel)]="litre"  [ngModelOptions]="{standalone: true}">
</mat-form-field>
        </mat-form-field>
  </form>
  </div>

[pierreclr]

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

[sriharsha6]

can u send that code by using *ngIf on your input / select

[nhhockeyplayer]

Im receiving same issue numerous times within my custom mattable

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.ngAfterContentChecked (form-field.es5.js:427)
    at callProviderLifecycles (core.js:12702)
    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)

[Ukmandal]

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

[sriharsha6]

try to solve my issue

[ktsangop]

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>

[pranaykohad]

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

[PaloMiklo]

Actually, I got this error, when a slash was missing in the second tag, which supposed to be a closing tag of mat-form-field. Silly error, but sometimes it happens, so it's good to check it out!

[Cricen]

I kept running into this when I trusted my IDE a bit too much. I kept not noticing that rather than matInput I kept getting mat-input. It would be a bit helpful to have a better error message.

[danielprogramic]

Great Guys!!!! The matInput saving my life.

<mat-input-container > <input matInput placeholder="E-mail" formControlName="email" type="text" > </mat-input-container>

[ghost]

I have this problem too . and i have this problem with file type of input !

[sikemullivan]

I upgraded and forgot to change mdInput to matInput . SMH!! One of those moments lol

[worthy7]

You haven't imported it properly

On Fri, 7 Sep 2018 at 19:38, gravindran2412 [e-mail]
wrote:

value="option">Option align="end">Here's the dropdown arrow ^

I am getting the following error on using mat-select:

ERROR Error: mat-form-field must contain a MatFormFieldControl.
at getMatFormFieldMissingControlError (form-field.es5.js:115)
at
MatFormField.push../node_modules/@angular/material/esm5/form-field.es5.js.MatFormField._validateControlChild
(form-field.es5.js:685)
at
MatFormField.push../node_modules/@angular/material/esm5/form-field.es5.js.MatFormField.ngAfterContentInit
(form-field.es5.js:433)
at callProviderLifecycles (core.js:9560)
at callElementProvidersLifecycles (core.js:9541)
at callLifecycleHooksChildrenFirst (core.js:9531)
at checkAndUpdateView (core.js:10462)
at callViewAction (core.js:10699)
at execComponentViewsAction (core.js:10641)
at checkAndUpdateView (core.js:10464)

—
You are receiving this because you commented.
Reply to this email directly, view it on GitHub
https://github.com/angular/material2/issues/7898#issuecomment-419399444,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AEirH8BjDX744gN1cMtcU9RmV6-MLQOmks5uYkypgaJpZM4P-1f7
.

[debugly]

component.html

<mat-form-field>
            <mat-select *ngIf="appIdOpts" [(ngModel)]="selectedAppId" (ngModelChange)="dataChanged()">
                <mat-option *ngFor="let e of appIdOpts" value="{{e.appid}}">{{e.title}}</mat-option>
            </mat-select>
</mat-form-field>

component.ts 
{
appIdOpts: any;
}

SdkActionComponent.html:17 ERROR Error: mat-form-field must contain a MatFormFieldControl.
at getMatFormFieldMissingControlError (form-field.es5.js:115)
at MatFormField.push../node_modules/@angular/material/esm5/form-field.es5.js.MatFormField._validateControlChild (form-field.es5.js:685)
at MatFormField.push../node_modules/@angular/material/esm5/form-field.es5.js.MatFormField.ngAfterContentInit (form-field.es5.js:433)
at callProviderLifecycles (core.js:9560)
at callElementProvidersLifecycles (core.js:9541)
at callLifecycleHooksChildrenFirst (core.js:9531)
at checkAndUpdateView (core.js:10462)
at callViewAction (core.js:10699)
at execComponentViewsAction (core.js:10641)
at checkAndUpdateView (core.js:10464)

modify:

component.ts
{
appIdOpts: any = [];
}

[hhsissi]

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

[leolanese]

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

[ranbuch]

I had the same issue.
In my case I had a mat-form-field with *ngIf and the fix was wrapping the mat-form-field in another element and allpy the *ngIf on him.

Also, make sure you don't have a *ngIf on the mat-select or mat-input. that would leave angular with an empty mat-form-field element at run-time.

[nhhockeyplayer]

still a nogo

have all modules imported

docs say custom widgets are legit

?

        <mat-form-field color="accent">
            <app-states [newState]="modal.data.state"></app-states>
        </mat-form-field>

[Wess58]

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>

THANKS A MILLION , THIS IS THE SOLUTION I WAS SCOUTING FOR

[rjconcepcion]

I think this link will help.

[gh0st]

This was failing for me because I hadn't imported the MatInputModule inside my .spec.ts file.

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{_This action has been performed automatically by a bot._}