无法使用角度材质的日期选择器

Question

我尝试使用有角材料的日期选择器。

我尝试在其中使用的html组件文件：

<mat-form-field appearance="fill">
    <mat-label>Choose a date</mat-label>
    <input matInput [matDatepicker]="picker">
    <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 { 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 { MatDatepickerModule } from '@angular/material/datepicker';

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

我得到的错误：error NG8001: 'mat-form-field' is not a known element。

但是，由于角材料datepicker重复说明，我只需要导入： import { MatDatepickerModule } from '@angular/material/datepicker';和我一样。

修改：

固定进口后， 我没有错误，但也无法正常工作。 我所看到的是：

• 以箭头标记-是放置日期选择器的地方。但是我看不到它起作用。为什么？

Answer 1

您还需要以下模块

import { FormGroup, FormControl, FormsModule, ReactiveFormsModule } from '@angular/forms';

Answer 2

您已将日期选择器包装在<mat-form-field>中，还必须导入

import { MatFormFieldModule } from '@angular/material/form-field';

并将其添加到您的imports数组中，

如您在复制和粘贴的完整片段示例中所示。

https://stackblitz.com/angular/vnydardxnkq?file=src%2Fmain.ts