Error: mat-form-field, forgot to add matInput even though it's added.

[Grundell]

Bug:

ERROR, "Error: mat-form-field must contain a MatFormFieldControl. Did you forget to add matInput to the native input or textarea element?"

What is the expected behavior?

• mat-form-field shall see that i have added matInput to the input field.

What is the current behavior?

• mat-form-field doesn't notice that the input field has a matInput on it.

What are the steps to reproduce?

See the link below for error.
https://stackblitz.com/edit/angular-yn5zec

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

System Version:	macOS 10.12.6 (16G29)
Kernel Version:	Darwin 16.7.0

"@angular/animations": "^4.2.4",
"@angular/cdk": "^2.0.0-beta.12",
"@angular/common": "^4.2.4",
"@angular/compiler": "^4.2.4",
"@angular/core": "^4.2.4",
"@angular/forms": "^4.2.4",
"@angular/http": "^4.2.4",
"@angular/material": "^2.0.0-beta.12",
"@angular/platform-browser": "^4.2.4",
"@angular/platform-browser-dynamic": "^4.2.4",
"@angular/router": "^4.2.4",
"angularfire2": "^5.0.0-rc.2",
"core-js": "^2.4.1",
"firebase": "^4.5.0",
"rxjs": "^5.4.2",
"zone.js": "^0.8.14"

[fxck]

That stackblitz seems to be working just fine.

[EdricChan03]

@Grundell Looks like it could be a dependency problem since the latest version of Angular Material requires ~4.4.4:

https://github.com/angular/material2/blob/9b0771286aa867ca111987e5d8232137d6a45d33/package.json#L27-L41

[stevenmcountryman]

I am seeing the same issue on my builds. All of my dependencies are up to date and on the correct version.

The error only occurs when the site first loads, on the first page. It doesn't happen on any other pages that use the exact same input code block.

EDIT Our issue was something different. We had an *ngIf statement on our mat-select that was not on our mat-input-container so our mat-select was rendering after the mat-input-container causing the bug to occur. So this was my error, not Material 2's error. Thanks everyone :)

[Supermajs]

Hi!

I had the exact same issue and just stumbled upon a solution. I had forgotten to import MatInputModule (Only imported MatFormFieldModule). I don't know if that is the case for you but it might be worth double checking...

[Grundell]

@Chan4077 - Tried to update Angular and it worked so i assume that resolved the problem.

Thank you everyone for the help!

[maiasmith]

For me, the problem was that I still had the mdInput directive on the input element, instead of the new matInput directive.

See the angular docs about this error:

Error: mat-form-field must contain a MatFormFieldControl

This error occurs when you have not added a form field control to your form field. If your form field contains a native or <textarea> element, make sure you've added the matInput directive to it. Other components that can act as a form field control include , , and any custom form field controls you've created.

[wsidl]

FYI: Have been seeing similar behaviour on Angular ~4.4.5 / Material 2.0.0 beta12, and only identified the cause was due to an ngIf directive in a page's subcomponent.

Using this component element as an example:

<mat-form-field>
  <mat-select required [(ngModel)]="condition.comparison" placeholder="Comparison" *ngIf="condition.argument_class !== ''">
    <mat-option *ngFor="let op of comp_options" [value]="op.id">{{ op.value }}</mat-option>
  </mat-select>
</mat-form-field>

When this component is loaded with a model containing data, it works. If a new component is created with an empty model initialized with zero-length strings, the error occurs. Removing the ngIf directive fixes the issue.

Stacktrace in Chrome:

ERROR Error: mat-form-field must contain a MatFormFieldControl. Did you forget to add matInput to the native input or textarea element?
    at getMatFormFieldMissingControlError (form-field.es5.js:89)
    at MatFormField.webpackJsonp.../../../material/esm5/form-field.es5.js.MatFormField._validateControlChild (form-field.es5.js:468)
    at MatFormField.webpackJsonp.../../../material/esm5/form-field.es5.js.MatFormField.ngAfterContentChecked (form-field.es5.js:340)
    at callProviderLifecycles (core.es5.js:11173)
    at callElementProvidersLifecycles (core.es5.js:11147)
    at callLifecycleHooksChildrenFirst (core.es5.js:11131)
    at checkAndUpdateView (core.es5.js:12254)
    at callViewAction (core.es5.js:12599)
    at execComponentViewsAction (core.es5.js:12531)
    at checkAndUpdateView (core.es5.js:12257)

[simonmlewis]

I had the same problem and importing MatInputModule sorted for me!

[jhonis]

I had the same problem of @stevenmcountryman, I was using *ngIf on <mat-select>. So, if anyone need to use *ngIf in this component, just move the if to <mat-form-field>. @wsidl your problem probably is the same thing, you are using the *ngIf on <mat-select>.

[willshowell]

See #7737 for being able to swap inputs within a form-field.

[dhanarajp]

@wsidl

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

@NgModule({
    imports: [
        MatFormFieldModule,
        MatInputModule
    ]
})
export class AppModule { }

[FredvanRijswijk]

I had the same problem, the fix for me is MatFormFieldModule, MatInputModule, MatSelectModule, added to my Material module

[allancorrigall]

@FredvanRijswijk Thank you!

[EsneiderSM]

@FredvanRijswijk Thanks!!

[eavidaze]

@FredvanRijswijk Thank you!

[wimbou]

@FredvanRijswijk Thank you, dank je!

[angular-automatic-lock-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.}