ngx-formly中数组插入项导致模型数据丢失问题解析

ngx-formly是一个强大的Angular动态表单库，它允许开发者通过JSON配置快速构建复杂的表单界面。在使用过程中，开发者可能会遇到一些特殊场景下的边界问题，比如在包含oneOf结构的数组中插入新项时出现的模型数据丢失问题。

问题现象

当表单结构中存在一个数组字段，且该数组中的元素使用了oneOf（多类型选择）结构时，如果在数组中间位置插入一个新项，会导致以下两个问题：

1. 插入操作后，数组中最后一个元素的模型值会被清空
2. 新插入的项在选择器(select)中显示的值不正确

问题本质

这个问题的根本原因在于ngx-formly在处理数组插入操作时的内部机制。当在数组中间插入新项时，表单控件会经历重新构建的过程，而在这个过程中：

1. 对于oneOf类型的字段，重新构建时没有正确保留已有项的模型状态
2. 表单控件的隐藏和显示操作意外触发了模型重置
3. 新插入项的初始值设置逻辑存在缺陷

解决方案

ngx-formly团队在6.3.1版本中修复了这个问题。修复方案主要涉及以下几个方面：

1. 改进了数组操作时的模型保持机制，确保在插入操作后保留所有现有项的模型值
2. 优化了oneOf字段的初始化流程，确保新插入项能正确获取默认值
3. 修复了表单控件重建过程中的状态管理问题

最佳实践

为了避免在使用ngx-formly时遇到类似问题，建议开发者：

1. 对于复杂数组结构，特别是包含条件字段(oneOf/anyOf)的情况，确保使用最新版本的ngx-formly
2. 在实现自定义数组操作时，注意处理模型状态的保持
3. 对于关键业务场景，添加适当的模型验证逻辑，确保数据完整性
4. 考虑在复杂表单中添加撤销/重做功能，以应对意外数据丢失情况

总结

ngx-formly作为动态表单解决方案，虽然功能强大，但在处理复杂数据结构时仍可能遇到一些边界情况。理解这些问题的本质和解决方案，有助于开发者构建更健壮的表单应用。这次修复体现了开源社区对产品质量的持续改进，也提醒我们在使用高级功能时需要关注可能的边缘情况。