SuperAPI AI 工具集

tanstack-vue-form-skilld

前端与建站

查看项目

更新于 10-16 00:20

技能介绍

用途:在编写、审查或调试导入 @tanstack/vue-form 的代码时提供参考。该包为 Vue 3 提供无头、类型安全的表单状态,重新导出 @tanstack/form-core 并新增 Vue 组件与 hooks。

环境:版本 1.33.5,捆绑 @tanstack/form-core@1.33.5 与 @tanstack/vue-store@^0.11.0;peer 依赖 vue ^3.4.0;测试矩阵含 TypeScript 5.4 至 5.9。仅从包根导入,唯一子路径导出为 ./package.json,双 ESM/CJS,sideEffects: false。

主要能力:useForm 创建表单,form.Field 创建字段,name 须为 defaultValues 的深层键(如 'details.email' 或 people[${i}].name)。插槽接收 { field, state },输入为受控:绑定 :value="field.state.value",通过 field.handleChange 更新,@blur="field.handleBlur";数字输入用 valueAsNumber;不要在插槽输入上写 v-model。响应式用 form.useSelector,模板用 form.Subscribe;form.useStore 已弃用。校验通过 validators 传入,支持 onMount、onChange、onBlur、onSubmit、onDynamic 及 Async 变体,兼容 Zod、Valibot、ArkType、Yup 等 Standard Schema 库。数组字段用 mode="array",通过 pushValue、removeValue、swapValues、moveValue、insertValue、replaceValue、clearValues 变更。表单分组用 form.FormGroup,group.handleSubmit() 仅提交该组。

版本规则:自 v1.28.0 起 field.state.meta.errors 默认扁平化;form.useStore 与 field.getValue() 已弃用。

限制与注意:Standard Schema 的 transform 不会被保留,onSubmit 收到输入数据,需在 onSubmit 内调用 schema.parse(value);表单级字段校验错误可能被字段自身校验覆盖;同步校验失败会跳过对应异步校验,除非 asyncAlways: true;canSubmit 在表单被触碰前为 true,建议结合 !canSubmit || isPristine 控制提交按钮,并优先用 aria-disabled。异步默认值需用 reactive 与 computed 包装。useFormId 为内部实现,不导出。官方文档见 https://tanstack.com/form/latest/docs/framework/vue/overview。