通过为输入框添加 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 场景下的推荐做法。
