Angular关闭Kendo DateTimePicker时出现isEmpty空引用报错

算力阿峰

2026-8-29

问题现象

在Angular项目中使用Kendo-datetimepicker组件，配合响应式表单（Reactive Form）使用时，若对应formControlName绑定的FormControl初始值设为null，未修改任何值直接关闭组件面板时，会抛出如下错误：

ERROR TypeError: Cannot read properties of null (reading 'isEmpty')
    at DateTimePickerComponent.isEmpty (index.js:8605:53)
    at FloatingLabelComponent.updateState (index.js:463:44)
    at Object.updateState [as next] (index.js:535:40)
    at SafeSubscriber.__tryOrUnsub (Subscriber.js:183:1)
    at SafeSubscriber.next (Subscriber.js:122:1)
    at Subscriber._next (Subscriber.js:72:1)
    at Subscriber.next (Subscriber.js:49:1)
    at EventEmitter_.next (Subject.js:39:1)
    at EventEmitter_.emit (core.mjs:22416:15)
    at FormControl.updateValueAndValidity (forms.mjs:2514:31)

报错根因

Kendo DateTimePicker组件内部的isEmpty校验逻辑未对null初始值做兜底判断，关闭面板触发表单控件更新校验时，代码直接尝试读取null值上的isEmpty属性，触发空指针报错。

解决方法

替换FormControl初始值：不要用null作为无值状态的初始值，改用空字符串''即可被组件的空状态逻辑正确识别，不会触发校验报错。
修正后的初始化代码示例：
```
// 会触发报错的写法
const dateForm = this.fb.group({
  selectTime: [null]
})

// 修正后写法
const dateForm = this.fb.group({
  selectTime: ['']
})
```
配置组件参数兜底：如果业务逻辑必须保留null作为初始值，给组件添加[valuePrimitive]="false"配置，同时在值写入组件的逻辑中提前判断，当值为null时传入组件可识别的空日期实例，避免null直接流入内部校验逻辑。
升级依赖版本：该问题属于Kendo Angular DateInputs组件旧版本的已知bug，升级组件包到最新稳定版后，官方已经补充了null/undefined值的校验兜底，可直接修复该问题。