# form-item (w-form-item)

- **Import**: `WFormItem` from `win-design-next`
- **Tag**: `<w-form-item>`
- **说明**: WFormItem
- **分类**: data-entry
- **Skill 版本**: V1.1.0
- **适配组件库**: win-design-next 1.2.2
- **API 来源**: `docs/zh-CN/component/form.md`

## API

## FormItem API

### Attributes

| 属性名          | 说明                                                                                                                                   | 类型                                                | Default |
| --------------- | -------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------- | ------- |
| prop            | `model` 的键名。 它可以是一个属性的值(如 `a.b.0` 或 `['a', 'b', '0']`)。 在使用了 `validate`、`resetFields` 的方法时，该属性是必填的。 | ^[string] / ^[string&#91;&#93;]                     | —       |
| label           | 标签文本                                                                                                                               | ^[string]                                           | —       |
| label-position  | 表单域标签的位置， 当设置为 `left` 或 `right` 时，则也需要设置 `label-width` 属性 默认会继承 `Form`的`label-position`                  | ^[enum]`'left' \| 'right' \| 'top'`                 | ''      |
| label-width     | 标签宽度，例如 `'50px'`。 可以使用 `auto`。                                                                                            | ^[string] / ^[number]                               | ''      |
| required        | 是否为必填项，如不设置，则会根据校验规则确认                                                                                           | ^[boolean]                                          | —       |
| rules           | 表单验证规则, 具体配置见[下表](#formitemrule), 更多内容可以参考[async-validator](https://github.com/yiminghe/async-validator)          | ^[object]`Arrayable`                                | —       |
| error           | 表单域验证错误时的提示信息。设置该值会导致表单验证状态变为 error，并显示该错误信息。                                                   | ^[string]                                           | —       |
| show-message    | 是否显示校验错误信息                                                                                                                   | ^[boolean]                                          | true    |
| inline-message  | 是否在行内显示校验信息                                                                                                                 | ^[string] / ^[boolean]                              | ''      |
| size            | 用于控制该表单域下组件的默认尺寸                                                                                                       | ^[enum]`'' \| 'large' \| 'default' \| 'small'`      | —       |
| for             | 和原生标签相同能力                                                                                                                     | ^[string]                                           | —       |
| validate-status | formitem 校验的状态                                                                                                                    | ^[enum]`'' \| 'error' \| 'validating' \| 'success'` | —       |

#### FormItemRule

| 名称    | 说明               | 类型                        | 默认值 |
| ------- | ------------------ | --------------------------- | ------ |
| trigger | 验证逻辑的触发方式 | ^[enum]`'blur' \| 'change'` | —      |

### Slots

| 插槽名  | 说明                   | 类型                         |
| ------- | ---------------------- | ---------------------------- |
| default | 表单的内容。           | —                            |
| label   | 标签位置显示的内容     | ^[object]`{ label: string }` |
| error   | 验证错误信息的显示内容 | ^[object]`{ error: string }` |

### Exposes

| 名称            | 说明                                                 | 类型                                                                                                 |
| --------------- | ---------------------------------------------------- | ---------------------------------------------------------------------------------------------------- |
| size            | 表单项大小                                           | ^[object]`ComputedRef`                                                                               |
| validateMessage | 校验消息                                             | ^[object]`Ref`                                                                                       |
| validateState   | 校验状态                                             | ^[object]`Ref`                                                                                       |
| validate        | 验证表单项                                           | ^[Function]`(trigger: string, callback?: FormValidateCallback \| undefined) => FormValidationResult` |
| resetField      | 对该表单项进行重置，将其值重置为初始值并移除校验结果 | ^[Function]`() => void`                                                                              |
| clearValidate   | 移除该表单项的校验结果                               | ^[Function]`() => void`                                                                              |
