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, "value">
) => {
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}
>
);
};

onRef={setForm}
onSubmit={(value) => {
console.log("get submitted value", value);
}}
>
name="id"
control={"input"}
controlProps={{ type: "number" }}
onControlValueChanged={{
eventName: "oninput",
generateHandler: (setter) => (e) => setter?.(e.target.value),
}}
>


control={"input"}
controlProps={{ type: "text" }}
onControlValueChanged={{
eventName: "oninput",
generateHandler: (setter) => (e) => setter?.(e.target.value),
}}
>



;
`

Form

定义一个表单的范围，提供设置表单对象值，提交表单的方法

FormField

定义一个表单字段，如果设置了一个控件，则自动管理控件值的获取及更新；如果没有设置字段，则可以为内部的 FormField 提供上一级的数据。

> 只有当 FormField 的name设置为有效的字符串或者数字时才视为一个有效的字段，否则仅传递字段值的获取与更新

FormControl

1. 提供字段值与控件的自动值绑定
2. 可扩展，默认情况下仅需实现value属性及onValueChanged事件，value提供值的获取，onValueChanged提供值得更新

`jsx
const checkbox = (
props: ValueAccessor &
Omit, "value">
) => {
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指定要设置值的属性
4. 当控件无onValueChanged事件时，设置onControlValueChanegd以指定当指定事件发生时如何处理值的更新

`jsx
control={"input"}
controlProps={{ type: "checkbox" }}
controlValuePropName="checked"
onControlValueChanged={{
eventName: "oninput",
generateHandler: (setter) => (e) => setter?.(e.target.checked),
}}
>
`

5. 以上3和4点FormField控件同样支持，因为内部也是使用FormControl控件实现，会透传对应 props

`jsx
name="id"
control={"input"}
controlProps={{ type: "number" }}
onControlValueChanged={{
eventName: "oninput",
generateHandler: (setter) => (e) => setter?.(e.target.value),
}}
>
`

FormList

`tsx