未捕获的错误：模块“AppModule”导入的意外指令“MatFormField”。请添加@NgModule 注释

Posted 2023-05-07

【中文标题】未捕获的错误：模块“AppModule”导入的意外指令“MatFormField”。请添加@NgModule 注释

【英文标题】：Uncaught Error: Unexpected directive 'MatFormField' imported by the module 'AppModule'. Please add a @NgModule annotation

【发布时间】：2019-04-22 19:03:28

【问题描述】：

我想使用 Angular 材质日期选择器，但出现此错误。

未捕获的错误：模块“AppModule”导入的意外指令“MatFormField”。请添加@NgModule 注解。

app.component.html

<mat-form-field>
  <input matInput [matDatepicker]="picker" placeholder="Choose a date">
  <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
  <mat-datepicker #picker></mat-datepicker>
</mat-form-field>

app.module.ts

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

import  AppComponent  from './app.component';
import MatFormField from '@angular/material';

@NgModule(
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    MatFormField
  ],
  providers: [],
  bootstrap: [AppComponent]
)
export class AppModule  

【参考方案1】：

要导入组件和指令等，您导入它们的模块，而不是实际的组件和指令。所以你需要导入MatFormFieldModule而不是MatFormField：

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

import  AppComponent  from './app.component';
import  MatFormFieldModule  from '@angular/material/form-field';

@NgModule(
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    MatFormFieldModule
  ],
  providers: [],
  bootstrap: [AppComponent]
)
export class AppModule  

【讨论】：

非常感谢