Angular中jquery-datetimepicker选值无法绑定到表单控件问题

问题核心原因 #

• jquery-datetimepicker属于jQuery生态的第三方插件，其触发的DOM值变更事件不在Angular的变更检测上下文内，Angular无法自动感知input元素的值变化，自然不会同步到响应式表单控件
• 直接修改FormGroup.value上的属性属于错误操作：响应式表单的value对象本身是只读状态，直接赋值不会触发表单校验、valueChanges事件派发和视图更新，这就是为什么能在控制台看到值变了但输入框不显示的核心原因
• 初始化时机错误：把日期插件的初始化逻辑写在了父组件的ngOnInit生命周期里，这个阶段子组件的模板DOM还没完成渲染，插件根本找不到对应绑定的input元素，初始化本身就没有生效

修复步骤 #

• 调整插件初始化位置：把日期插件的初始化逻辑从父组件移到实际存放input输入框的子组件中，并且把执行时机放到ngAfterViewInit生命周期，确保要绑定的input元素已经完成渲染
• 用Angular原生方式获取DOM元素：给input加模板引用变量，通过@ViewChild获取元素实例，不要用全局class选择器查找元素，避免出现元素匹配错误
• 正确更新表单值并触发变更检测：在插件的onChangeDateTime回调中，通过NgZone把更新逻辑包起来，让Angular感知到这个外部异步事件，同时调用响应式表单官方提供的setValue方法更新控件值，保证视图、表单状态、校验逻辑同步更新

修复后完整代码 #

hello.component.ts #

import { Component, Input, AfterViewInit, ViewChild, ElementRef, NgZone } from '@angular/core';
import { FormGroup } from '@angular/forms';
// 若项目已配置jQuery类型声明可删除下一行
declare const $: any;

@Component({
  selector: 'hello',
  template: `
  <div class="form-group" [formGroup]="myForm">
    <div>
         <input #datePickerInput formControlName="startDate" aria-label="Start Date"  [ngClass]="{
          'is-invalid': myForm.controls['startDate'].errors
      }" class="form-control">

      <div *ngIf="myForm.hasError('required', 'startDate')" class="invalid-feedback">
        This field is required
      </div>
     </div>
  </div>      
  `,
  styles: [`h1 { font-family: Lato; }`],
})
export class HelloComponent implements AfterViewInit {
  @Input() myForm: FormGroup;
  @ViewChild('datePickerInput') datePickerInput: ElementRef;

  constructor(private ngZone: NgZone) {}

  ngAfterViewInit() {
    $(this.datePickerInput.nativeElement).datetimepicker({
      allowInputToggle: true,
      timepicker: false,
      format: 'M d, Y',
      minDate: Date.now,
      scrollMonth: false,
      scrollInput: false,
      onChangeDateTime: (_, $input) => {
        this.ngZone.run(() => {
          this.myForm.get('startDate').setValue($input.val());
        })
      }
    });
  }
}

app.component.ts #

删除原来ngOnInit里写的datetimepicker初始化逻辑即可，父组件不需要处理子组件内部的DOM绑定逻辑，修改后代码如下：

import { Component, OnInit } from '@angular/core';
import { FormGroup, FormBuilder, Validators } from '@angular/forms';
@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent implements OnInit {
  myForm: FormGroup;

  constructor(private fb: FormBuilder) {
    this.myForm = this.fb.group({
      startDate: ['', Validators.required],
    });
  }

  onSubmit() {
    console.log('value: ', this.myForm.value);
    console.log('the whole form and its controls: ', this.myForm);
  }

  ngOnInit(): void {
    // 移除这里的datetimepicker初始化代码
  }
}

注意事项 #

• 所有Angular上下文之外的第三方异步事件（比如jQuery事件、原生DOM事件、第三方SDK回调），如果需要更新Angular绑定的状态，都要放到NgZone.run()中执行，否则会出现状态和视图不同步的问题
• 响应式表单更新值必须使用setValue或patchValue方法，禁止直接修改form.value下的属性
• 所有DOM相关操作必须在ngAfterViewInit生命周期及之后执行，ngOnInit阶段组件模板还未渲染为真实DOM，此时获取元素会得到空值
• 尽量通过@ViewChild定位具体DOM元素，减少全局选择器的使用，避免多实例场景下绑定错误元素

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