# Form

icecream 提供了 `Form` & `FormItem` 两个组件用于实现表单：`Form` 可以用来替代 HTML `form` 元素；`FormItem` 是一个抽象的概念，即“表单项”。

一个表单项代表表单中的一个字段的输入模块，包括该字段的标题（`label`）、输入控件、检验状态等。

通常一个表单由一个或多个表单项，以及底部操作模块（提交、重置按钮等）组成，具体的使用可以参考下方的例子。

# Usage

## 自定义布局（`layout`）

<code src="./demos/layout.tsx"></code>

## 自定义大小（`size`）

<code src="./demos/size.tsx"></code>

## 简单的校验

<code src="./demos/validate.tsx"></code>

## 配合 `formstate-x` 实现复杂的校验逻辑

通过与 `formstate-x` 配合，我们可以实现一些复杂的表单校验逻辑

react-icecream 还提供了单独的模块 [`form-x`](../form-x)，对二者结合的逻辑进行封装

<code src="./demos/formstate-x.tsx"></code>

## 对 `footer` 进行配置

通过对 `Footer` 进行配置，我们可以控制 `footer` 中按钮的文本、类型等

<code src="./demos/footer.tsx"></code>

## 自定义 `Footer` 组件

你也可以实现完全自定义的 `Footer` 组件，注意在自定义的 `Footer` 组件中可以通过 `useFormFooterCtx` 获得当前表单的信息

<code src="./demos/custom-footer.tsx"></code>

## 偏展示类表单

对于内容展示偏多的表单，此时可以通过对 `labelColor` & `footer` 进行配置来适配此类场景；通过传入 `as` 可以指定 `Form` 渲染所使用的 HTML 元素，避免 `form` 元素嵌套导致的 warning 等问题

<code src="./demos/presentational-form.tsx"></code>

<API src="./Form.tsx"></API>