深入理解ngx-formly中条件渲染字段的数据保留机制

在表单开发过程中，条件渲染是一个常见需求——根据某些条件动态显示或隐藏表单字段。ngx-formly作为Angular的强大表单构建库，提供了灵活的字段条件渲染功能，但开发者需要注意其默认行为可能导致的数据丢失问题。

条件渲染的基本实现

ngx-formly通过expressionProperties配置项实现条件渲染。开发者可以基于模型数据或其他字段值，动态控制字段的显示状态。典型的实现方式是在字段配置中使用hide属性：

fields: FormlyFieldConfig[] = [
  {
    key: 'toggle',
    type: 'checkbox',
    templateOptions: {
      label: '是否显示额外字段'
    }
  },
  {
    key: 'extraField',
    type: 'input',
    templateOptions: {
      label: '额外信息'
    },
    expressionProperties: {
      'templateOptions.hide': '!model.toggle'
    }
  }
];

默认行为与数据保留问题

ngx-formly从v6版本开始，默认启用了resetFieldOnHide选项。这意味着当字段被隐藏时，其对应的模型数据会被自动清除。这一设计虽然符合某些场景的需求（如不希望保留隐藏字段的数据），但在需要保留数据的场景下就会造成问题。

解决方案：配置全局选项

要保留隐藏字段的数据，需要在根模块中配置FormlyModule时关闭resetFieldOnHide选项：

@NgModule({
  imports: [
    FormlyModule.forRoot({
      extras: {
        resetFieldOnHide: false,  // 禁用隐藏时重置字段
      },
    }),
  ],
})
export class AppModule {}

替代方案：CSS隐藏而非条件渲染

有些开发者尝试通过CSS来隐藏字段（如设置display: none或visibility: hidden），但这种方法有几个缺点：

1. 字段仍然存在于DOM中，可能影响表单布局和性能
2. 表单验证可能仍然会作用于隐藏字段
3. 不符合ngx-formly的设计理念

相比之下，使用内置的条件渲染机制更为推荐，因为它能正确处理表单状态和验证逻辑。

最佳实践建议

1. 明确数据需求：在设计表单时，明确哪些字段需要在隐藏时保留数据，哪些需要清除
2. 版本兼容性：从v5升级到v6时，特别检查条件渲染字段的行为变化
3. 测试验证：确保隐藏/显示字段时，表单验证逻辑仍然符合预期
4. 性能考虑：对于大型表单，频繁的条件渲染可能影响性能，可考虑使用changeDetection策略优化

通过合理配置ngx-formly的条件渲染行为，开发者可以构建出既灵活又符合业务需求的动态表单体验。