Angular 15使用Angular Material日期选择器遇NG8002错误求助

问题场景 #

在Angular 15项目中引入Angular Material后，添加以下日期选择器代码：

<mat-form-field appearance="outline">
    <mat-label>Choose a date</mat-label>
    <input formControlName="freshness" matInput [matDatepicker]="picker">
    <mat-datepicker-toggle matIconSuffix [for]="picker"></mat-datepicker-toggle>
    <mat-datepicker #picker></mat-datepicker>
</mat-form-field>

出现错误：

Error: src/app/dialog/dialog.component.html:18:51 - error NG8002: Can't bind to 'matDatepicker' since it isn't a known property of 'input'.

18       <input formControlName="freshness" matInput [matDatepicker]="picker">

解决方案 #

这个错误的核心原因是未在组件所属模块中导入MatDatepicker相关依赖模块，Angular Material的组件/指令需要显式导入对应模块才能使用。

步骤1：导入必要的Material模块 #

在组件所在的模块（比如DialogModule或AppModule）中，添加以下导入：

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { ReactiveFormsModule } from '@angular/forms'; // 若使用formControlName必须导入
import { MatFormFieldModule } from '@angular/material/form-field';
import { MatInputModule } from '@angular/material/input';
import { MatDatepickerModule } from '@angular/material/datepicker';
import { MatNativeDateModule } from '@angular/material/core'; // 原生日期适配器

// 导入你的组件
import { DialogComponent } from './dialog.component';

@NgModule({
  declarations: [DialogComponent],
  imports: [
    CommonModule,
    ReactiveFormsModule,
    MatFormFieldModule,
    MatInputModule,
    MatDatepickerModule,
    MatNativeDateModule
  ]
})
export class DialogModule { }

关键说明 #

• MatDatepickerModule：提供matDatepicker指令，是解决该错误的核心模块
• MatInputModule：提供matInput指令
• MatFormFieldModule：支持mat-form-field容器组件
• MatNativeDateModule：提供基于原生JavaScript Date对象的日期适配器，是日期选择器正常工作的必要依赖
• ReactiveFormsModule：如果模板中使用了formControlName，必须导入该模块以支持响应式表单

验证 #

保存模块文件后，重启Angular开发服务器（ng serve），错误即可消除。

内容的提问来源于stack exchange，提问作者Nimasha Madhushani