ngx-formly中如何保留隐藏字段的模型值

在Angular表单开发中，ngx-formly是一个非常强大的动态表单生成库。本文将深入探讨如何在隐藏表单字段时保留其模型值，避免数据丢失的问题。

问题背景

在使用ngx-formly构建动态表单时，开发者经常会遇到一个常见场景：通过条件表达式隐藏某些表单字段后，当这些字段再次显示时，之前输入的值会被清空。这是因为默认情况下，ngx-formly会在字段隐藏时自动重置其模型值。

解决方案

ngx-formly提供了两种方式来解决这个问题：

1. 单个字段配置

对于特定的表单字段，可以通过设置resetOnHide属性为false来保留其值：

fields: FormlyFieldConfig[] = [
  {
    key: 'name',
    type: 'input',
    templateOptions: {
      label: '姓名'
    },
    hideExpression: 'model.hideField',
    resetOnHide: false  // 关键配置
  }
];

2. 全局配置

如果希望所有隐藏字段都保留值，可以在模块配置中设置全局选项：

FormlyModule.forRoot({
  extras: {
    resetFieldOnHide: false  // 全局禁用隐藏时重置
  }
}),

技术原理

ngx-formly的这种行为设计是为了保持表单的整洁性，避免模型中存在不必要的字段值。当字段被隐藏时，默认会触发以下操作：

1. 从表单控件树中移除对应的FormControl
2. 从模型对象中删除对应的属性值

通过设置resetOnHide或resetFieldOnHide为false，可以改变这一默认行为，使系统在隐藏字段时仅从UI中移除控件，而保留模型中的数据。

最佳实践

1. 数据敏感型字段：对于包含重要数据的字段，建议设置为不重置
2. 临时性字段：对于临时收集的非关键信息，可以保持默认重置行为
3. 性能考虑：保留大量隐藏字段的值可能会轻微影响性能，需权衡使用

总结

ngx-formly提供了灵活的配置选项来控制隐藏字段的行为。理解并合理使用resetOnHide和resetFieldOnHide配置，可以帮助开发者构建更加用户友好的动态表单，避免用户输入数据的意外丢失。