跳转到内容

表单页

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

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

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

优先级
工单类型
缺陷
需求
咨询
提交之前

这一屏定了什么

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

换成你的项目

  • 复合控件参与原生提交与重置要给 name,规则见表单参与与重置
  • 异步校验直接在 validate 里返回 Promise,提交时表单会等它回来再放行或拦下。
  • 分组用字段组legend 是这一组的名字,说明文案会自动接进 aria-describedby

Released under The MIT License