Angular升级至v16后matFormField内datetime-local输入框后缀图标消失

问题背景 #

将type="datetime-local"的原生输入框放在mat-form-field内时，Angular 16版本下原生的日历后缀图标消失，点击无法打开日期时间选择器；移出mat-form-field后功能恢复正常。不想使用matDatepicker因为它不支持时间选择。

解决方案一：全局样式恢复原生图标 #

Angular Material 16基于MDC重构后，默认给mat-form-field内的输入框添加了appearance: none样式，导致原生datetime-local的图标被隐藏。在全局样式文件（如styles.scss）中添加以下代码即可恢复：

.mat-mdc-form-field .mdc-text-field__input[type="datetime-local"] {
  appearance: auto;
}

解决方案二：自定义Material图标触发原生选择器 #

如果不想修改全局样式，可以手动添加Material风格的图标，通过代码触发原生选择器，同时保持界面风格统一：

<mat-form-field>
  <input
    formControlName="dateTimeSelect"
    matInput
    type="datetime-local"
    id="date"
    name="date"
    required
    #dateInput
  />
  <mat-icon matSuffix (click)="dateInput.showPicker()">schedule</mat-icon>
</mat-form-field>

这里通过模板引用变量#dateInput获取输入框元素，调用原生的showPicker()方法打开日期时间选择器，同时使用Material的schedule图标作为后缀，替代原生图标。

原因说明 #

Angular 14到16的核心变化是Material组件切换为基于MDC（Material Design Components for Web）实现，MDC的文本字段组件默认对原生输入控件的样式进行了重置，其中包括隐藏datetime-local类型输入框的原生后缀图标。当输入框移出mat-form-field后，脱离了MDC的样式控制，原生图标和选择器功能自然恢复。

内容的提问来源于stack exchange，提问作者Scott-MEARN-Developer