ngx-formly表单数组中脏状态与原始状态传播问题解析

问题背景

在Angular表单开发中，表单控件的脏状态(pristine/dirty)管理是一个重要特性。当用户通过界面首次修改表单控件的值时，表单的pristine状态会从true变为false，这是预期的标准行为。

然而，在使用ngx-formly的动态表单数组(FieldArrayType)时，开发者发现了一个状态传播不一致的问题：当表单中存在默认显示的重复元素时，如果移除其中一个元素，这次用户界面操作不会被识别为表单交互，导致脏状态未能正确更新。

问题本质

问题的核心在于状态更新的时序问题。在移除数组元素的操作中，ngx-formly确实调用了markAsDirty方法，但这个方法是在值已经改变之后才被调用的。这导致当valueChanges Observable触发时，表单的pristine状态仍然显示为true，与实际情况不符。

影响范围

这个问题不仅影响数组的移除操作，同样也影响添加操作。类似的问题还出现在select等表单控件中，表明这是一个相对普遍的状态管理问题。

解决方案

ngx-formly团队在v6.3.8版本中修复了这个问题。修复的核心思路是调整markAsDirty方法的调用时机，确保在值变更之前就标记表单为脏状态，从而保证valueChanges触发时状态已经正确更新。

技术启示

这个问题给我们几个重要的技术启示：

1. 表单状态管理需要特别注意操作时序，状态标记应该在值变更之前完成
2. 对于动态表单数组这类复杂控件，状态传播需要特别处理
3. 在Angular 18之前版本中，开发者可能需要手动处理这类状态同步问题

最佳实践

对于使用较旧Angular版本的开发者，如果遇到类似问题，可以考虑以下解决方案：

1. 手动在操作前调用markAsDirty
2. 使用自定义表单控件包装器来处理状态同步
3. 考虑升级到包含events Observable的较新Angular版本

这个问题展示了表单状态管理中的微妙之处，提醒开发者在处理复杂表单交互时要特别注意状态传播的完整性和正确性。