You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

505 lines
24 KiB

---
category: Components
type: Data Entry
cols: 1
title: Form
cover: https://gw.alipayobjects.com/zos/alicdn/ORmcdeaoO/Form.svg
---
High performance Form component with data scope management. Including data collection, verification, and styles.
## When to use
- When you need to create an instance or collect information.
- When you need to validate fields in certain rules.
## API
### Form
| Property | Description | Type | Default | Version |
| --- | --- | --- | --- | --- |
| colon | Configure the default value of `colon` for Form.Item. Indicates whether the colon after the label is displayed (only effective when prop layout is horizontal) | boolean | true | |
| disabled | Set form component disable, only available for antd components | boolean | false |
| component | Set the Form rendering element. Do not create a DOM node for `false` | ComponentType \| false | form | |
| fields | Control of form fields through state management (such as redux). Not recommended for non-strong demand. View [example](#components-form-demo-global-state) | [FieldData](#FieldData)\[] | - | |
| form | Form control instance created by `Form.useForm()`. Automatically created when not provided | [FormInstance](#FormInstance) | - | |
| initialValues | Set value by Form initialization or reset | object | - | |
| labelAlign | The text align of label of all items | `left` \| `right` | `right` | |
| labelWrap | whether label can be wrap | boolean | false | 4.18.0 |
| labelCol | Label layout, like `<Col>` component. Set `span` `offset` value like `{span: 3, offset: 12}` or `sm: {span: 3, offset: 12}` | [object](/components/grid/#Col) | - | |
| layout | Form layout | `horizontal` \| `vertical` \| `inline` | `horizontal` | |
| name | Form name. Will be the prefix of Field `id` | string | - | |
merge master into Feature (#25262) * feat: add successColor for Progress (#24655) * feat: add successColor for Progress * feat: update * fix: update test * remove snap * feat: add test case * refactor success * feat: adjust styyle * feat: add DevWarning * feat: Support rowSelection.dirty (#24718) * feat: Support rowSelection.dirty * rename to reserveKeys * preserveKeys will keep record also * to preserveSelectedRowKeys * feat: add ghost prop for collapse (#24734) * feat: add ghost prop for collapse * doc: version of collapse&#39;s ghost prop * refactor: make ghost collapse&#39;s less code to a nested style * chore: remove redundant codes in ghost collapse&#39;s less &amp; doc * doc: add a background wrapper for ghost collapse demo * doc: dark-theme wrapper bg-color for ghost collapse demo * test: update snapshot of ghost collapse * doc: use softer bg-color on ghost collapse demo * doc: remove disabled panel in ghost collapse demo * feat: form instance support getFieldInstance (#24711) * support getFieldInstance * update doc * fix lint * move func * move into hooks * update ref logic * fix lint * rm only * fix docs * feat: dropdown support arrow (#23869) * feat: dropdown support arrow prop close #22758 * test: update snapshot * fix: fix dropdown cls names * test: update snapshot * test: update snapshot * doc: update demo * test: update demo snapshot * demo * fix: snapshot * chore: change the style of ghost collapse &amp; demo modified (#24762) * refactor: reduce content padding in ghost collapse * doc: remove the wrapper outside ghost collapse Designer want the demo differs from other demos * refactor: remove redundant .less code in collapse * feat: cascader dropdown-render prop (#24812) * feat: cascader dropdown-render prop * fix: update Cascader dropdownRender type annotation * fix: set rc-cascader semver from ^ to ~ * docs: fix coding style in cascader/custom-dropdown * feat: 🆕 support Drawer closeIcon (#24842) * feat: :new: support Drawer closeIcon close #19283 close #19153 * add test case * update docs * feat: 🆕 Cascader expandIcon (#24865) * feat: cascader expandIcon * fix: snap * refactor: reduce CSS size (#24846) * refactor: reduce button css size * refactor: remove redundant button .less code * feat: add Table onChange an action param (#24697) * Working on tests * created TableAction type * changed TableActions to tuple * removed chinese documentation line * refactor TableActions * fix documentation * Moved action into extra param * minor doc change * feat: add closeIcon customize tag close (#24885) * feat: add closeIcon customize tag close * docs fix * update snap * fix: css name * update snapshot * snapshot * feat: add radio `optionType` api to set radio option type (#24809) * feat: radio component * docs: update md * fix: snap * test components * fix: use optionType * fix name * add warning * fix * feat: expand rate character (#24903) * feat: expand rate character * fix: demo * fix: snap * Update components/rate/index.zh-CN.md Co-authored-by: 偏右 &lt;afc163@gmail.com&gt; * fix Co-authored-by: 偏右 &lt;afc163@gmail.com&gt; * Refactor demo code box actions (#24887) * refactor: refine the styling of actions part of demo code-box * fix: lint style * refactor: move Result children to end (#24945) * feat: remove content max-width on dot-step (#24907) * feat: add Skeleton-Image (#24805) * feat: add Skeleton-Image * feat: add docs * fix: adjust skeleton * feat: adjust Image Component * feat: rebase * feat: adjust style * fix: lint * feat: remove size * feat: delete md * feat: fix style * ✨ feat: Mentions support autoSize (#24961) close #17746 * chore: replace textarea with rc-textarea (#24966) * feat: update pagination@2.3.0 support onChange called when pageSize change (#24964) * feat: update pagination@2.5.0 and add test case to relative component * fix: lint * delete * feat: add test case for pagination * adjust test case * feat: Implement centered prop in Tabs (#24958) * Implement centered in Tabs along with its tests and docs * Fix build error * Add Chinese translations and remove test case Co-authored-by: Ashkan Pourghasem &lt;ashkan.pourghasem@gmail.com&gt; * feat: Add modal style parameter (#24773) * add some paramters in default.less * Update components/style/themes/default.less Co-authored-by: Amumu &lt;yoyo837@hotmail.com&gt; * change parameter in compact.less Co-authored-by: Crystal Gao &lt;jinggao@ebay.com&gt; Co-authored-by: Amumu &lt;yoyo837@hotmail.com&gt; * feat: export Tabs addIcon (#25006) * feat: export Tabs addIcon * update snapshot * feat: showNow on timepicker and datetimepicker (#25032) * feat: update rc-picker@1.7.1 and fix icons of month and quarter picker in DatePicker Component (#25035) * feat: update rc-picker@1.7.1 * delete * add * feat: expand rate support props (#24993) * docs: :memo: Add Form.Item hidden in doc (#25108) close #25101 * fix: ⌨️ Improve Pagination accessibility issue (#25119) * ⌨️ Improve Pagination a11y by fixing a W3C error https://github.com/react-component/pagination/issues/280 * update snapshot * :up: rc-pagination to 2.4.1 * feat: support triggerSubMenuAction for &lt;Menu /&gt; (#25127) * feat(menu): add triggerSubMenuAction for Menu * feat(menu): test cases * chore: Adjust picker logic (#25135) * chore: update rc-picker 1.10.0 (#25174) * feat: table row check strictly (#24931) * feat: add checkStrictly on Table.rowSelection * fix: LGTM warnings * test: table rowSelection.checkStrictly * test: add cov [wip] * refactor: tree.rowSelection.checkStrictly [wip] * test: table.rowSelection.checkStrictly basic case * feat: support rowKey on checkStrictly table * feat: Table checkStrictly support getCheckboxProps * docs: Table checkStrictly * chore: typo * chore: remove useless comment * chore: update snapshot * chore: update snapshot * fix: fire selectAll on selection dropdown menu &amp; changeRows incorrect in selectAll callback * docs: typo * chore * chore * fix: expand buttons of leaf rows in tree data are not hidden * feat: Table warning about rowKey index parameter * perf: only generate keyEntities when not checkStrictly * refactor: remove useless parseCheckedKeys * refactor: get derived selected &amp; half selected keys from selectedRowKeys * chore: remove env condition stmt * chore: revert index usage &amp; code formatting * chore: rerun ci * docs: table tree-data checkstrictly * test: update snapshots * refactor: use useMergedState hook * chore: rerun ci * chore: rerun ci 2 * chore: revert selection select all behavior * refactor: refactor code based on feature * chore: revert table code format * chore: revert table code format * fix: useMemo deps * fix: useMemo deps * fix: useMemo deps * feat: support preserve (#25186) * docs: add responsibly order for Col (#25139) * feat: add type * feat: add responsibly order cols * feat: add docs * feat: add test case * fix test Co-authored-by: 二货机器人 &lt;smith3816@gmail.com&gt; Co-authored-by: 偏右 &lt;afc163@gmail.com&gt; Co-authored-by: zoomdong &lt;1344492820@qq.com&gt; Co-authored-by: 07akioni &lt;07akioni2@gmail.com&gt; Co-authored-by: wendellhu &lt;wendellhu95@gmail.com&gt; Co-authored-by: xrkffgg &lt;xrkffgg@gmail.com&gt; Co-authored-by: Neto Braghetto &lt;netow93@gmail.com&gt; Co-authored-by: Kermit Xuan &lt;kermitlx@outlook.com&gt; Co-authored-by: Ashkan Pourghasem &lt;64011067+ashkan-pm@users.noreply.github.com&gt; Co-authored-by: Ashkan Pourghasem &lt;ashkan.pourghasem@gmail.com&gt; Co-authored-by: hicrystal &lt;295247343@qq.com&gt; Co-authored-by: Crystal Gao &lt;jinggao@ebay.com&gt; Co-authored-by: Amumu &lt;yoyo837@hotmail.com&gt; Co-authored-by: Li Ming &lt;armyiljfe@gmail.com&gt;
4 years ago
| preserve | Keep field value even when field removed | boolean | true | 4.4.0 |
| requiredMark | Required mark style. Can use required mark or optional mark. You can not config to single Form.Item since this is a Form level config | boolean \| `optional` | true | 4.6.0 |
| scrollToFirstError | Auto scroll to first failed field when submit | boolean \| [Options](https://github.com/stipsan/scroll-into-view-if-needed/tree/ece40bd9143f48caf4b99503425ecb16b0ad8249#options) | false | |
| size | Set field component size (antd components only) | `small` \| `middle` \| `large` | - | |
| validateMessages | Validation prompt template, description [see below](#validateMessages) | [ValidateMessages](https://github.com/react-component/field-form/blob/master/src/utils/messages.ts) | - | |
| validateTrigger | Config field validate trigger | string \| string\[] | `onChange` | 4.3.0 |
| wrapperCol | The layout for input controls, same as `labelCol` | [object](/components/grid/#Col) | - | |
| onFieldsChange | Trigger when field updated | function(changedFields, allFields) | - | |
| onFinish | Trigger after submitting the form and verifying data successfully | function(values) | - | |
| onFinishFailed | Trigger after submitting the form and verifying data failed | function({ values, errorFields, outOfDate }) | - | |
| onValuesChange | Trigger when value updated | function(changedValues, allValues) | - | |
### validateMessages
Form provides [default verification error messages](https://github.com/react-component/field-form/blob/master/src/utils/messages.ts). You can modify the template by configuring `validateMessages` property. A common usage is to configure localization:
```jsx
const validateMessages = {
required: "'${name}' is required!",
// ...
};
<Form validateMessages={validateMessages} />;
```
Besides, [ConfigProvider](/components/config-provider/) also provides a global configuration scheme that allows for uniform configuration error notification templates:
```jsx
const validateMessages = {
required: "'${name}' is Required!",
// ...
};
<ConfigProvider form={{ validateMessages }}>
<Form />
</ConfigProvider>;
```
## Form.Item
Form field component for data bidirectional binding, validation, layout, and so on.
| Property | Description | Type | Default | Version |
| --- | --- | --- | --- | --- |
| colon | Used with `label`, whether to display `:` after label text. | boolean | true | |
| dependencies | Set the dependency field. See [below](#dependencies) | [NamePath](#NamePath)\[] | - | |
| extra | The extra prompt message. It is similar to help. Usage example: to display error message and prompt message at the same time | ReactNode | - | |
| getValueFromEvent | Specify how to get value from event or other onChange arguments | (..args: any\[]) => any | - | |
| getValueProps | Additional props with sub component | (value: any) => any | - | 4.2.0 |
| hasFeedback | Used with `validateStatus`, this option specifies the validation status icon. Recommended to be used only with `Input` | boolean | false | |
| help | The prompt message. If not provided, the prompt message will be generated by the validation rule. | ReactNode | - | |
| hidden | Whether to hide Form.Item (still collect and validate value) | boolean | false | 4.4.0 |
| htmlFor | Set sub label `htmlFor` | string | - | |
| initialValue | Config sub default value. Form `initialValues` get higher priority when conflict | string | - | 4.2.0 |
| label | Label text | ReactNode | - | |
| labelAlign | The text align of label | `left` \| `right` | `right` | |
| labelCol | The layout of label. You can set `span` `offset` to something like `{span: 3, offset: 12}` or `sm: {span: 3, offset: 12}` same as with `<Col>`. You can set `labelCol` on Form which will not affect nest Item. If both exists, use Item first | [object](/components/grid/#Col) | - | |
| messageVariables | The default validate field info | Record&lt;string, string> | - | 4.7.0 |
| name | Field name, support array | [NamePath](#NamePath) | - | |
| normalize | Normalize value from component value before passing to Form instance. Do not support async | (value, prevValue, prevValues) => any | - | |
| noStyle | No style for `true`, used as a pure field control | boolean | false | |
| preserve | Keep field value even when field removed | boolean | true | 4.4.0 |
| required | Display required style. It will be generated by the validation rule | boolean | false | |
| rules | Rules for field validation. Click [here](#components-form-demo-basic) to see an example | [Rule](#Rule)\[] | - | |
| shouldUpdate | Custom field update logic. See [below](#shouldUpdate) | boolean \| (prevValue, curValue) => boolean | false | |
| tooltip | Config tooltip info | ReactNode \| [TooltipProps & { icon: ReactNode }](/components/tooltip#API) | - | 4.7.0 |
| trigger | When to collect the value of children node. Click [here](#components-form-demo-customized-form-controls) to see an example | string | `onChange` | |
| validateFirst | Whether stop validate on first rule of error for this field. Will parallel validate when `parallel` cofigured | boolean \| `parallel` | false | `parallel`: 4.5.0 |
| validateStatus | The validation status. If not provided, it will be generated by validation rule. options: `success` `warning` `error` `validating` | string | - | |
| validateTrigger | When to validate the value of children node | string \| string\[] | `onChange` | |
| valuePropName | Props of children node, for example, the prop of Switch is 'checked'. This prop is an encapsulation of `getValueProps`, which will be invalid after customizing `getValueProps` | string | `value` | |
| wrapperCol | The layout for input controls, same as `labelCol`. You can set `wrapperCol` on Form which will not affect nest Item. If both exists, use Item first | [object](/components/grid/#Col) | - | |
After wrapped by `Form.Item` with `name` property, `value`(or other property defined by `valuePropName`) `onChange`(or other property defined by `trigger`) props will be added to form controls, the flow of form data will be handled by Form which will cause:
1. You shouldn't use `onChange` on each form control to **collect data**(use `onValuesChange` of Form), but you can still listen to `onChange`.
2. You cannot set value for each form control via `value` or `defaultValue` prop, you should set default value with `initialValues` of Form. Note that `initialValues` cannot be updated by `setState` dynamically, you should use `setFieldsValue` in that situation.
3. You shouldn't call `setState` manually, please use `form.setFieldsValue` to change value programmatically.
### dependencies
Used when there are dependencies between fields. If a field has the `dependencies` prop, this field will automatically trigger updates and validations when upstream is updated. A common scenario is a user registration form with "password" and "confirm password" fields. The "Confirm Password" validation depends on the "Password" field. After setting `dependencies`, the "Password" field update will re-trigger the validation of "Check Password". You can refer [examples](#components-form-demo-register).
`dependencies` shouldn't be used together with `shouldUpdate`, since it may result in conflicting update logic.
`dependencies` supports `Form.Item` with render props children since `4.5.0`.
### shouldUpdate
Form updates only the modified field-related components for performance optimization purposes by incremental update. In most cases, you only need to write code or do validation with the [`dependencies`](#dependencies) property. In some specific cases, such as when a new field option appears with a field value changed, or you just want to keep some area updating by form update, you can modify the update logic of Form.Item via the `shouldUpdate`.
When `shouldUpdate` is `true`, any Form update will cause the Form.Item to be re-rendered. This is very helpful for custom rendering some areas:
```jsx
<Form.Item shouldUpdate>
{() => {
return <pre>{JSON.stringify(form.getFieldsValue(), null, 2)}</pre>;
}}
</Form.Item>
```
You can ref [example](#components-form-demo-horizontal-login) to see detail.
When `shouldUpdate` is a function, it will be called by form values update. Providing original values and current value to compare. This is very helpful for rendering additional fields based on values:
```jsx
<Form.Item shouldUpdate={(prevValues, curValues) => prevValues.additional !== curValues.additional}>
{() => {
return (
<Form.Item name="other">
<Input />
</Form.Item>
);
}}
</Form.Item>
```
You can ref [example](#components-form-demo-control-hooks) to see detail.
### messageVariables
You can modify the default verification information of Form.Item through `messageVariables`.
```jsx
<Form>
<Form.Item messageVariables={{ another: 'good' }} label="user">
<Input />
</Form.Item>
<Form.Item messageVariables={{ label: 'good' }} label={<span>user</span>}>
<Input />
</Form.Item>
</Form>
```
## Form.List
Provides array management for fields.
| Property | Description | Type | Default | Version |
| --- | --- | --- | --- | --- |
| children | Render function | (fields: Field\[], operation: { add, remove, move }, meta: { errors }) => React.ReactNode | - | |
| initialValue | Config sub default value. Form `initialValues` get higher priority when conflict | any\[] | - | 4.9.0 |
| name | Field name, support array | [NamePath](#NamePath) | - | |
| rules | Validate rules, only support customize validator. Should work with [ErrorList](#Form.ErrorList) | { validator, message }\[] | - | 4.7.0 |
```tsx
<Form.List>
{fields => (
<div>
{fields.map(field => (
<Form.Item {...field}>
<Input />
</Form.Item>
))}
</div>
)}
</Form.List>
```
Note: You should not configure Form.Item `initialValue` under Form.List. It always should be configured by Form.List `initialValue` or Form `initialValues`.
## operation
Some operator functions in render form of Form.List.
| Property | Description | Type | Default | Version |
| --- | --- | --- | --- | --- |
| add | add form item | (defaultValue?: any, insertIndex?: number) => void | insertIndex | 4.6.0 |
| move | move form item | (from: number, to: number) => void | - | |
| remove | remove form item | (index: number \| number\[]) => void | number\[] | 4.5.0 |
## Form.ErrorList
New in 4.7.0. Show error messages, should only work with `rules` of Form.List. See [example](#components-form-demo-dynamic-form-item).
| Property | Description | Type | Default |
| -------- | ----------- | ------------ | ------- |
| errors | Error list | ReactNode\[] | - |
## Form.Provider
Provide linkage between forms. If a sub form with `name` prop update, it will auto trigger Provider related events. See [example](#components-form-demo-form-context).
| Property | Description | Type | Default |
| --- | --- | --- | --- |
| onFormChange | Triggered when a sub form field updates | function(formName: string, info: { changedFields, forms }) | - |
| onFormFinish | Triggered when a sub form submits | function(formName: string, info: { values, forms }) | - |
```jsx