无法查看角度材料日期选择器

Question

我尝试在页面中设置角度材料日期选择器。 这是HTML：

<mat-form-field appearance="fill">
    <mat-label>Choose a date</mat-label>
    <!-- #docregion toggle -->
    <input matInput [matDatepicker]="picker">
    <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
    <mat-datepicker #picker></mat-datepicker>
    <!-- #enddocregion toggle -->
</mat-form-field>

这是我的app.module.ts：

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

import { AppComponent } from './app.component';
import { DashboardComponent } from './components/pages/dashboard/dashboard.component';
import { AppRoutingModule } from './app-routing.module';
import { NavComponent } from './components/pages/dashboard/nav/nav.component';
import { DefaultComponent } from './components/pages/dashboard/default/default.component';
import { ChartComponent } from './components/pages/dashboard/chart/chart.component';
import { UploadComponent } from './components/pages/dashboard/upload/upload.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { ReactiveFormsModule } from '@angular/forms';
import { MatNativeDateModule } from '@angular/material/core';
import { MatFormFieldModule } from '@angular/material/form-field';
import { MatDatepickerModule } from '@angular/material/datepicker';

@NgModule({
  declarations: [
    AppComponent,
    DashboardComponent,
    NavComponent,
    DefaultComponent,
    ChartComponent,
    UploadComponent,
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    BrowserAnimationsModule,
    ReactiveFormsModule,
    MatNativeDateModule,
    MatFormFieldModule,
    MatDatepickerModule,
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

这是我看到的：

错误提示：

RROR Error: mat-form-field must contain a MatFormFieldControl

顺便说一句，我所附的html代码是来自https://stackblitz.com/angular/vnydardxnkq?file=src%2Fapp%2Fdatepicker-overview-example.html

的工作示例