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.
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}],
})