表单控件

ElfUI 支持 form-associated custom elements。组件声明 formControl: true 后可以参与原生 <form> 提交、校验和重置。

import { defineHtml, defineOptions, useFormControlContext } from "@elfui/core";

defineOptions({ formControl: true });

const form = useFormControlContext<string>();

const onInput = (event: Event): void => {
  form.setValue((event.target as HTMLInputElement).value);
};

export const ElfInput = defineHtml(` <input @input=${onInput} /> `);

使用时和原生字段一样放进 form，并提供 name：

html

<form>
  <elf-input name="email"></elf-input>
  <button type="submit">提交</button>
</form>

校验与提交

form.rules([{ validator: (value) => value.length > 0 || "请输入内容" }]);

const result = await form.validate();
if (!result.valid) form.report();

setValue() 同步表单值，validate() 返回校验结果，report() 调用浏览器原生校验提示。组件还应把 disabled、required、name 等公开 props 同步到实际输入元素，保证键盘与辅助技术行为一致。

Runtime 会接入浏览器原生 formResetCallback、formDisabledCallback 和 formStateRestoreCallback。因此表单 reset、禁用 fieldset 和浏览器状态恢复会同步到同一控制器；form.disabled 可读取当前禁用状态。setDisabled() 与 restore() 是平台接缝，普通业务代码通常不需要手动调用。

重置

form.reset();

WARNING

重置应回到组件声明的默认值。业务表单布局、错误文案与字段联动属于组件库层，不应塞进框架 form helper。

表单控件 ​

校验与提交 ​

重置 ​

表单控件

校验与提交

重置