如何在 Angular 中禁用日期输入框而不影响表单控件状态

通过为输入框添加 readonly 属性并配合 css 样式模拟禁用效果，可在不调用 formcontrol.disable() 的前提下阻止用户手动输入，同时保留表单控件的 valid/invalid 状态变化逻辑。

通过为输入框添加 readonly 属性并配合 css 样式模拟禁用效果，可在不调用 formcontrol.disable() 的前提下阻止用户手动输入，同时保留表单控件的 valid/invalid 状态变化逻辑。

在 Angular 表单中，直接使用 <input disabled> 或 formControl.disable() 会将控件状态强制设为 'DISABLED'，从而中断你依赖的 statusChanges 流（例如从 'INVALID' → 'VALID' 的切换逻辑）。而业务需求恰恰要求：输入框不可编辑、仅允许通过日期选择器操作，且表单状态必须保持可响应验证变化。

最佳实践是采用语义化 + 视觉降级的组合方案：

✅ 语义层：添加 readonly 属性
readonly 不改变 FormControl 的启用状态（enabled: true），因此 statusChanges 仍能正常触发 VALID/INVALID 事件，完全兼容你的 cartFacade.setEntryFormValidity() 和 reloadCart() 逻辑。

✅ 表现层：CSS 模拟禁用态视觉效果
为 readonly 输入框添加统一禁用样式，提升用户体验一致性：

<input  matInput  [matDatepicker]="picker"  [min]="data.startDate"  (dateInput)="formSubmitted$.next()"  [formControl]="namedDeliveryDateControl"  readonly <!-- ✅ 关键：只读但不失效 -->/>

/* 在组件 SCSS 或全局样式中 */input[readonly][matInput] {  background-color: #f5f5f5;  color: #666;  cursor: not-allowed;  opacity: 0.8;}input[readonly][matInput]:focus {  outline: none;  box-shadow: none;}

⚠️ 注意事项：

• 避免同时设置 disabled 和 readonly —— disabled 会覆盖 formControl 状态；
• readonly 不阻止键盘焦点（如 Tab 进入），若需彻底禁用聚焦，可额外添加 tabindex="-1"，但通常保留可聚焦更利于无障碍访问（屏幕阅读器仍可读取标签）；
• 确保 mat-datepicker-toggle 图标区域仍可点击（默认行为已支持，无需额外处理）；
• 若使用自定义验证器（如校验日期格式），readonly 不影响验证逻辑，所有 valueChanges 和 statusChanges 均照常工作。

该方案轻量、无侵入、符合 HTML 语义规范，且完美解耦 UI 交互限制与表单状态管理，是 Angular Material 场景下的推荐做法。