javascriptangulartypescriptangular-materialangular-material-8

ERROR Error: mat-form-field must contain a MatFormFieldControl while using API documentation?


I imported the MatFormFieldModule like this:

    import { BrowserModule } from '@angular/platform-browser';
    import { NgModule } from '@angular/core';

    import { AppRoutingModule } from './app-routing.module';
    import { AppComponent } from './app.component';
    import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
    //import { MaterialModule } from './material/material.module';
    import {MatFormFieldModule} from '@angular/material/form-field';

    @NgModule({
      declarations: [
        AppComponent
      ],
      imports: [
        BrowserModule,
        AppRoutingModule,
        BrowserAnimationsModule,
    //    MaterialModule,
        MatFormFieldModule
      ],
      providers: [],
      bootstrap: [AppComponent]
    })
    export class AppModule { }

Within app.component.html I have (Taken straight from the API documentation):

    <mat-form-field>
      <input matInput placeholder="Input">
    </mat-form-field>

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

Any ideas?

And I'm getting the error:

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

Solution

  • You should import MatInputModule as well:

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

    otherwise Angular doesn't know how to initialize directive for <input matInput which provides MatFormFieldControl:

    @Directive({
      selector: `input[matInput], textarea[matInput], select[matNativeControl],
          input[matNativeControl], textarea[matNativeControl]`,
      ...
      providers: [{provide: MatFormFieldControl, useExisting: MatInput}],
    })