在 Angular 应用中，通过 JavaScript 脚本为 mat-datepicker 输入框设置日期值时，仅派发 input 或 change 事件无法触发 Angular 的响应式表单更新；需模拟 Angular Material 内部处理逻辑，正确触发 ControlValueAccessor 流程。
在 angular 应用中，通过 javascript 脚本为 `mat-datepicker` 输入框设置日期值时，仅派发 `input` 或 `change` 事件无法触发 angular 的响应式表单更新；需模拟 angular material 内部处理逻辑，正确触发 controlvalueaccessor 流程。
Angular Material 的 组件并非原生输入控件，而是通过 ControlValueAccessor（CVA）机制与 Angular 表单深度集成。其内部监听 input 事件，但关键在于：事件对象本身不携带新值，实际值从 event.target.value 中读取。因此，若仅创建并派发一个空 Event("input")，Angular 无法感知值的变化——因为 target.value 未被正确设置或未被事件处理器识别。
✅ 正确做法：设置 target.value 后再派发 input 事件
你必须确保：
- 元素的 value 属性已提前设为合法日期字符串（如 '2023-08-01'）；
- 派发的 input 事件中，event.target 被显式赋予该 value（可通过 Object.defineProperty 或临时代理实现）；
- 使用标准 dispatchEvent 触发，Angular Material 的 datepicker-input.ts 会自动捕获并同步至 CVA。
以下是兼容性良好、经源码验证的实现方式：
function setDateToMatDatePicker(element, isoDateString) {
// 1. 确保 DOM 元素 value 已更新（必要前置步骤）
element.value = isoDateString;
// 2. 创建 input 事件，并「伪造」target.value（因原生 Event 不允许直接设置 target）
const evt = document.createEvent('HTMLEvents');
evt.initEvent('input', true, false);
// 3. 关键：通过 Object.defineProperty 劫持 event.target.value
Object.defineProperty(evt, 'target', {
value: { value: isoDateString }
});
// 4. 派发事件（Angular Material 会读取 evt.target.value 并更新模型）
element.dispatchEvent(evt);
// ✅ 可选：再派发一次 change 事件，确保 formControl.markAsDirty() 等逻辑生效
element.dispatchEvent(new Event('change', { bubbles: true }));
}
// 使用示例
const dateInput = document.querySelector('input[formcontrolname="dueDate"]');
if (dateInput) {
setDateToMatDatePicker(dateInput, '2023-08-01');
}? 原理依据：Angular Material 源码中 _onInput() 方法明确从 event.target.value 提取字符串并尝试解析为日期。它不依赖 event.detail 或自定义属性，因此 target.value 是唯一有效载荷通道。
⚠️ 注意事项
- 格式必须为 ISO 8601 字符串（如 '2023-08-01'），不支持 '08/01/2023' 或 'Aug 1, 2023' —— 否则解析失败，值不会提交。
- 避免仅设置 element.value 而不派发事件：这会导致视图显示更新，但 FormControl.value 仍为旧值，提交时为空或默认值。
- 不要使用 new Event('input', { bubbles: true }) 直接设置 target：现代浏览器中 Event 构造函数不支持传入 target 选项，该字段不可写；必须通过 defineProperty 或 createEvent + initEvent 方式间接注入。
- 若页面使用 OnPush 策略或异步变更检测，可额外调用 ngZone.run(() => {...})（需先获取 NgZone 实例），但纯 DOM 脚本场景通常无需。
✅ 验证是否成功
执行后，检查以下任一条件是否满足：
- 控件绑定的 FormControl.value 返回对应 Date 对象；
- 表单 valid 状态变为 true（若含 Validators.required）；
- 提交时服务端收到该日期字段，而非空值或 null。
掌握这一机制，不仅适用于 mat-datepicker，还可推广至其他基于 CVA 的 Angular 自定义控件（如 mat-select、mat-chip-list 等）的自动化测试与脚本注入场景。
