选择ngbDatepicker日期输入控件时change事件不生效问题

根本原因：原生change事件的触发条件是输入框值变更且失去焦点，通过ngbDatepicker面板选择日期时，虽然会修改输入框的值，但不会主动触发输入框的失焦逻辑，因此原生change事件不会触发。

排查步骤 #

• 优先确认事件绑定是否匹配ngbDatepicker的官方输出事件：ngbDatepicker本身内置了选中日期的专属事件，原生change仅在手动修改输入内容后失焦才会触发，不覆盖面板选择的场景。
• 检查当前使用的响应式表单是否存在校验拦截：如果visaIssueDate控件的校验规则未通过，选中的日期值不会写入formControl，也会导致绑定的变更事件不触发。
• 确认是否存在其他事件拦截或冒泡阻止：比如父元素绑定了click阻止冒泡，导致面板选择的回调没有执行。

修复方案 #

方案1：改用ngbDatepicker专属的dateSelect事件 #

这是最适配面板选择场景的方案，选中日期时会直接触发该事件，修改后模板代码如下：

<input type="text" formControlName="visaIssueDate" class="form-control" 
  ngbDatepicker #d="ngbDatepicker" placeholder="yyyy-mm-dd" [minDate]="minDate" [maxDate]="maxDate"
  (dateSelect)="onChangeVisaIssueDate($event)"
/>

其中$event为选中的NgbDateStruct类型日期对象，可直接在onChangeVisaIssueDate方法中接收使用。

方案2：订阅响应式表单的valueChanges事件 #

如果你已经使用了响应式表单管理字段值，无需修改模板，直接在组件类中订阅对应控件的变更即可，同时覆盖面板选择、手动输入两种场景：

// 在组件初始化逻辑中添加
this.你的表单变量.get('visaIssueDate').valueChanges.subscribe(selectedDate => {
  // 执行原有onChangeVisaIssueDate的逻辑
  this.onChangeVisaIssueDate(selectedDate);
})

方案3：兼容手动输入场景 #

如果需要同时支持用户手动输入日期、面板选择两种场景，可以同时绑定dateSelect和blur事件，覆盖所有值变更的场景。

内容的提问来源于stack exchange，提问作者Natesh