ngx-formly中嵌套数组默认值问题的分析与解决

ngx-formly是一个强大的Angular动态表单库，它允许开发者通过JSON配置来生成复杂的表单结构。在使用过程中，开发者可能会遇到数组类型字段的默认值设置问题，特别是当数组嵌套在另一个数组中时。

问题现象

在ngx-formly中配置数组类型字段时，如果直接在顶层数组设置默认值，例如default: [{}]，这个默认值能够正常工作。然而，当数组嵌套在另一个数组中时（即数组的数组），默认值设置可能会失效，导致表单初始化时无法正确显示预设的默认结构。

问题本质

这个问题的核心在于ngx-formly对默认值的处理机制。默认值仅在字段值为undefined时才会被应用。当开发者显式传递了一个空对象{}作为模型值时，ngx-formly会认为该字段已经有值，因此不会应用配置中的默认值。

解决方案

要解决这个问题，开发者需要注意以下几点：

1. 对于需要设置默认值的数组字段，确保初始模型值为undefined，而不是空对象
2. 如果确实需要传递初始模型值，可以在模型值中包含与默认值相同的结构
3. 对于嵌套数组，需要确保每一层级的默认值都正确配置

正确的配置示例如下：

{
  "key": "nestedArray",
  "type": "array",
  "defaultValue": [{}],  // 设置默认值
  "fieldArray": {
    "fieldGroup": [
      {
        "key": "innerArray",
        "type": "array",
        "defaultValue": [{}],  // 嵌套数组也设置默认值
        "fieldArray": {
          "type": "input"
        }
      }
    ]
  }
}

最佳实践

1. 明确区分undefined和空对象的语义差异
2. 在复杂表单结构中，逐层检查默认值配置
3. 使用ngx-formly提供的调试工具检查表单模型的实际值
4. 对于复杂的嵌套结构，考虑编写自定义字段类型来简化配置

理解ngx-formly的默认值处理机制，可以帮助开发者避免类似问题，构建更加健壮的表单应用。