solid form utils
npm install solid-form-context``jsx
const [form, setForm] =
(createSignal < IFormInstance) | (undefined > undefined);
// manual submit
const submit = () => form()?.submit();
// wrap html element by ValueAccessor
const checkbox = (
props: ValueAccessor
Omit
) => {
const [local, elProps] = splitProps(mergeProps({ type: "checkbox" }, props), [
"value",
"onValueChanged",
]);
const handleValueChanged = (e) => local.onValueChanged?.(e.target.checked);
return (
{...elProps}
checked={local.value}
onChange={handleValueChanged}
>
);
};
controlProps={{ type: "text" }}
onControlValueChanged={{
eventName: "oninput",
generateHandler: (setter) => (e) => setter?.(e.target.value),
}}
>
;
`
定义一个表单的范围,提供设置表单对象值,提交表单的方法
定义一个表单字段,如果设置了一个控件,则自动管理控件值的获取及更新;如果没有设置字段,则可以为内部的 FormField 提供上一级的数据。
> 只有当 FormField 的name设置为有效的字符串或者数字时才视为一个有效的字段,否则仅传递字段值的获取与更新
1. 提供字段值与控件的自动值绑定
2. 可扩展,默认情况下仅需实现value属性及onValueChanged事件,value提供值的获取,onValueChanged提供值得更新
`jsx
const checkbox = (
props: ValueAccessor
Omit
) => {
const [local, elProps] = splitProps(mergeProps({ type: "checkbox" }, props), [
"value",
"onValueChanged",
]);
const handleValueChanged = (e) => local.onValueChanged?.(e.target.checked);
return (
{...elProps}
checked={local.value}
onChange={handleValueChanged}
>
);
};
`
3. 值属性名称非value,使用controlValuePropName指定要设置值的属性onValueChanged
4. 当控件无事件时,设置onControlValueChanegd以指定当指定事件发生时如何处理值的更新
`jsx`
controlProps={{ type: "checkbox" }}
controlValuePropName="checked"
onControlValueChanged={{
eventName: "oninput",
generateHandler: (setter) => (e) => setter?.(e.target.checked),
}}
>
5. 以上3和4点FormField控件同样支持,因为内部也是使用FormControl控件实现,会透传对应 props
`jsx`
control={"input"}
controlProps={{ type: "number" }}
onControlValueChanged={{
eventName: "oninput",
generateHandler: (setter) => (e) => setter?.(e.target.value),
}}
>
`tsx`
`json`
{
"items": [undefind, undefind]
}
为 Form 内部提供统一的配置信息,目前只提供最基础的 submit 功能
`javascript
const form = useFormContext();
form.submit();
``
定义一个字段的范围,提供从范围中获取值与设置值的能力,并自动手机到最顶层的 Form 内
构建 form 的核心逻辑