前端UI组件【免费下载链接】formily Cross Device High Performance Normal Form/Dynamic(JSON Schema) Form/Form Builder -- Support React/React Native/Vue 2/Vue 3项目地址https://gitcode.com/gh_mirrors/fo/formily点击查看免费下载本文深入解析 Formily 核心包packages/core中的ObjectField对象字段模型。ObjectField 用于承载值为对象类型的字段节点它继承了 Field 模型的全部能力并扩展出addProperty、removeProperty、existProperty三个用于动态管理对象属性的方法。读完本文你将掌握如何创建 ObjectField、如何安全地增删对象属性并触发响应式更新、ObjectField 的自动清理机制以及IObjectFieldState状态类型的完整含义可直接用于 Formily 驱动的复杂嵌套表单开发。一、ObjectField 是什么ObjectField 是调用表单模型的createObjectField工厂方法所返回的字段模型实例。在 Formily 的字段体系里共有四类字段模型模型数据形态说明Field任意标量基础字段其他字段的基类ArrayField数组数组型字段GeneralField联合类型成员ObjectField对象对象型字段GeneralField联合类型成员VoidField无数据纯结构型字段GeneralField联合类型成员因为 ObjectField 是继承自 Field 模型 的所以它天然具备 Field 的全部属性、方法与类型体系标题、数据源、校验器、展示状态、交互模式、生命周期等。本文只讲解 ObjectField 在 Field 之上扩展出的能力其余 API 请参考 Field 文档。1.1 创建 ObjectField通过表单实例的工厂方法创建interface createObjectField { (props: IFieldFactoryProps): ObjectField }在 Form 模型的工厂实现 中可以看到createObjectField内部会将basePath与name拼接成节点地址并对 value 做了强约束new ObjectField( address, { ...props, value: isObj(props.value) ? props.value : {}, }, this, this.props.designable )也就是说即使你不传 valueObjectField 的 value 也会被规范化为空对象{}这一点与 ArrayField 强制为数组[]的行为一致是字段值类型由字段种类决定这一设计的具体体现Field 文档中的FieldValue类型也明确指出如果在 ArrayField 中是强制数组类型ObjectField 中是强制对象类型。工厂方法同样遵循路径复用约定如果相同路径已存在字段实例多次调用会复用该实例不会重复创建。1.2 类型判定工具从源码的 类型检查器 可以看到Formily 还提供了配套的类型守卫isObjectField(node)判断节点是否为 ObjectField 实例isObjectFieldState(state)通过state?.displayName ObjectField判断状态对象是否为对象字段状态。对应测试可见 externals.spec.ts它们常被用于表单图Form Graph的遍历与状态还原场景。二、ObjectField 的扩展方法ObjectField 在 Field 之上只扩展了三个方法全部围绕对象属性的动态管理展开。这三个方法的实现集中在 ObjectField 模型源码2.1 addProperty —— 添加对象属性描述给对象添加属性并触发onInput。签名interface addProperty { (key: FormPathPattern, value: any): Promisevoid }实现原理addProperty (key: string, value: any) { this.form.setValuesIn(this.path.concat(key), value) this.additionalProperties.push(key) return this.onInput(this.value) }源码中addProperty并非简单地在本地对象上赋值而是委托给表单层的setValuesIn按路径精确写入值随后把新增的 key 记录进内部的additionalProperties数组最后调用onInput触发输入事件——这正是文档所说触发 onInput的底层来源。由于写入与触发都发生在响应式环境中UI 会随之自动更新。2.2 removeProperty —— 移除对象属性描述移除对象属性并触发onInput。签名interface removeProperty { (key: FormPathPattern): Promisevoid }实现原理removeProperty (key: string) { this.form.deleteValuesIn(this.path.concat(key)) this.additionalProperties.splice(this.additionalProperties.indexOf(key), 1) return this.onInput(this.value) }removeProperty对应调用表单层的deleteValuesIn删除路径上的值同时从additionalProperties中同步移除记录最后同样触发onInput。2.3 existProperty —— 判断属性是否存在描述判断属性是否存在。签名interface existProperty { (key: FormPathPattern): boolean }实现原理existProperty (key: string) { return this.form.existValuesIn(this.path.concat(key)) }该方法是纯查询操作通过existValuesIn判断当前字段路径下是否存在指定 key 对应的值不会触发任何副作用。2.4 测试用例印证在 object.spec.ts 中三个方法的行为被完整验证const object attach( form.createObjectField({ name: object, value: {}, }) ) expect(object.value).toEqual({}) object.addProperty(aaa, 123) expect(object.value).toEqual({ aaa: 123 }) // 添加属性生效 object.removeProperty(aaa) expect(object.value).toEqual({}) // 移除属性生效 expect(object.existProperty(aaa)).toBeFalsy() // 属性已不存在三、ObjectField 的自动清理机制makeAutoCleanable这是 ObjectField 区别于普通字段的关键机制也是源码中除三个公开方法之外最重要的部分。在 ObjectField 构造函数 中创建实例时会调用makeAutoCleanable()protected makeAutoCleanable() { this.disposers.push( reaction( () Object.keys(this.value || {}), (newKeys) { const filterKeys this.additionalProperties.filter( (key) !newKeys.includes(key) ) cleanupObjectChildren(this, filterKeys) } ) ) }其工作流程如下通过formily/reactive的reaction订阅Object.keys(this.value)——即当前对象字段的所有键当对象键集合发生变化时对比additionalProperties通过addProperty添加的键找出那些已被移除但尚未清理的键调用 cleanupObjectChildren 清理函数遍历表单字段图把路径前缀匹配当前对象字段地址、且首段 key 命中的子字段统一destroy()掉。意义当你通过removeProperty移除一个属性时与之绑定的子字段模型及其 UI、校验状态、副作用也会被一并销毁避免出现数据已删除但字段节点残留的内存泄漏与状态脏数据。这一点在 field.spec.ts 的 auto clean with ObjectField 用例 中有直接覆盖先创建对象字段及其子字段aa、bb随后通过移除属性验证对应子字段模型被自动销毁。四、状态类型 IObjectFieldStateObjectField 的状态类型为IObjectFieldState其主要属性参考 IFieldState唯一差别在于value的数据类型要求是对象。IFieldState 中与 value 强相关的核心字段包括字段说明value字段值ObjectField 下强制为对象initialValue字段默认值inputValue/inputValues触发 onInput 收集到的值集合display/pattern展示形态与交互模式required/validator必填标记与校验器valid/invalid/validateStatus校验状态errors/warnings/successes汇总含子节点反馈消息在操作对象字段时如果希望通过表单层的setFieldState/getFieldState批量读写状态可直接将IObjectFieldState作为 setter 的类型依据配合getFormGraph/setFormGraph还能对整棵字段树做序列化与还原。另外 Formily 的类型约定是简单对象类型统一以I开头使用interface定义IObjectFieldState正是遵循这一约定。五、ObjectField 的典型应用场景综合以上机制ObjectField 最常见的落地场景包括嵌套对象数据结构的表单如用户信息姓名、联系方式、地址子对象、配置面板中的分组数据用 ObjectField 承载整个对象用子 Field 表达具体属性动态增删键值对结合addProperty/removeProperty实现动态添加/删除某个对象成员的功能而无需手动维护字段树自动清理机制会保证字段节点与数据保持一致子表单嵌套表单ObjectField 继承自 Field 的submit、validate、reset等能力天然支持包含所有子节点的批量操作Field 文档明确指出这些 API 主要用于子表单场景配合对象形态的数据组织即可搭建多层嵌套表单。总结ObjectField 是 Formily 表单模型体系中管理对象型数据的核心节点它复用 Field 的全部基础能力仅以三个方法addProperty、removeProperty、existProperty完成对象属性的动态增删与查询其底层委托表单层的路径化读写 API 并触发onInput保证响应式更新makeAutoCleanable自动清理机制则确保被移除属性对应的子字段模型不会残留。理解 ObjectField 的实现与状态类型是掌握 Formily 嵌套表单与动态表单开发的关键一步。更多细节可继续阅读 Field 模型文档、Form 模型文档 以及 ObjectField 源码。赞分享前端UI组件【免费下载链接】formily Cross Device High Performance Normal Form/Dynamic(JSON Schema) Form/Form Builder -- Support React/React Native/Vue 2/Vue 3项目地址https://gitcode.com/gh_mirrors/fo/formily点击查看免费下载相关推荐Formily Core ObjectField 模型完全指南对象字段的动态属性增删与状态管理Formily Core ObjectField 模型完全指南对象字段的动态属性增删与状态管理 ObjectField 是 Formily 核心模型体系中专门前端UI组件Formily React ObjectField 组件深度指南动态对象字段建模、渲染与源码原理剖析Formily React ObjectField 组件深度指南动态对象字段建模、渲染与源码原理剖析 ObjectField 是 Formily 面向 Rea前端UI组件Formily formily/core 核心域模型完全指南从纯内核架构到字段、表单与联动模型Formily formily/core 核心域模型完全指南从纯内核架构到字段、表单与联动模型 导读 formily/core 是 Formily 全链路前端UI组件创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
企业数字化 ERP 产品动态
相关推荐
小模型、大模型与多模态怎么选？实战经验让AI效果翻倍 直接聊最务实的：天天刷到“小模型”“大模型”“多模态”这三个词，到底跟我用AI有什么关系？说句实话，我一开始也分不清，以为就是一个东西越做越大，后来自己做项目、调接口、本地部署踩了一圈坑，… · 2026/9/23 13:45:11
电影票房预测实战：从数据准备到XGBoost调参全流程解析 简介：面向毕业设计、课程设计与期末大作业场景，这份基于机器学习算法的电影票房预测系统完整项目，提供可直接运行的Python源码与配套文档数据，适合具备一定Python基础、希望快速落地完整项目的学习者。包体共59个文件，… · 2026/9/23 13:45:05
均匀线阵波束形成实战：Bartlett与Capon完整复现与避坑指南 简介：这份资源聚焦均匀直线阵的阵列信号建模与波束形成处理，面向学习阵列信号处理、空域谱估计的高年级本科生、研究生及工程技术人员，帮助理解从阵列流形建模到波束形成算法实现的完整链路。压缩包共2个文件，均为MATLAB的m脚本&a… · 2026/9/23 13:45:05
光伏支架安装技术交底：测量控制与验收标准三大指标解析 简介：面向铅山5.3MW集中式光伏扶贫项目的工程技术交底文档，适合光伏施工管理人员、安装班组和安全质量人员使用。PDF全文围绕施工准备、施工机械设备配置、劳动力计划、施工工序及钢构安装工艺、质量保证措施等展开，明确测量放线、底梁横梁固… · 2026/9/23 14:30:18
打包英语源码拆解：3步搞定版本升级API变更的保姆级教程 打包英语源码拆解：3步搞定版本升级API变更的保姆级教程 版本升级后 API 全变了，报错堆栈看得人眼晕，是不是感觉之前的经验一夜作废？别慌，今天这篇【打包英语】源码解析就是为你准备的保姆级教程。我们直接撕开底层代码，看看那些让你头秃的接口… · 2026/9/23 14:30:10
Dota2启动不了？3个底层排查法，告别性能优化焦虑 Dota2启动不了？3个底层排查法，告别性能优化焦虑 刚把同事发来的启动脚本复制到本地，双击运行，黑窗口一闪而过，游戏图标还在，但就是进不去。你盯着屏幕，心里那股无名火蹭蹭往上冒：这代码看着挺规范，怎么到我这就跑不通？更让人头疼的是，为了排… · 2026/9/23 14:30:10
ABB IRC5 M2004 控制柜电路图深度解析：从读图到故障定位 简介：ABB机器人IRC5 M2004控制器电路图是面向工业机器人电气设计、调试与维护人员的专业参考资料，适用于机器人控制系统架构学习、硬件选型与故障排查等场景。资源包内含1个PDF文件，整体约6.67MB，内容为ABB官方发布的IRC5 M2004控… · 2026/9/23 14:30:04
5分钟搞懂拯救公主：图解原理与实战避坑指南 5分钟搞懂拯救公主：图解原理与实战避坑指南 官方文档翻了三遍，核心逻辑还是没抓住重点？这种“文档太长、重点模糊”的痛点，几乎是每个开发者入行时的必经之路。别急，今天咱们不背八股文，直接上 图解原理… · 2026/9/23 14:29:51
有担保的海外广告账户资源平台 跨境出海投放过程中，不少企业在采购海外广告账户资源时，都遭遇过私域交易的各类风险：付款之后卖家失联、交付资产与描述不符、出现问题没有维权渠道。因此，是否具备正规交易担保机制，已经成为出海团队筛选资源平台的核… · 2026/9/23 14:29:51
3招搞定手机怎么下载微信面试难题实战项目解析 3招搞定手机怎么下载微信面试难题实战项目解析 面试被问“手机怎么下载微信”背后的原理，90%的人答不上来。别笑，这看似弱智的问题，实则是考察你对移动应用分发机制、安全校验及网络协议理解的试金石。我带过不少校招新人，他们背了八股文，却连一个A… · 2026/9/23 0:00:03
你有新短消息请注意查收：3个新手避坑指南搞定消息系统选型 你有新短消息请注意查收：3个新手避坑指南搞定消息系统选型 面试被问“高并发下如何保证消息不丢失”，你张口就是“用Redis”，结果面试官追问“如果Redis宕机了怎么办”，你瞬间卡壳。这种场景太常见了，很多新手在背八股文时，只记住了技术名词… · 2026/9/23 0:00:29
