在ngx-formly中排除特定表单字段的提交值处理

在基于JSON驱动的表单开发中，我们经常会遇到需要显示某些信息但不希望这些字段值被提交到服务器的情况。本文将详细介绍如何在使用ngx-formly构建Angular Material表单时，优雅地处理这类需求。

显示字段与提交字段的区分

在实际业务场景中，表单通常包含两种类型的字段：

1. 交互式字段：用户可以直接输入或选择数据的字段，如表单输入框、下拉选择等
2. 展示型字段：仅用于显示信息，不接收用户输入，如计算结果、参考信息等

对于展示型字段，我们通常不希望它们的值被包含在最终的表单提交数据中。

ngx-formly的解决方案

ngx-formly提供了简洁的方式来实现这一需求。核心思路是通过字段配置来控制哪些字段应该包含在表单值中。

关键配置方法

在定义表单字段的JSON配置中，不指定key属性即可将该字段排除在表单值之外：

{
  "type": "your-custom-display-type",
  "templateOptions": {
    "label": "仅显示信息"
  }
  // 注意：这里故意不包含key属性
}

实现原理

ngx-formly在构建表单时，会依据以下规则处理字段值：

1. 只有配置了key属性的字段才会被包含在表单值对象中
2. 未配置key的字段仅作为展示用途，不会出现在最终的表单值里
3. 这种设计遵循了"显式优于隐式"的原则，开发者需要明确指定哪些字段应该参与数据绑定

进阶应用场景

动态显示字段

对于需要根据条件动态显示/隐藏的字段，同样适用此规则。即使字段在界面上可见，只要没有key属性就不会影响表单值。

自定义字段类型

当创建自定义字段类型用于展示目的时，建议：

1. 在类型定义中明确说明该类型的设计用途
2. 在文档中注明不需要配置key属性
3. 可以考虑在自定义类型中强制校验，防止误配置key

最佳实践建议

1. 语义化命名：为展示型字段使用专门的类型名称，如info-display、readonly-field等
2. 团队规范：在团队内部建立字段类型的命名和使用规范
3. 文档注释：在字段配置中添加注释说明字段用途
4. 表单验证：确保展示字段不影响表单的验证状态

通过合理运用ngx-formly的这些特性，可以构建出既满足用户界面需求又保持数据提交简洁性的表单应用。