Kotodama UI
指南
组件
低代码
Demo
指南
组件
低代码
Demo

Form

字段协议：name + rules / required 收集值并校验；提交成功走 onFinish，失败走 onFinishFailed。默认仅在 submit 时校验；可用 validateTrigger 增加 change / blur。

不是 antd Form / rc-field-form 兼容层。

基础用法

<Form
  initialValues={{ name: '' }}
  onFinish={(values) => console.log(values)}
  onFinishFailed={(errors) => console.log(errors)}
>
  <Form.Item name="name" label="名称" required>
    <Input />
  </Form.Item>
  <Button type="submit">保存</Button>
</Form>

实时演示

*渠道

尚未提交

协议摘要

能力 API
值收集 Form.Item name + 子控件 value/onChange 注入
受控 values + onValuesChange
非受控 initialValues
规则 rules：required / min / max / pattern / validator
必填快捷 required（自动追加 required 规则）
提交 onFinish(values) / onFinishFailed(errors, values)
触发 validateTrigger: change | blur | submit（默认 submit）
外部错误 Form.Item error（优先于内部错误）

性能与用法纪律

  • 默认 validateTrigger={['submit']}，避免输入时全表重算
  • 每个 Form.Item 只包一个表单控件；复杂 UI 放在 Item 外
  • 不要在 Item 内挂重型测量/订阅组件

SEO / 语义

原则 说明
可见 label 营销留资须有可见 label，不要只靠 placeholder 命名
htmlFor 自动用 name 生成 id（可 htmlFor 覆盖）并关联控件
fieldset 单选组等用 asFieldset：label 渲染为 legend
错误在 DOM 错误文案以 role="alert" 留在文档中，并 aria-describedby 关联控件
适用场景 后台 CRUD 为主；留资页同样适用上述语义约束 
<Form.Item name="channel" label="渠道" asFieldset required>
  {/* RadioGroup 等 */}
</Form.Item>
ON THIS PAGE