|
|
|
@ -65,7 +65,7 @@ cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*-lcdS5Qm1bsAAAAAAA |
|
|
|
| initialValues | 表单默认值，只有初始化以及重置时生效 | object | - | | |
|
|
|
| labelAlign | label 标签的文本对齐方式 | `left` \| `right` | `right` | | |
|
|
|
| labelWrap | label 标签的文本换行方式 | boolean | false | 4.18.0 | |
|
|
|
| labelCol | label 标签布局，同 `<Col>` 组件，设置 `span` `offset` 值，如 `{span: 3, offset: 12}` 或 `sm: {span: 3, offset: 12}` | [object](/components/grid/#Col) | - | | |
|
|
|
| labelCol | label 标签布局，同 `<Col>` 组件，设置 `span` `offset` 值，如 `{span: 3, offset: 12}` 或 `sm: {span: 3, offset: 12}` | [object](/components/grid-cn#Col) | - | | |
|
|
|
| layout | 表单布局 | `horizontal` \| `vertical` \| `inline` | `horizontal` | | |
|
|
|
| name | 表单名称，会作为表单字段 `id` 前缀使用 | string | - | | |
|
|
|
| preserve | 当字段被删除时保留字段值 | boolean | true | 4.4.0 | |
|
|
|
@ -74,7 +74,7 @@ cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*-lcdS5Qm1bsAAAAAAA |
|
|
|
| size | 设置字段组件的尺寸（仅限 antd 组件） | `small` \| `middle` \| `large` | - | | |
|
|
|
| validateMessages | 验证提示模板，说明[见下](#validateMessages) | [ValidateMessages](https://github.com/react-component/field-form/blob/master/src/utils/messages.ts) | - | | |
|
|
|
| validateTrigger | 统一设置字段触发验证的时机 | string \| string\[] | `onChange` | 4.3.0 | |
|
|
|
| wrapperCol | 需要为输入控件设置布局样式时，使用该属性，用法同 labelCol | [object](/components/grid/#Col) | - | | |
|
|
|
| wrapperCol | 需要为输入控件设置布局样式时，使用该属性，用法同 labelCol | [object](/components/grid-cn#Col) | - | | |
|
|
|
| onFieldsChange | 字段更新时触发回调事件 | function(changedFields, allFields) | - | | |
|
|
|
| onFinish | 提交表单且数据验证成功后回调事件 | function(values) | - | | |
|
|
|
| onFinishFailed | 提交表单且数据验证失败后回调事件 | function({ values, errorFields, outOfDate }) | - | | |
|
|
|
@ -93,7 +93,7 @@ const validateMessages = { |
|
|
|
<Form validateMessages={validateMessages} />; |
|
|
|
``` |
|
|
|
|
|
|
|
此外，[ConfigProvider](/components/config-provider/) 也提供了全局化配置方案，允许统一配置错误提示模板： |
|
|
|
此外，[ConfigProvider](/components/config-provider-cn) 也提供了全局化配置方案，允许统一配置错误提示模板： |
|
|
|
|
|
|
|
```jsx |
|
|
|
const validateMessages = { |
|
|
|
@ -124,7 +124,7 @@ const validateMessages = { |
|
|
|
| initialValue | 设置子元素默认值，如果与 Form 的 `initialValues` 冲突则以 Form 为准 | string | - | 4.2.0 | |
|
|
|
| label | `label` 标签的文本 | ReactNode | - | | |
|
|
|
| labelAlign | 标签文本对齐方式 | `left` \| `right` | `right` | | |
|
|
|
| labelCol | `label` 标签布局，同 `<Col>` 组件，设置 `span` `offset` 值，如 `{span: 3, offset: 12}` 或 `sm: {span: 3, offset: 12}`。你可以通过 Form 的 `labelCol` 进行统一设置，不会作用于嵌套 Item。当和 Form 同时设置时，以 Item 为准 | [object](/components/grid/#Col) | - | | |
|
|
|
| labelCol | `label` 标签布局，同 `<Col>` 组件，设置 `span` `offset` 值，如 `{span: 3, offset: 12}` 或 `sm: {span: 3, offset: 12}`。你可以通过 Form 的 `labelCol` 进行统一设置，不会作用于嵌套 Item。当和 Form 同时设置时，以 Item 为准 | [object](/components/grid-cn#Col) | - | | |
|
|
|
| messageVariables | 默认验证字段的信息 | Record<string, string> | - | 4.7.0 | |
|
|
|
| name | 字段名，支持数组 | [NamePath](#NamePath) | - | | |
|
|
|
| normalize | 组件获取值后进行转换，再放入 Form 中。不支持异步 | (value, prevValue, prevValues) => any | - | | |
|
|
|
@ -133,13 +133,13 @@ const validateMessages = { |
|
|
|
| required | 必填样式设置。如不设置，则会根据校验规则自动生成 | boolean | false | | |
|
|
|
| rules | 校验规则，设置字段的校验逻辑。点击[此处](#components-form-demo-basic)查看示例 | [Rule](#Rule)\[] | - | | |
|
|
|
| shouldUpdate | 自定义字段更新逻辑，说明[见下](#shouldUpdate) | boolean \| (prevValue, curValue) => boolean | false | | |
|
|
|
| tooltip | 配置提示信息 | ReactNode \| [TooltipProps & { icon: ReactNode }](/components/tooltip#API) | - | 4.7.0 | |
|
|
|
| tooltip | 配置提示信息 | ReactNode \| [TooltipProps & { icon: ReactNode }](/components/tooltip-cn#API) | - | 4.7.0 | |
|
|
|
| trigger | 设置收集字段值变更的时机。点击[此处](#components-form-demo-customized-form-controls)查看示例 | string | `onChange` | | |
|
|
|
| validateFirst | 当某一规则校验不通过时，是否停止剩下的规则的校验。设置 `parallel` 时会并行校验 | boolean \| `parallel` | false | `parallel`: 4.5.0 | |
|
|
|
| validateStatus | 校验状态，如不设置，则会根据校验规则自动生成，可选：'success' 'warning' 'error' 'validating' | string | - | | |
|
|
|
| validateTrigger | 设置字段校验的时机 | string \| string\[] | `onChange` | | |
|
|
|
| valuePropName | 子节点的值的属性，如 Switch 的是 'checked'。该属性为 `getValueProps` 的封装，自定义 `getValueProps` 后会失效 | string | `value` | | |
|
|
|
| wrapperCol | 需要为输入控件设置布局样式时，使用该属性，用法同 `labelCol`。你可以通过 Form 的 `wrapperCol` 进行统一设置，不会作用于嵌套 Item。当和 Form 同时设置时，以 Item 为准 | [object](/components/grid/#Col) | - | | |
|
|
|
| wrapperCol | 需要为输入控件设置布局样式时，使用该属性，用法同 `labelCol`。你可以通过 Form 的 `wrapperCol` 进行统一设置，不会作用于嵌套 Item。当和 Form 同时设置时，以 Item 为准 | [object](/components/grid-cn#Col) | - | | |
|
|
|
|
|
|
|
被设置了 `name` 属性的 `Form.Item` 包装的控件，表单控件会自动添加 `value`（或 `valuePropName` 指定的其他属性） `onChange`（或 `trigger` 指定的其他属性），数据同步将被 Form 接管，这会导致以下结果： |
|
|
|
|
|
|
|
|
Amumu
2 years ago
GitHub