【免费下载链接】formischThe lightweight, schema-first, and fully type-safe form library for React, Solid, Vue, Svelte and more.项目地址https://gitcode.com/gh_mirrors/fo/formisch点击查看免费下载Formisch Methods是轻量级表单库Formisch提供的框架无关方法集覆盖 React、Solid、Vue、Svelte、Preact、Qwik、Angular 和 React Native。它让你用一套完全类型安全type-safe的 API 读取表单值、校验数据、操作动态数组所有方法都基于 Valibot schema 推导类型写错字段路径会直接报错。Formisch 表单库的类型安全示例Valibot schema 校验错误时的精确类型提示/react-form-library-comparison/type-safe-issues.jpg)30秒了解 Methods API 的设计思路所有方法都遵循同一个调用模式第一个参数是 form store第二个参数是配置对象config。掌握这一个规律你就掌握了整个 API// 读取某个字段的当前值 const emailInput getInput(loginForm, { path: [email] }); // 把数组中的第 1 项移动到第 4 位 move(loginForm, { path: [items], from: 0, to: 3 });这种一致的签名设计详见 index.ts 的统一导出带来两个好处可预测path参数在所有方法里含义一致指定到 schema 内的任意字段路径可拆分方法包按框架提供独立入口如formisch/methods/react按需引入零多余依赖。 方法分类速查表按官方文档的组织方式参考 form-methods 指南/react/guides/(main-concepts)/form-methods/index.mdx)全部方法分为六大类1️⃣ 读取值Reading values方法作用源码位置getInput获取表单或指定字段的当前输入值getInput.tsgetErrors获取表单级或指定字段的错误消息数组getErrors.tsgetDeepError深度遍历返回第一条错误消息适合富文本编辑器等嵌套结构getDeepError.tsgetDeepErrors深度遍历返回子树内所有错误消息getDeepErrors.tsgetDeepErrorEntry返回第一个出错字段的「路径 错误」配对getDeepErrorEntry.tsgetDeepErrorEntries返回所有出错字段的「路径 错误」列表getDeepErrorEntries.ts 区别一句话getErrors只看当前这一层getDeep*会递归进入嵌套字段和数组项。2️⃣ 字段状态Field state四个布尔查询方法都支持可选path缩小检查范围不传则检查整个表单方法回答的问题isTouched用户是否接触过该字段获得过焦点或改过值isEdited用户是否改过该字段的值isDirty当前值是否与初始值不同见 isDirty.tsisValid该字段含所有子字段是否没有校验错误3️⃣ Dirty 状态部分更新利器方法作用getDirtyInput只提取被改动过的输入值数组视为原子整体getDirtyPaths返回所有脏字段的路径列表pickDirty用表单的脏字段作遮罩过滤任意外部值只保留改动部分pickDirty.ts这三兄弟是保存时只提交变更字段场景的标配——配合 PATCH 请求可以省掉大量冗余数据。4️⃣ 设置值Setting values方法作用setInput程序化更新整个表单或单个字段的值并按需触发校验setInput.tssetErrors手动设置/清除自定义错误传null即清除适合服务端返回的校验信息⚠️易混淆点初始数据变了如远程数据刷新应该用reset加新的initialInput而不是setInput——后者只改当前值不会重置初始状态。5️⃣ 表单控制Form control方法作用handleSubmit生成提交事件处理器自动preventDefault→ 校验 → 成功后拿到类型安全的 outputhandleSubmit.tsvalidate手动触发整表校验可配置shouldFocus聚焦首个错误字段submit调用原生requestSubmit()程序化提交等价于点击提交按钮focus程序化聚焦指定字段的第一个可聚焦元素reset重置表单支持keepInput/keepTouched/keepEdited/keepErrors精细保留也可传入新initialInputreset.ts6️⃣ 数组操作Field arrays针对动态列表如收货地址、优惠券码路径统一用ValidArrayPath类型约束方法操作关键参数insert在指定下标插入新项后续项自动后移pathat省略则追加到末尾remove删除指定下标的项pathatmove把某项从from移到tofromtoswap交换两个下标位置的项atandreplace用新初始值整体替换某一项atinitialInput源码分别位于 insert.ts、remove.ts、move.ts、swap.ts 和 replace.ts。这些操作会在内部正确迁移每项的 touched/dirty/错误状态无需手动同步。 三个典型场景怎么搭配方法场景一提交前自动聚焦错误handleSubmit内置shouldFocus: true校验失败时自动跳到第一个错误字段你也可以在自定义按钮里先调validate(form, { shouldFocus: true })再决定是否允许提交。场景二离开页面前拦截未保存修改路由守卫里只需一行isDirty(form)为true就弹确认框。配合reset(form)可在用户选择放弃修改时干净地还原。场景三只提交变更部分PATCH 风格const changes pickDirty(form, { from: result.output });changes里只包含用户真正改过的字段直接作为 PATCH 请求体即可。 想在源码里深挖方法包入口packages/methods/src/index.ts每个方法独立成目录实现 测试 类型测试底层状态操作packages/core/src/包含字段 store 的读写、数组状态迁移copyItemState、swapItemState等各框架绑定packages/core/src/framework/构建时按目标框架index.react.ts、index.vue.ts、index.svelte.ts…注入对应信号实现官方文档站源码website/src/routes/(docs)//)可按框架查看每种方法的完整 API 页面。总结Formisch Methods API 的核心记忆点只有三个统一签名——method(form, { path, ... })一个模式贯穿全部方法深浅两套错误读取——getErrors看当前层getDeep*递归整棵子树类型安全到底—— 字段路径由 Valibot schema 推导formisch/core与formisch/methods让校验、解析、类型推导一次完成。从getInput到swap读值、校验、状态、数组操作各有归位配合框架适配器即可在任意前端框架中构建完全类型安全的表单。赞分享【免费下载链接】formischThe lightweight, schema-first, and fully type-safe form library for React, Solid, Vue, Svelte and more.项目地址https://gitcode.com/gh_mirrors/fo/formisch点击查看免费下载相关推荐SMPageControl API参考手册页码控件全部属性与方法完整列表SMPageControl API参考手册页码控件全部属性与方法完整列表 SMPageControl 是一款 iOS 的 页码控件Page ControlUI库/组件移动开发Cesium3DTilesConverter3D模型格式转换利器完整指南Cesium3DTilesConverter是一个基于C17和Qt开发的开源3D模型格式转换工具专门用于将倾斜摄影模型和矢量数据转换为Cesium 3D开发工具AngularUtils面包屑导航基于ui-router的自动生成方案AngularUtils面包屑导航基于ui router的自动生成方案 AngularUtils面包屑导航是一款为AngularJS应用打造的高效组件它能够UI库/组件前端创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考