Form field component for data bidirectional binding, validation, layout, and so on.
Form field component for data bidirectional binding, validation, layout, and so on.
| Property | Description | Type | Default |
| Property | Description | Type | Default | Version |
| --- | --- | --- | --- |
| --- | --- | --- | --- | --- |
| colon | Used with `label`, whether to display `:` after label text. | boolean | true |
| colon | Used with `label`, whether to display `:` after label text. | boolean | true | |
| dependencies | Set the dependency field. See [below](#dependencies) | [NamePath](#NamePath)[] | - |
| 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 | string\|ReactNode | - |
| extra | The extra prompt message. It is similar to help. Usage example: to display error message and prompt message at the same time | string\|ReactNode | - | |
| getValueFromEvent | Specify how to get value from event or other onChange arguments | (..args: any[]) => any | - |
| getValueFromEvent | Specify how to get value from event or other onChange arguments | (..args: any[]) => any | - | |
| hasFeedback | Used with `validateStatus`, this option specifies the validation status icon. Recommended to be used only with `Input` | boolean | false |
| 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. | string\|ReactNode | - |
| help | The prompt message. If not provided, the prompt message will be generated by the validation rule. | string\|ReactNode | - | |
| htmlFor | Set sub label `htmlFor` | string | - |
| htmlFor | Set sub label `htmlFor` | string | - | |
| noStyle | No style for `true`, used as a pure field control | boolean | false |
| noStyle | No style for `true`, used as a pure field control | boolean | false | |
| label | Label text | string\|ReactNode | - |
| label | Label text | string\|ReactNode | - | |
| labelAlign | text align of label | `left` \| `right` | `right` |
| labelAlign | 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. If both exists, use Item first | [object](/components/grid/#Col) | - |
| 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. If both exists, use Item first | [object](/components/grid/#Col) | - | |
| name | Field name, support array | [NamePath](#NamePath) | - |
| name | Field name, support array | [NamePath](#NamePath) | - | |
| normalize | Normalize value to form component | (value, prevValue, prevValues) => any | - |
| normalize | Normalize value to form component | (value, prevValue, prevValues) => any | - | |
| required | Whether provided or not, it will be generated by the validation rule | boolean | false |
| required | Whether provided or not, 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)[] | - |
| 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 |
| shouldUpdate | Custom field update logic. See [below](#shouldUpdate) | boolean \| (prevValue, curValue) => boolean | false | |
| trigger | When to collect the value of children node | string | onChange |
| trigger | When to collect the value of children node | string | onChange | |
| validateFirst | Whether stop validate on first rule of error for this field | boolean | false |
| validateFirst | Whether stop validate on first rule of error for this field | boolean | false | |
| validateStatus | The validation status. If not provided, it will be generated by validation rule. options: 'success' 'warning' 'error' 'validating' | string | - |
| 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 |
| 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' | string | 'value' |
| valuePropName | Props of children node, for example, the prop of Switch is 'checked' | string | 'value' | |
| wrapperCol | The layout for input controls, same as `labelCol`. You can set `wrapperCol` on Form. If both exists, use Item first | [object](/components/grid/#Col) | - |
| wrapperCol | The layout for input controls, same as `labelCol`. You can set `wrapperCol` on Form. 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:
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:
@ -70,7 +70,7 @@ We provide `antd.js` `antd.css` and `antd.min.js` `antd.min.css` under `antd/dis
> **We strongly discourage loading the entire files** this will add bloat to your application and make it more difficult to receive bugfixes and updates. Antd is intended to be used in conjunction with a build tool, such as [webpack](https://webpack.github.io/), which will make it easy to import only the parts of antd that you are using.
> **We strongly discourage loading the entire files** this will add bloat to your application and make it more difficult to receive bugfixes and updates. Antd is intended to be used in conjunction with a build tool, such as [webpack](https://webpack.github.io/), which will make it easy to import only the parts of antd that you are using.
> Note: you should import moment before using antd.js after `3.0`.
> Note: you should import react/react-dom/moment before using antd.js.
二货机器人
5 years ago
GitHub