Angular Material Datepicker样式异常求助：样式错乱且可输入文本

我想实现Angular Material官方文档里的美观Datepicker，期望效果如下：

但最终得到的Datepicker样式错乱，还能直接输入文本，样式极差，实际效果如下：

补充：以下警告可能与问题相关？

Warning: (C://path..)\node_modules\ngx-material-timepicker_ivy_ngcc_\fesm2015\ngx-material-timepicker.js depends on 'luxon'. CommonJS or AMD dependencies can cause optimization bailouts.

相关代码 #

new-reservation.component.html #

<h3>Create reservation here</h3>
<form [formGroup]="reservationForm" (ngSubmit)="onFormSubmit()">
  <mat-form-field>
    <div>
      <input matInput>
      <ngx-timepicker-field [defaultTime]="'12:00 am'" formControlName="beginTime"></ngx-timepicker-field>
    </div>
  </mat-form-field>
  <br/>
  <mat-form-field>
    <div>
      <input matInput formControlName="endTime">
      <ngx-timepicker-field [defaultTime]="'12:00 am'" formControlName="endTime"></ngx-timepicker-field>
    </div>
  </mat-form-field>
  <br/>
  <br/>
  <mat-form-field appearance="standard">
    <mat-label>Choose date</mat-label>
    <input matInput [matDatepicker]="picker" min="{{ currentDate | date: 'yyyy-MM-dd' }}" formControlName="date">
    <mat-hint>DD MM YYYY</mat-hint>
    <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
    <mat-datepicker #picker startView="year"></mat-datepicker>
  </mat-form-field>
  <br/>
  <br/>
  <button mat-raised-button class="btn btn-primary">Create</button>
</form>

new-reservation.component.ts #

import { Component, OnInit } from '@angular/core';
import { FormBuilder } from "@angular/forms";
import { NewReservationService } from './new-reservation.service';
import { DatePipe } from '@angular/common';

@Component({
  selector: 'app-new-reservation',
  templateUrl: './new-reservation.component.html',
  styleUrls: ['./new-reservation.component.scss'],
  providers: [DatePipe]
})
export class NewReservationComponent implements OnInit {
  constructor(private formBuilder: FormBuilder, private newReservationService: NewReservationService) { }

  currentDate: any = new Date();

  ngOnInit(): void {
  }

  reservationForm = this.formBuilder.group({
    beginTime: '',
    endTime: '',
    date: '',
    checkedin: false,
    canceled: false
  });

  onFormSubmit() {
    this.newReservationService.saveStudent(this.reservationForm.value);
    this.reservationForm.reset();
  }
}

NewReservationService #

import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class NewReservationService {
  saveStudent(reservation) {
    console.log(JSON.stringify(reservation));
  }
}

app-module.ts #

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import {RegisterComponent} from "./register/register.component";
import {FormsModule, ReactiveFormsModule} from "@angular/forms";
import {RegisterService} from "./register/register.service";
import {HttpClientModule} from "@angular/common/http";
import { MainHeaderComponent } from './main-header/main-header.component';
import { CurrentReservationsComponent } from './reservations/current-reservations/current-reservations.component';
import { CheckInComponent } from './reservations/check-in/check-in.component';
import { NewReservationComponent } from './reservations/new-reservation/new-reservation.component';
import { ReservationsComponent } from './reservations/reservations.component';
import { MatDatepickerModule } from '@angular/material/datepicker';
import { MatNativeDateModule } from '@angular/material/core';
import { MatInputModule } from '@angular/material/input';
import {MatSlideToggleModule} from "@angular/material/slide-toggle";
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import {NgxMaterialTimepickerModule} from "ngx-material-timepicker";
import {MatFormFieldModule} from "@angular/material/form-field";
import {MatButtonModule} from "@angular/material/button";

@NgModule({
  declarations: [
    AppComponent,
    RegisterComponent,
    MainHeaderComponent,
    CurrentReservationsComponent,
    CheckInComponent,
    NewReservationComponent,
    ReservationsComponent,
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    ReactiveFormsModule,
    HttpClientModule,
    MatInputModule,
    MatDatepickerModule,
    FormsModule,
    MatSlideToggleModule,
    BrowserAnimationsModule,
    MatNativeDateModule,
    NgxMaterialTimepickerModule,
    MatFormFieldModule,
    MatButtonModule
  ],
  providers: [
    RegisterService, 
    MatDatepickerModule      
  ],
  entryComponents: [],
  schemas: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

1. 修复样式缺失问题 #

Angular Material组件需要引入主题样式才能正常显示，在全局样式文件（如styles.scss/styles.css）中添加：

@import '@angular/material/prebuilt-themes/indigo-pink.css';

如果用自定义主题，确保正确配置Material主题变量和样式导入。

2. 禁止手动输入文本 #

给Datepicker的输入框添加readonly属性，阻止手动输入：

<input matInput [matDatepicker]="picker" min="{{ currentDate | date: 'yyyy-MM-dd' }}" formControlName="date" readonly>

3. 清理冗余布局代码 #

时间选择器部分的冗余input matInput会导致布局错乱，修改为：

<mat-form-field>
  <ngx-timepicker-field [defaultTime]="'12:00 am'" formControlName="beginTime"></ngx-timepicker-field>
</mat-form-field>
<mat-form-field>
  <ngx-timepicker-field [defaultTime]="'12:00 am'" formControlName="endTime"></ngx-timepicker-field>
</mat-form-field>

ngx-timepicker-field本身已包含输入框，无需额外添加。

4. 修正表单控件初始化 #

将date控件初始化为Date类型，而非空字符串：

reservationForm = this.formBuilder.group({
  beginTime: '',
  endTime: '',
  date: new Date(),
  checkedin: false,
  canceled: false
});

5. 处理luxon依赖警告 #

该警告不影响样式，但可优化：

• 安装luxon：npm install luxon
• 在angular.json的build.options中添加：

"allowedCommonJsDependencies": ["luxon"]

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