生态产品多个设计器现已发布候选版本

查看生态总览
跳转到内容

表单页 ​

一张新建工单的表:九个字段分成两组,值全在同一张表里,校验、错误摘要与重置由表单统一管。

新建工单
提交后进入值班队列,重复问题会被合并
先看一眼已知问题
近三天同类工单 12 条,其中 9 条已定位到同一处配置。
问题本身

写清复现步骤,值班的人不必再来回问

优先级
工单类型
提交之前

已提交:(尚未提交)

这一屏定了什么 ​

  • 值只有一份。 每个控件外面套一层 XhFormFieldGroup,控件就按它的 name 读写这张表里属于自己的那一格:初值取 defaultValues,改动写回表单,重置时跟着还原;控件上不写 v-model、不接 value 与改动回调,也就不存在两边不同步。错误态同样由表单下传,作用域插槽只用来取错误文案。
  • 校验在表这一层,不在控件里。 validate 拿到整张值表跑一遍,返回「字段名 → 错误文案」;跨字段的规则天然写得下,控件一个字都不必改。
  • 错误摘要是一处,不是九处。 提交没过时摘要显形并把焦点送到第一个出错的字段,条目一次全写上,谁露面由当下的错误表决定——无障碍那一册讲的就是这条通路。
  • 控件形态不一,控件外壳一致。 文本框、下拉、数字输入、标签输入四种控件的高度、内边距、字段淡底、描边与聚焦描边取的是同一组控件令牌,摆在一起才对得齐。
  • 两栏在窄屏落回一栏。 栅格写的是 minmax 而不是固定断点,响应式由内容宽度决定,不由设备决定。

换成你的项目 ​

  • 控件放进字段组就接上了值,规则与例外(控件自己给了值、组件内部的子控件)见表单参与与重置;复合控件参与原生提交与重置要给 name,规则也在那一页。
  • 异步校验直接在 validate 里返回 Promise,提交时表单会等它回来再放行或拦下。
  • 分组用字段组:legend 是这一组的名字,说明文案会自动接进 aria-describedby。

Released under The MIT License