Angular 4响应式表单未捕获日期时间选择器设置的值问题

这个问题在使用第三方jQuery插件配合Angular响应式表单时很常见——Metronic的DateTimePicker直接修改DOM输入框的显示值，但不会触发Angular表单系统能识别的变更事件，导致表单控件无法感知到值的变化。下面是具体的解决步骤：

核心思路 #

手动监听DateTimePicker自带的dp.change变更事件，在事件触发时主动更新响应式表单控件的值，让Angular的表单系统同步感知到变化。

具体实现步骤 #

1. 调整模板代码 #

去掉data-provide="datetimepicker"属性（避免自动初始化带来的时机冲突），添加模板引用变量方便组件类获取DOM元素：

<input 
  formControlName="timeOfRemoval" 
  #timeOfRemoval 
  class="form-control m-input" 
  placeholder="Select date &amp; time" 
  readonly 
  type="text"
>

2. 在组件类中初始化插件并绑定事件 #

通过ViewChild获取输入框元素，在ngAfterViewInit钩子中初始化DateTimePicker，并监听其变更事件来更新表单：

import { Component, ViewChild, ElementRef, AfterViewInit, ChangeDetectorRef } from '@angular/core';
import { FormGroup, FormControl } from '@angular/forms';

@Component({
  selector: 'your-component-selector',
  templateUrl: './your-component.component.html'
})
export class YourComponent implements AfterViewInit {
  @ViewChild('timeOfRemoval') timeOfRemovalEl: ElementRef;
  yourForm: FormGroup;

  constructor(private cdr: ChangeDetectorRef) {}

  ngOnInit() {
    // 初始化响应式表单
    this.yourForm = new FormGroup({
      timeOfRemoval: new FormControl('')
    });
  }

  ngAfterViewInit() {
    // 初始化Metronic DateTimePicker
    $(this.timeOfRemovalEl.nativeElement).datetimepicker({
      // 根据需求配置日期格式，示例为YYYY-MM-DD HH:mm:ss
      format: 'YYYY-MM-DD HH:mm:ss',
      // 可选：添加其他配置，比如禁用过去时间
      // minDate: new Date()
    }).on('dp.change', (event) => {
      // 当日期选择变化时，手动更新表单控件的值
      if (event.date) {
        const formattedDate = event.date.format('YYYY-MM-DD HH:mm:ss');
        this.yourForm.get('timeOfRemoval')?.setValue(formattedDate);
        // 若组件使用OnPush变更检测策略，需手动触发变更检测
        this.cdr.detectChanges();
      }
    });
  }
}

关键注意点 #

• 确保jQuery已在项目中正确引入（Metronic本身依赖jQuery，通常已配置完成）；
• 保持DateTimePicker的输出格式和表单控件存储格式一致，避免格式不匹配；
• 若组件采用OnPush变更检测策略，必须调用cdr.detectChanges()触发视图更新。

这样修改后，当你选择日期时间时，表单控件会同步获取到值，提交表单时就能正常拿到选择的内容了。

内容的提问来源于stack exchange，提问作者SEG.Veenstra