Form 表单
表单包含 input、radio、select、checkbox 等需要用户输入的组件。使用表单，您可以收集、验证和提交数据。
TIP
Form 组件已经从 2. x 的 Float 布局升级为 Flex 布局。
典型表单
最基础的表单包括各种输入表单项，比如input、select、radio、checkbox等。
在每一个 form 组件中，你需要一个 form-item 字段作为输入项的容器，用于获取值与验证值。
TIP
W3C 标准定义：
当一个表单中只有一个单行文本输入字段时， 浏览器应当将在此字段中按下 Enter （回车键）的行为视为提交表单的请求。 如果希望阻止这一默认行为，可以在 <el-form> 标签上添加 @submit.prevent。
export function FormBasic() { const [form, setForm] = useState({ name: "", region: "", date1: null as Date | null, date2: null as Date | null, delivery: false, type: [] as string[], resource: "", desc: "", }); const patch = (patchValue: Partial<typeof form>) => setForm((prev) => ({ ...prev, ...patchValue })); return ( <ElForm model={form} labelWidth="auto" style={formStyle}> <ElFormItem label="Activity name"> <ElInput value={form.name} onChange={(v) => patch({ name: v })} /> </ElFormItem> <ElFormItem label="Activity zone"> <ElSelect value={form.region} onChange={(v) => patch({ region: String(v) })} placeholder="please select your zone" options={[ { value: "shanghai", label: "Zone one" }, { value: "beijing", label: "Zone two" }, ]} /> </ElFormItem> <ElFormItem label="Activity time"> <ElCol span={11}> <ElDatePicker value={form.date1} onChange={(v) => patch({ date1: v as Date | null })} type="date" placeholder="Pick a date" style={{ width: "100%" }} /> </ElCol> <ElCol span={2} style={{ textAlign: "center" }}> <span style={{ color: "var(--el-text-color-secondary)" }}>-</span> </ElCol> <ElCol span={11}> <ElTimePicker value={form.date2} onChange={(v) => patch({ date2: v as Date | null })} placeholder="Pick a time" style={{ width: "100%" }} /> </ElCol> </ElFormItem> <ElFormItem label="Instant delivery"> <ElSwitch checked={form.delivery} onCheckedChange={(v) => patch({ delivery: v })} /> </ElFormItem> <ElFormItem label="Activity type"> <ElCheckboxGroup value={form.type} onChange={(v) => patch({ type: v as string[] })} > {[ "Online activities", "Promotion activities", "Offline activities", "Simple brand exposure", ].map((item) => ( <ElCheckbox key={item} value={item}> {item} </ElCheckbox> ))} </ElCheckboxGroup> </ElFormItem> <ElFormItem label="Resources"> <ElRadioGroup value={form.resource} onChange={(v) => patch({ resource: String(v) })} > {["Sponsor", "Venue"].map((item) => ( <ElRadio key={item} value={item}> {item} </ElRadio> ))} </ElRadioGroup> </ElFormItem> <ElFormItem label="Activity form"> <ElInput type="textarea" value={form.desc} onChange={(v) => patch({ desc: v })} /> </ElFormItem> <ElFormItem> <ElButton type="primary">Create</ElButton> <ElButton>Cancel</ElButton> </ElFormItem> </ElForm> );}行内表单
当垂直方向空间受限且表单较简单时，可以在一行内放置表单。
通过设置 inline 属性为 true 可以让表单域变为行内的表单域。
export function FormInline() { const [form, setForm] = useState({ user: "", region: "", date: null as Date | null, }); const patch = (patchValue: Partial<typeof form>) => setForm((prev) => ({ ...prev, ...patchValue })); return ( <ElForm inline model={form}> <ElFormItem label="Approved by"> <ElInput value={form.user} onChange={(v) => patch({ user: v })} placeholder="Approved by" style={{ width: 220 }} clearable /> </ElFormItem> <ElFormItem label="Activity zone"> <ElSelect value={form.region} onChange={(v) => patch({ region: String(v) })} placeholder="Activity zone" style={{ width: 220 }} clearable options={[ { value: "shanghai", label: "Zone one" }, { value: "beijing", label: "Zone two" }, ]} /> </ElFormItem> <ElFormItem label="Activity time"> <ElDatePicker value={form.date} onChange={(v) => patch({ date: v as Date | null })} type="date" placeholder="Pick a date" clearable /> </ElFormItem> <ElFormItem> <ElButton type="primary">Query</ElButton> </ElFormItem> </ElForm> );}对齐方式
根据你们的设计情况，来选择最佳的标签对齐方式。
您可以分别设置 el-form-item 的label-position 2.7.7. 如果值为空, 则会使用 el-form的label-position。
通过设置 label-position 属性可以改变表单域标签的位置，可选值为 top、left, 当设为 top 时标签会置于表单域的顶部
export function FormAlignment() { const [labelPosition, setLabelPosition] = useState<"left" | "right" | "top">( "right", ); const [itemLabelPosition, setItemLabelPosition] = useState< "" | "left" | "right" | "top" >(""); const [form, setForm] = useState({ name: "", region: "", type: "" }); const patch = (patchValue: Partial<typeof form>) => setForm((prev) => ({ ...prev, ...patchValue })); return ( <ElForm labelPosition={labelPosition} labelWidth="auto" model={form} style={formStyle} > <ElFormItem label="Form Align" labelPosition="right"> <ElRadioGroup value={labelPosition} onChange={(v) => setLabelPosition(v as "left" | "right" | "top") } ariaLabel="label position" > <ElRadio button value="left">Left</ElRadio> <ElRadio button value="right">Right</ElRadio> <ElRadio button value="top">Top</ElRadio> </ElRadioGroup> </ElFormItem> <ElFormItem label="Form Item Align" labelPosition="right"> <ElRadioGroup value={itemLabelPosition} onChange={(v) => setItemLabelPosition(v as "" | "left" | "right" | "top") } ariaLabel="item label position" > <ElRadio button value="">Empty</ElRadio> <ElRadio button value="left">Left</ElRadio> <ElRadio button value="right">Right</ElRadio> <ElRadio button value="top">Top</ElRadio> </ElRadioGroup> </ElFormItem> <ElFormItem label="Name" labelPosition={itemLabelPosition}> <ElInput value={form.name} onChange={(v) => patch({ name: v })} /> </ElFormItem> <ElFormItem label="Activity zone" labelPosition={itemLabelPosition}> <ElInput value={form.region} onChange={(v) => patch({ region: v })} /> </ElFormItem> <ElFormItem label="Activity form" labelPosition={itemLabelPosition}> <ElInput value={form.type} onChange={(v) => patch({ type: v })} /> </ElFormItem> </ElForm> );}表单校验
Form 组件允许你验证用户的输入是否符合规范，来帮助你找到和纠正错误。
Form 组件提供了表单验证的功能，只需为 rules 属性传入约定的验证规则，并将 form-Item 的 prop 属性设置为需要验证的特殊键值即可。校验规则参见 async-validator
export function FormValidation() { const formRef = useRef<FormExpose>(null); const [form, setForm] = useState({ name: "Hello", region: "", count: "", date1: null as Date | null, date2: null as Date | null, delivery: false, location: "", type: [] as string[], resource: "", desc: "", }); const [result, setResult] = useState(""); const patch = (patchValue: Partial<typeof form>) => setForm((prev) => ({ ...prev, ...patchValue })); const submit = async () => { try { const ok = await formRef.current!.validate(); setResult(ok ? "submit!" : "not valid"); } catch (fields) { setResult(`error submit! ${JSON.stringify(Object.keys(fields as object))}`); } }; return ( <ElForm ref={formRef} model={form} rules={VALIDATION_RULES} labelWidth="auto" style={formStyle} onModelChange={(next) => setForm(next as typeof form)} > <ElFormItem label="Activity name" prop="name"> <ElInput value={form.name} onChange={(v) => patch({ name: v })} /> </ElFormItem> <ElFormItem label="Activity zone" prop="region"> <ElSelect value={form.region} onChange={(v) => patch({ region: String(v) })} placeholder="Activity zone" options={[ { value: "shanghai", label: "Zone one" }, { value: "beijing", label: "Zone two" }, ]} /> </ElFormItem> <ElFormItem label="Activity count" prop="count"> <ElSelectV2 value={form.count} onChange={(v) => patch({ count: String(v ?? "") })} placeholder="Activity count" options={VALIDATION_OPTIONS} /> </ElFormItem> <ElFormItem label="Activity time" required> <ElCol span={11}> <ElFormItem prop="date1"> <ElDatePicker value={form.date1} onChange={(v) => patch({ date1: v as Date | null })} type="date" aria-label="Pick a date" placeholder="Pick a date" style={{ width: "100%" }} /> </ElFormItem> </ElCol> <ElCol span={2} style={{ textAlign: "center" }}> <span style={{ color: "var(--el-text-color-secondary)" }}>-</span> </ElCol> <ElCol span={11}> <ElFormItem prop="date2"> <ElTimePicker value={form.date2} onChange={(v) => patch({ date2: v as Date | null })} aria-label="Pick a time" placeholder="Pick a time" style={{ width: "100%" }} /> </ElFormItem> </ElCol> </ElFormItem> <ElFormItem label="Instant delivery" prop="delivery"> <ElSwitch checked={form.delivery} onCheckedChange={(v) => patch({ delivery: v })} /> </ElFormItem> <ElFormItem label="Activity location" prop="location"> <ElSegmented value={form.location} onChange={(v) => patch({ location: String(v) })} options={["Home", "Company", "School"]} /> </ElFormItem> <ElFormItem label="Activity type" prop="type"> <ElCheckboxGroup value={form.type} onChange={(v) => patch({ type: v as string[] })} > {[ "Online activities", "Promotion activities", "Offline activities", "Simple brand exposure", ].map((item) => ( <ElCheckbox key={item} value={item}> {item} </ElCheckbox> ))} </ElCheckboxGroup> </ElFormItem> <ElFormItem label="Resources" prop="resource"> <ElRadioGroup value={form.resource} onChange={(v) => patch({ resource: String(v) })} > {["Sponsorship", "Venue"].map((item) => ( <ElRadio key={item} value={item}> {item} </ElRadio> ))} </ElRadioGroup> </ElFormItem> <ElFormItem label="Activity form" prop="desc"> <ElInput type="textarea" value={form.desc} onChange={(v) => patch({ desc: v })} /> </ElFormItem> <ElFormItem> <ElButton type="primary" onClick={submit}>Create</ElButton> <ElButton onClick={() => formRef.current?.resetFields()}> Reset </ElButton> </ElFormItem> {result && <p style={{ color: "var(--el-color-info)" }}>{result}</p>} </ElForm> );}自定义校验规则
这个例子中展示了如何使用自定义验证规则来完成密码的二次验证。
本例还使用status-icon属性为输入框添加了表示校验结果的反馈图标。
TIP
自定义的校验回调函数必须被调用。校验规则参见 async-validator
export function FormCustomValidation() { const formRef = useRef<FormExpose>(null); const [form, setForm] = useState<{ pass: string; checkPass: string; age: string | number; }>({ pass: "", checkPass: "", age: "" }); const [result, setResult] = useState(""); const formValueRef = useRef(form); useEffect(() => { formValueRef.current = form; }, [form]); const patch = (patchValue: Partial<typeof form>) => setForm((prev) => ({ ...prev, ...patchValue })); const checkAge = useCallback<FormValidator>((_rule, value, callback) => { if (!value) { callback(new Error("Please input the age")); return; } window.setTimeout(() => { if (!Number.isInteger(value)) { callback(new Error("Please input digits")); } else if (value < 18) { callback(new Error("Age must be greater than 18")); } else { callback(); } }, 1000); }, []); const validatePass = useCallback<FormValidator>( (_rule, value, callback) => { if (value === "") { callback(new Error("Please input the password")); return; } if (formValueRef.current.checkPass !== "") { formRef.current?.validateField("checkPass").catch(() => {}); } callback(); }, [], ); const validatePass2 = useCallback<FormValidator>((_rule, value, callback) => { if (value === "") { callback(new Error("Please input the password again")); } else if (value !== formValueRef.current.pass) { callback(new Error("Two inputs don't match!")); } else { callback(); } }, []); const rules = useMemo<FormRules>( () => ({ pass: [{ validator: validatePass, trigger: "blur" }], checkPass: [{ validator: validatePass2, trigger: "blur" }], age: [{ validator: checkAge, trigger: "blur" }], }), [checkAge, validatePass, validatePass2], ); const submit = () => { formRef.current?.validate((valid) => { setResult(valid ? "submit!" : "error submit!"); }); }; return ( <ElForm ref={formRef} model={form} rules={rules} labelWidth="auto" statusIcon scrollToError style={formStyle} onModelChange={(next) => setForm(next as typeof form)} > <ElFormItem label="Password" prop="pass"> <ElInput type="password" autoComplete="off" value={form.pass} onChange={(v) => patch({ pass: v })} /> </ElFormItem> <ElFormItem label="Confirm" prop="checkPass"> <ElInput type="password" autoComplete="off" value={form.checkPass} onChange={(v) => patch({ checkPass: v })} /> </ElFormItem> <ElFormItem label="Age" prop="age"> <ElInput value={form.age} onChange={(v) => { const next = Number.parseFloat(v); patch({ age: Number.isNaN(next) ? v : next }); }} /> </ElFormItem> <ElFormItem> <ElButton type="primary" onClick={submit}>Submit</ElButton> <ElButton onClick={() => formRef.current?.resetFields()}> Reset </ElButton> </ElFormItem> {result && <p style={{ color: "var(--el-color-info)" }}>{result}</p>} </ElForm> );}添加/删除表单项
除了一次通过表单组件上的所有验证规则外. 您也可以动态地通过验证规则或删除单个表单字段的规则。
export function FormFormItems() { const formRef = useRef<FormExpose>(null); const [form, setForm] = useState<{ email: string; domains: DomainItem[] }>({ email: "", domains: [{ key: 1, value: "" }], }); const nextKeyRef = useRef(2); const [result, setResult] = useState(""); const updateDomain = (key: number, value: string) => setForm((prev) => ({ ...prev, domains: prev.domains.map((item) => item.key === key ? { ...item, value } : item, ), })); const removeDomain = (key: number) => setForm((prev) => ({ ...prev, domains: prev.domains.filter((item) => item.key !== key), })); const addDomain = () => setForm((prev) => ({ ...prev, domains: [ ...prev.domains, { key: nextKeyRef.current++, value: "" }, ], })); const submit = () => { formRef.current?.validate((valid) => { setResult(valid ? "submit!" : "error submit!"); }); }; return ( <ElForm ref={formRef} model={form} labelWidth="auto" style={formStyle} onModelChange={(next) => setForm(next as typeof form)} > <ElFormItem label="Email" prop="email" rules={EMAIL_RULES}> <ElInput value={form.email} onChange={(v) => setForm((prev) => ({ ...prev, email: v }))} /> </ElFormItem> {form.domains.map((domain, index) => ( <ElFormItem key={domain.key} label={`Domain${index}`} prop={`domains.${index}.value`} rules={DOMAIN_RULES} > <ElInput value={domain.value} onChange={(v) => updateDomain(domain.key, v)} /> <ElButton style={{ marginTop: 8 }} onClick={() => removeDomain(domain.key)} > Delete </ElButton> </ElFormItem> ))} <ElFormItem> <ElButton type="primary" onClick={submit}>Submit</ElButton> <ElButton onClick={addDomain}>New domain</ElButton> <ElButton onClick={() => formRef.current?.resetFields()}> Reset </ElButton> </ElFormItem> {result && <p style={{ color: "var(--el-color-info)" }}>{result}</p>} </ElForm> );}数字类型验证
数字类型的验证需要在 v-model 处加上 .number 的修饰符，这是 Vue 自身提供的用于将绑定值转化为 number 类型的修饰符。
TIP
当一个 el-form-item 嵌套在另一个 el-form-item 中时，其标签宽度将为 0。如果需要可以为 el-form-item 单独设置 label-width 属性。
export function FormNumberValidate() { const formRef = useRef<FormExpose>(null); const [form, setForm] = useState<{ age: string | number }>({ age: "" }); const [result, setResult] = useState(""); const submit = () => { formRef.current?.validate((valid) => { setResult(valid ? "submit!" : "error submit!"); }); }; return ( <ElForm ref={formRef} model={form} labelWidth="auto" style={formStyle} onModelChange={(next) => setForm(next as typeof form)} > <ElFormItem label="age" prop="age" rules={NUMBER_RULES}> <ElInput value={form.age} autoComplete="off" onChange={(v) => { const next = Number.parseFloat(v); setForm({ age: Number.isNaN(next) ? v : next }); }} /> </ElFormItem> <ElFormItem> <ElButton type="primary" onClick={submit}>Submit</ElButton> <ElButton onClick={() => formRef.current?.resetFields()}> Reset </ElButton> </ElFormItem> {result && <p style={{ color: "var(--el-color-info)" }}>{result}</p>} </ElForm> );}尺寸控制
表单中的所有子组件都继承了该表单的 size 属性。同样，form-item 也有一个 size 属性。
如果希望某个表单项或某个表单组件的尺寸不同于 Form 上的 size 属性，直接为这个表单项或表单组件设置自己的 size 属性即可。
export function FormSizeControl() { const [size, setSize] = useState<"large" | "default" | "small">("default"); const [labelPosition, setLabelPosition] = useState<"left" | "right" | "top">( "right", ); const [form, setForm] = useState({ name: "", region: "", date1: null as Date | null, date2: null as Date | null, delivery: false, type: [] as string[], resource: "", desc: "", }); const patch = (patchValue: Partial<typeof form>) => setForm((prev) => ({ ...prev, ...patchValue })); return ( <> <div> <ElRadioGroup value={size} onChange={(v) => setSize(v as "large" | "default" | "small") } ariaLabel="size control" style={{ marginRight: 12 }} > <ElRadio button value="large">large</ElRadio> <ElRadio button value="default">default</ElRadio> <ElRadio button value="small">small</ElRadio> </ElRadioGroup> <ElRadioGroup value={labelPosition} onChange={(v) => setLabelPosition(v as "left" | "right" | "top") } ariaLabel="position control" style={{ marginRight: 12 }} > <ElRadio button value="left">Left</ElRadio> <ElRadio button value="right">Right</ElRadio> <ElRadio button value="top">Top</ElRadio> </ElRadioGroup> </div> <br /> <ElForm model={form} size={size} labelPosition={labelPosition} labelWidth="auto" style={formStyle} > <ElFormItem label="Activity name"> <ElInput value={form.name} onChange={(v) => patch({ name: v })} /> </ElFormItem> <ElFormItem label="Activity zone"> <ElSelect value={form.region} onChange={(v) => patch({ region: String(v) })} placeholder="please select your zone" options={[ { value: "shanghai", label: "Zone one" }, { value: "beijing", label: "Zone two" }, ]} /> </ElFormItem> <ElFormItem label="Activity time"> <ElCol span={11}> <ElDatePicker value={form.date1} onChange={(v) => patch({ date1: v as Date | null })} type="date" aria-label="Pick a date" placeholder="Pick a date" style={{ width: "100%" }} /> </ElCol> <ElCol span={1} style={{ margin: "0 8px", textAlign: "center" }} > - </ElCol> <ElCol span={11}> <ElTimePicker value={form.date2} onChange={(v) => patch({ date2: v as Date | null })} aria-label="Pick a time" placeholder="Pick a time" style={{ width: "100%" }} /> </ElCol> </ElFormItem> <ElFormItem label="Activity type"> <ElCheckboxGroup value={form.type} onChange={(v) => patch({ type: v as string[] })} > <ElCheckbox button value="Online activities" name="type"> Online activities </ElCheckbox> <ElCheckbox button value="Promotion activities" name="type"> Promotion activities </ElCheckbox> </ElCheckboxGroup> </ElFormItem> <ElFormItem label="Resources"> <ElRadioGroup value={form.resource} onChange={(v) => patch({ resource: String(v) })} > <ElRadio border value="Sponsor">Sponsor</ElRadio> <ElRadio border value="Venue">Venue</ElRadio> </ElRadioGroup> </ElFormItem> <ElFormItem> <ElButton type="primary">Create</ElButton> <ElButton>Cancel</ElButton> </ElFormItem> </ElForm> </> );}无障碍
当在 el-form-item 内只有一个输入框（或相关的控制部件，如选择或复选框），表单项的标签将自动附加在那个输入框上。如果 el-form-item内有多个 input，则表单项会被设置成 WAI-ARIA 组 的 role。在这种情况下，需要手动给每个 input 指定访问标签。
export function FormAccessibility() { const [form, setForm] = useState({ fullName: "", firstName: "", lastName: "", }); const patch = (patchValue: Partial<typeof form>) => setForm((prev) => ({ ...prev, ...patchValue })); return ( <ElForm labelPosition="left" labelWidth="auto" model={form} style={formStyle} > <ElSpace fill> <ElAlert type="info" showIcon closable={false} description={<>"Full Name" label is automatically attached to the input:</>} /> <ElFormItem label="Full Name"> <ElInput value={form.fullName} onChange={(v) => patch({ fullName: v })} /> </ElFormItem> </ElSpace> <ElSpace fill> <ElAlert type="info" showIcon closable={false} description={ <> "Your Information" serves as a label for the group of inputs.{" "} <br /> You must specify labels on the individal inputs. Placeholders are not replacements for using the "label" attribute. </> } /> <ElFormItem label="Your Information"> <ElRow gutter={20}> <ElCol span={12}> <ElInput aria-label="First Name" placeholder="First Name" value={form.firstName} onChange={(v) => patch({ firstName: v })} /> </ElCol> <ElCol span={12}> <ElInput aria-label="Last Name" placeholder="Last Name" value={form.lastName} onChange={(v) => patch({ lastName: v })} /> </ElCol> </ElRow> </ElFormItem> </ElSpace> </ElForm> );}Form API
Form Attributes
| 属性名 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| model | 表单数据对象 | object | — |
| rules | 表单校验规则 | object | — |
| inline | 是否行内表单 | boolean | false |
| label-position | 标签位置，取 left / right 时需同时设置 label-width | enum | right |
| label-width | 标签宽度，所有直接子 FormItem 继承该值，支持 auto | string / number | '' |
| label-suffix | 标签后缀 | string | '' |
| hide-required-asterisk | 是否隐藏必填字段标签旁的红色星号 | boolean | false |
| require-asterisk-position | 星号位置 | enum | left |
| show-message | 是否显示错误信息 | boolean | true |
| inline-message | 错误信息是否显示为行内样式 | boolean | false |
| status-icon | 是否显示校验结果图标 | boolean | false |
| validate-on-rule-change | rules 变化时是否立即触发校验 | boolean | true |
| size | 表单内组件尺寸 | enum | — |
| disabled | 是否禁用表单内全部组件 | boolean | false |
| scroll-to-error | 校验失败时是否滚动到第一个错误项 | boolean | false |
| scroll-into-view-options | scrollIntoView 的参数 | object / boolean | true |
| onModelChange | React 特有：resetFields 还原后的整个 model 通过该回调交回使用方 | Function | — |
Form Events
| 事件名 | 说明 | 参数 |
|---|---|---|
| onValidate | 单个表单项校验完成后触发 | Function |
Form Slots
| 插槽名 | 说明 | React 写法 |
|---|---|---|
| default | 自定义默认内容 | children |
Form Exposes
| 方法名 | 说明 | 类型 |
|---|---|---|
| validate | 校验整个表单，接收回调或返回 Promise | Function |
| validateField | 校验指定字段 | Function |
| resetFields | 重置指定字段并移除校验结果 | Function |
| clearValidate | 清除指定字段的校验信息 | Function |
| scrollToField | 滚动到指定字段 | Function |
| getField | 获取某个字段的上下文 | Function |
| fields | 全部字段上下文 | array |
| setInitialValues | 设置字段初值，resetFields 会还原到这些值 | Function |
FormItem API
FormItem Attributes
| 属性名 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| prop | model 中的字段路径，可以是字符串或路径数组；校验与重置时必填 | string / array | — |
| label | 标签文本 | string | — |
| label-position | 标签位置，省略时继承 Form | enum | '' |
| label-width | 标签宽度，支持 auto | string / number | — |
| required | 是否必填，省略时由校验规则决定 | boolean | undefined |
| rules | 校验规则 | object / array | — |
| error | 手动设置错误信息，设置后立即显示该错误；清空后恢复 | string | — |
| show-message | 是否显示错误信息 | boolean | true |
| inline-message | 错误信息是否显示为行内样式 | boolean | undefined |
| size | 表单项内组件尺寸 | enum | — |
| for | 同原生 label 的 for | string | — |
| html-for | for 的 React 惯用写法，与 for 等价 | string | — |
| validate-status | 校验状态 | enum | — |
FormItemRule
| 属性名 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| trigger | 校验触发时机；省略时任意 trigger 都会执行 | enum / array | — |
FormItem Events
无。
FormItem Slots
| 插槽名 | 说明 | React 写法 |
|---|---|---|
| default | 表单项内容 | children |
| label | 自定义标签内容，参数为当前标签文本 | labelSlot: (label) => ReactNode |
| error | 自定义错误内容，参数为错误信息 | errorSlot: (error) => ReactNode |
FormItem Exposes
| 方法名 | 说明 | 类型 |
|---|---|---|
| size | 表单项当前尺寸 | string |
| validateMessage | 当前校验错误信息 | string |
| validateState | 当前校验状态 | enum |
| validate | 校验本项 | Function |
| resetField | 重置本项并移除校验结果 | Function |
| clearValidate | 清除本项校验状态 | Function |
| setInitialValue | 设置本项初值，resetField 会还原到该值 | Function |