Components: mat-form-field must contain a MatFormFieldControl

Created on 23 May 2018 · 4Comments · Source: angular/components

Bug, feature request, or proposal:

I was using this in my project:

<mat-form-field appearance="outline">
      <mat-label >Enter your user name</mat-label> 
      <input matInput placeholder="Placeholder">
      <mat-icon matSuffix>account_circle</mat-icon>
      <mat-hint >You can also use your email</mat-hint>
</mat-form-field>

and this error was coming up and it did not matter what i did.

I have imported the relevant modules accordingly:

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

import {MatToolbarModule} from '@angular/material/toolbar';
import {MatMenuModule} from '@angular/material/menu';
import {MatIconModule} from '@angular/material/icon';
import {MatSidenavModule} from '@angular/material/sidenav';
import {MatCardModule} from '@angular/material/card';
import {MatButtonModule} from '@angular/material/button';
import {MatTabsModule} from '@angular/material/tabs'; 
import {MatFormFieldModule} from '@angular/material/form-field';
import {  MatInputModule } from '@angular/material/input'; 


@NgModule({
  imports: [
    CommonModule,
    BrowserAnimationsModule,
    MatToolbarModule,
    MatMenuModule,
    MatIconModule,
    MatSidenavModule,
    MatCardModule,
    MatButtonModule,
    MatTabsModule,
    MatFormFieldModule ,
    MatInputModule
  ],
  exports: [
    BrowserAnimationsModule, 
    MatToolbarModule,
    MatMenuModule,
    MatIconModule,
    MatSidenavModule,
    MatCardModule,
    MatButtonModule,
    MatTabsModule,
    MatFormFieldModule, 
    MatInputModule 
  ],
  declarations: []
})
export class AngularMatImportsModule { }

In the AppModule i'm importing this module also.

What is the current behavior?

It gives this error always, even if i had no childs in the mat-form-field, but the app can keep running fine, this error would not go away

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

It affects at least to my knowledge version 6.1.0.

Is there anything else we should know?

I fixed the issue by installing version 6.0.1.

Source

edukng623

All 4 comments

I cannot reproduce this, copied your both codes into this example, updated to 6.1.0 and everything seems to work as expected:

https://stackblitz.com/edit/angular-material2-issue-gx5djc

pfeigl on 23 May 2018

Please keep GitHub issues for bug reports / feature requests. Better avenues for troubleshooting / questions are stack overflow, gitter, mailing list, etc.