SuperAPI AI 工具集

shadcn-errors-form-state

前端与建站

查看项目

更新于 10-15 22:18

技能介绍

用途:排查 shadcn Form(基于 react-hook-form)表单静默提交空值、Select 不校验、FormMessage 不显示 zod 错误等问题。

主要能力:

  1. register 与 Controller/FormField 选择矩阵:原生 input、textarea、select、checkbox、radio 可用 register;Radix 包装的 Select、Checkbox、RadioGroup、Switch、Slider、Combobox、Calendar/DatePicker 及第三方受控组件必须用 Controller/FormField,因它们使用 onValueChange、onCheckedChange、onSelect 而非 onChange,register 会静默失效。
  2. watch 过度渲染:组件体内 form.watch("x") 会订阅整个组件;改用子组件中的 useWatch({ control, name }),或用回调形式 watch((v) => ...) 不触发重渲染。
  3. defaultValues / values / reset:defaultValues 只在挂载时设置,须为每个受控字段提供显式初值(字符串用 ""、布尔用 false、数组用 []),避免 undefined 导致非受控转受控警告与首字符丢失;异步初值用 values,提交或取消后用 form.reset,支持 keepErrors 等保留标志。
  4. FormMessage 必须在 FormField 的 render 回调内,否则无上下文不渲染。
  5. zodResolver 的 schema 路径须与 FormField name 完全一致,拼写差异会导致不校验、不报错。
  6. formState 是 Proxy,须解构读取才会订阅;isValid 仅在 mode 为 onChange/onTouched/onBlur 时更新。handleSubmit(onValid, onInvalid) 的第二参数用于校验失败时提示或滚动定位。

适用场景:表单值未到提交处理器、校验未运行、错误不显示、每次按键全表单重渲染等诊断。资料提供决策树与 anti-patterns 参考文件。

限制:该技能为排查规则集合,非独立可安装工具;具体安装命令与使用方式资料未提供。