我尝试使用有角材料的日期选择器。
我尝试在其中使用的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';
和我一样。
修改:
固定进口后,
我没有错误,但也无法正常工作。
我所看到的是:
答案 0 :(得分:0)
您还需要以下模块
import { FormGroup, FormControl, FormsModule, ReactiveFormsModule } from '@angular/forms';
答案 1 :(得分:0)
您已将日期选择器包装在<mat-form-field>
中,还必须导入
import { MatFormFieldModule } from '@angular/material/form-field';
并将其添加到您的imports
数组中,
如您在复制和粘贴的完整片段示例中所示。
https://stackblitz.com/angular/vnydardxnkq?file=src%2Fmain.ts