Angular Material 15.0.4时间选择器图标不显示问题求助

问题重现 #

• 执行 ng new sample_project 创建Angular项目
• 执行 ng add @angular/material 并选择 indigo-pink.css 主题
• 在NgModule中导入 MatFormFieldModule 和 MatInputModule
• 在组件HTML中添加代码：

<mat-form-field>
    <input matInput type="time">
</mat-form-field>

• 启动 ng serve 后发现输入框无时钟选择图标

注：纯HTML原生<input type="time">可正常显示图标，相同配置在Angular 14中也能正常显示。

原因分析 #

Angular 15版本的Material组件对原生输入框的样式做了调整，默认隐藏了原生时间选择器的图标，以此引导用户使用Material官方提供的专用时间选择组件。

解决方案 #

方案1：恢复原生时钟图标 #

在全局样式文件（如styles.css）中添加CSS样式，覆盖Material的默认隐藏规则：

.mat-mdc-input-element[type="time"]::-webkit-calendar-picker-indicator {
    display: block;
    color: rgba(0, 0, 0, 0.54);
}

添加后原生时钟图标即可正常显示。

方案2：使用Angular Material专用时间选择组件 #

这是官方推荐的时间选择方案，交互和样式更贴合Material设计体系：

1. 在NgModule中导入所需模块：

import { MatTimepickerModule } from '@angular/material/timepicker';
import { MatNativeDateModule } from '@angular/material/core';

@NgModule({
  imports: [
    // 其他已导入模块
    MatTimepickerModule,
    MatNativeDateModule
  ]
})
export class YourModule { }

2. 在组件HTML中使用：

<mat-form-field>
    <input matInput [matTimepicker]="picker" type="time">
    <mat-timepicker-toggle matSuffix [for]="picker"></mat-timepicker-toggle>
    <mat-timepicker #picker></mat-timepicker>
</mat-form-field>

内容的提问来源于stack exchange，提问作者Carlo June Caimen