{"id":28266841,"url":"https://github.com/react-component/field-form","last_synced_at":"2026-01-08T09:15:57.789Z","repository":{"id":37752284,"uuid":"190353450","full_name":"react-component/field-form","owner":"react-component","description":"⚡️ React Performance First Form Component","archived":false,"fork":false,"pushed_at":"2025-03-20T02:25:42.000Z","size":853,"stargazers_count":1013,"open_issues_count":137,"forks_count":275,"subscribers_count":11,"default_branch":"master","last_synced_at":"2025-06-10T20:00:39.049Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://field-form.react-component.now.sh/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/react-component.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null},"funding":{"github":"ant-design","patreon":null,"open_collective":"ant-design","ko_fi":null,"tidelift":null,"community_bridge":null,"liberapay":null,"issuehunt":null,"lfx_crowdfunding":null,"polar":null,"buy_me_a_coffee":null,"thanks_dev":null,"custom":null}},"created_at":"2019-06-05T08:10:36.000Z","updated_at":"2025-06-10T00:23:00.000Z","dependencies_parsed_at":"2024-04-10T02:34:06.727Z","dependency_job_id":"bf2480d7-d29c-4e41-811b-49ab39e97f89","html_url":"https://github.com/react-component/field-form","commit_stats":{"total_commits":332,"total_committers":36,"mean_commits":9.222222222222221,"dds":"0.24397590361445787","last_synced_commit":"7a273d05a838023efd6023dcf810c94d2d81019a"},"previous_names":[],"tags_count":163,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/react-component%2Ffield-form","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/react-component%2Ffield-form/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/react-component%2Ffield-form/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/react-component%2Ffield-form/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/react-component","download_url":"https://codeload.github.com/react-component/field-form/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/react-component%2Ffield-form/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":259172517,"owners_count":22816525,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2025-05-20T15:03:24.176Z","updated_at":"2026-01-08T09:15:57.780Z","avatar_url":"https://github.com/react-component.png","language":"TypeScript","funding_links":["https://github.com/sponsors/ant-design","https://opencollective.com/ant-design"],"categories":[],"sub_categories":[],"readme":"# rc-field-form\n\nReact Performance First Form Component.\n\n[![NPM version][npm-image]][npm-url] [![dumi](https://img.shields.io/badge/docs%20by-dumi-blue?style=flat-square)](https://github.com/umijs/dumi) [![build status][github-actions-image]][github-actions-url] [![Codecov][codecov-image]][codecov-url] [![npm download][download-image]][download-url]\n\n[npm-image]: http://img.shields.io/npm/v/rc-field-form.svg?style=flat-square\n[npm-url]: http://npmjs.org/package/rc-field-form\n[github-actions-image]: https://github.com/react-component/field-form/workflows/CI/badge.svg\n[github-actions-url]: https://github.com/react-component/field-form/actions\n[codecov-image]: https://img.shields.io/codecov/c/github/react-component/field-form/master.svg?style=flat-square\n[codecov-url]: https://codecov.io/gh/react-component/field-form/branch/master\n[download-image]: https://img.shields.io/npm/dm/rc-field-form.svg?style=flat-square\n[download-url]: https://npmjs.org/package/rc-field-form\n\n## Development\n\n```bash\nnpm install\nnpm start\nopen http://localhost:8000\n```\n\n## Feature\n\n- Support react.js and even react-native\n- Validate fields with [@rc-component/async-validator](https://github.com/react-component/async-validator/)\n\n## Install\n\n[![rc-field-form](https://nodei.co/npm/rc-field-form.png)](https://npmjs.org/package/rc-field-form)\n\n## Usage\n\n```js | pure\nimport Form, { Field } from 'rc-field-form';\n\nconst Input = ({ value = '', ...props }) =\u003e \u003cinput value={value} {...props} /\u003e;\n\nconst Demo = () =\u003e {\n  return (\n    \u003cForm\n      onFinish={values =\u003e {\n        console.log('Finish:', values);\n      }}\n    \u003e\n      \u003cField name=\"username\"\u003e\n        \u003cInput placeholder=\"Username\" /\u003e\n      \u003c/Field\u003e\n      \u003cField name=\"password\"\u003e\n        \u003cInput placeholder=\"Password\" /\u003e\n      \u003c/Field\u003e\n\n      \u003cbutton\u003eSubmit\u003c/button\u003e\n    \u003c/Form\u003e\n  );\n};\n\nexport default Demo;\n```\n\n## 🔥 API\n\nWe use typescript to create the Type definition. You can view directly in IDE. But you can still check the type definition [here](https://github.com/react-component/field-form/blob/master/src/interface.ts).\n\n### Form\n\n| Prop             | Description                                        | Type                                         | Default          |\n| ---------------- | -------------------------------------------------- | -------------------------------------------- | ---------------- |\n| component        | Customize Form render component                    | string \\| Component \\| false                 | form             |\n| fields           | Control Form fields status. Only use when in Redux | [FieldData](#fielddata)[]                    | -                |\n| form             | Set form instance created by `useForm`             | [FormInstance](#useform)                     | `Form.useForm()` |\n| initialValues    | Initial value of Form                              | Object                                       | -                |\n| name             | Config name with [FormProvider](#formprovider)     | string                                       | -                |\n| preserve         | Preserve value when field removed                  | boolean                                      | false            |\n| validateMessages | Set validate message template                      | [ValidateMessages](#validatemessages)        | -                |\n| onFieldsChange   | Trigger when any value of Field changed            | (changedFields, allFields) =\u003e void           | -                |\n| onFinish         | Trigger when form submit and success               | (values) =\u003e void                             | -                |\n| onFinishFailed   | Trigger when form submit and failed                | ({ values, errorFields, outOfDate }) =\u003e void | -                |\n| onValuesChange   | Trigger when any value of Field changed            | (changedValues, values) =\u003e void              | -                |\n\n### Field\n\n| Prop              | Description                                                                   | Type                                           | Default  |\n| ----------------- | ----------------------------------------------------------------------------- | ---------------------------------------------- | -------- |\n| dependencies      | Will re-render if dependencies changed                                        | [NamePath](#namepath)[]                        | -        |\n| getValueFromEvent | Specify how to get value from event                                           | (..args: any[]) =\u003e any                         | -        |\n| getValueProps     | Customize additional props with value. This prop will disable `valuePropName` | (value) =\u003e any                                 | -        |\n| initialValue      | Field initial value                                                           | any                                            | -        |\n| name              | Field name path                                                               | [NamePath](#namepath)                          | -        |\n| normalize         | Normalize value before update                                                 | (value, prevValue, prevValues) =\u003e any          | -        |\n| preserve          | Preserve value when field removed                                             | boolean                                        | false    |\n| rules             | Validate rules                                                                | [Rule](#rule)[]                                | -        |\n| shouldUpdate      | Check if Field should update                                                  | boolean \\| (prevValues, nextValues) =\u003e boolean | -        |\n| trigger           | Collect value update by event trigger                                         | string                                         | onChange |\n| validateTrigger   | Config trigger point with rule validate                                       | string \\| string[]                             | onChange |\n| valuePropName     | Config value mapping prop with element                                        | string                                         | value    |\n\n### List\n\n| Prop     | Description                     | Type                                                                                                    | Default |\n| -------- | ------------------------------- | ------------------------------------------------------------------------------------------------------- | ------- |\n| name     | List field name path            | [NamePath](#namepath)[]                                                                                 | -       |\n| children | Render props for listing fields | (fields: { name: [NamePath](#namepath) }[], operations: [ListOperations](#listoperations)) =\u003e ReactNode | -       |\n\n### useForm\n\nForm component default create an form instance by `Form.useForm`. But you can create it and pass to Form also. This allow you to call some function on the form instance.\n\n```jsx | pure\nconst Demo = () =\u003e {\n  const [form] = Form.useForm();\n  return \u003cForm form={form} /\u003e;\n};\n```\n\nFor class component user, you can use `ref` to get form instance:\n\n```jsx | pure\nclass Demo extends React.Component {\n  setRef = form =\u003e {\n    // Form instance here\n  };\n\n  render() {\n    return \u003cForm ref={this.setRef} /\u003e;\n  }\n}\n```\n\n| Prop              | Description                                | Type                                                                       |\n| ----------------- | ------------------------------------------ | -------------------------------------------------------------------------- |\n| getFieldValue     | Get field value by name path               | (name: [NamePath](#namepath)) =\u003e any                                       |\n| getFieldsValue    | Get list of field values by name path list | (nameList?: ([NamePath](#namepath)[]) =\u003e any) \\| true                      |\n| getFieldError     | Get field errors by name path              | (name: [NamePath](#namepath)) =\u003e string[]                                  |\n| getFieldsError    | Get list of field errors by name path list | (nameList?: [NamePath](#namepath)[]) =\u003e FieldError[]                       |\n| isFieldsTouched   | Check if list of fields are touched        | (nameList?: [NamePath](#namepath)[], allTouched?: boolean) =\u003e boolean      |\n| isFieldTouched    | Check if a field is touched                | (name: [NamePath](#namepath)) =\u003e boolean                                   |\n| isFieldValidating | Check if a field is validating             | (name: [NamePath](#namepath)) =\u003e boolean                                   |\n| resetFields       | Reset fields status                        | (fields?: [NamePath](#namepath)[]) =\u003e void                                 |\n| setFields         | Set fields status                          | (fields: FieldData[]) =\u003e void                                              |\n| setFieldsValue    | Set fields value                           | (values) =\u003e void                                                           |\n| submit            | Trigger form submit                        | () =\u003e void                                                                 |\n| validateFields    | Trigger fields to validate                 | (nameList?: [NamePath](#namepath)[], options?: ValidateOptions) =\u003e Promise |\n\n### FormProvider\n\n| Prop             | Description                               | Type                                     | Default |\n| ---------------- | ----------------------------------------- | ---------------------------------------- | ------- |\n| validateMessages | Config global `validateMessages` template | [ValidateMessages](#validatemessages)    | -       |\n| onFormChange     | Trigger by named form fields change       | (name, { changedFields, forms }) =\u003e void | -       |\n| onFormFinish     | Trigger by named form fields finish       | (name, { values, forms }) =\u003e void        | -       |\n\n## 📋 Interface\n\n### NamePath\n\n| Type                                     |\n| ---------------------------------------- |\n| string \\| number \\| (string \\| number)[] |\n\n### FieldData\n\n| Prop       | Type                                     |\n| ---------- | ---------------------------------------- |\n| touched    | boolean                                  |\n| validating | boolean                                  |\n| errors     | string[]                                 |\n| name       | string \\| number \\| (string \\| number)[] |\n| value      | any                                      |\n\n### Rule\n\n| Prop            | Type                                                                                            |\n| --------------- | ----------------------------------------------------------------------------------------------- |\n| enum            | any[]                                                                                           |\n| len             | number                                                                                          |\n| max             | number                                                                                          |\n| message         | string                                                                                          |\n| min             | number                                                                                          |\n| pattern         | RegExp                                                                                          |\n| required        | boolean                                                                                         |\n| transform       | (value) =\u003e any                                                                                  |\n| type            | string                                                                                          |\n| validator       | ([rule](#rule), value, callback: (error?: string) =\u003e void, [form](#useform)) =\u003e Promise \\| void |\n| whitespace      | boolean                                                                                         |\n| validateTrigger | string \\| string[]                                                                              |\n\n#### validator\n\nTo keep sync with `rc-form` legacy usage of `validator`, we still provides `callback` to trigger validate finished. But in `rc-field-form`, we strongly recommend to return a Promise instead.\n\n### ListOperations\n\n| Prop   | Type                     |\n| ------ | ------------------------ |\n| add    | (initValue: any) =\u003e void |\n| remove | (index: number) =\u003e void  |\n\n### ValidateMessages\n\nValidate Messages provides a list of error template. You can ref [here](https://github.com/react-component/field-form/blob/master/src/utils/messages.ts) for fully default templates.\n\n| Prop    | Description         |\n| ------- | ------------------- |\n| enum    | Rule `enum` prop    |\n| len     | Rule `len` prop     |\n| max     | Rule `max` prop     |\n| min     | Rule `min` prop     |\n| name    | Field name          |\n| pattern | Rule `pattern` prop |\n| type    | Rule `type` prop    |\n\n## Different with `rc-form`\n\n`rc-field-form` is try to keep sync with `rc-form` in api level, but there still have something to change:\n\n### 1. Field will not keep snyc with `initialValues` when un-touched\n\nIn `rc-form`, field value will get from `initialValues` if user not operate on it.\nIt's a bug but user use as a feature which makes fixing will be a breaking change and we have to keep it.\nIn Field Form, this bug will not exist anymore. If you want to change a field value, use `setFieldsValue` instead.\n\n### 2. Remove Field will not clean up related value\n\nWe do lots of logic to clean up the value when Field removed before. But with user feedback, remove exist value increase the additional work to keep value back with conditional field.\n\n### 3. Nest name use array instead of string\n\nIn `rc-form`, we support like `user.name` to be a name and convert value to `{ user: { name: 'Bamboo' } }`. This makes '.' always be the route of variable, this makes developer have to do additional work if name is real contains a point like `app.config.start` to be `app_config_start` and parse back to point when submit.\n\nField Form will only trade `['user', 'name']` to be `{ user: { name: 'Bamboo' } }`, and `user.name` to be `{ ['user.name']: 'Bamboo' }`.\n\n### 4. Remove `validateFieldsAndScroll`\n\nSince `findDomNode` is marked as warning in [StrictMode](https://reactjs.org/docs/strict-mode.html#warning-about-deprecated-finddomnode-usage). It seems over control of Form component.\nWe decide to remove `validateFieldsAndScroll` method and you should handle it with you own logic:\n\n```jsx | pure\n\u003cForm\u003e\n  \u003cField name=\"username\"\u003e\n    \u003cinput ref={this.inputRef} /\u003e\n  \u003c/Field\u003e\n\u003c/Form\u003e\n```\n\n### 5. `getFieldsError` always return array\n\n`rc-form` returns `null` when no error happen. This makes user have to do some additional code like:\n\n```js | pure\n(form.getFieldsError('fieldName') || []).forEach(() =\u003e {\n  // Do something...\n});\n```\n\nNow `getFieldsError` will return `[]` if no errors.\n\n### 6. Remove `callback` with `validateFields`\n\nSince ES8 is support `async/await`, that's no reason not to use it. Now you can easily handle your validate logic:\n\n```js | pure\nasync function() {\n  try {\n    const values = await form.validateFields();\n    console.log(values);\n  } catch (errorList) {\n    errorList.forEach(({ name, errors }) =\u003e {\n      // Do something...\n    });\n  }\n}\n```\n\n**Notice: Now if your validator return an `Error(message)`, not need to get error by `e =\u003e e.message`. FieldForm will handle this.**\n\n### 7. `preserve` is default to false\n\nIn `rc-form` you should use `preserve` to keep a value cause Form will auto remove a value from Field removed. Field Form will always keep the value in the Form whatever Field removed. But you can still use `preserve=false` to disable value keeping since `1.5.0`.\n\n### 8. `setFields` not trigger `onFieldsChange` and `setFieldsValue` not trigger `onValuesChange`\n\nIn `rc-form`, we hope to help user auto trigger change event by setting to make redux dispatch easier, but it's not good design since it makes code logic couping.\n\nAdditionally, user control update trigger `onFieldsChange` \u0026 `onValuesChange` event has potential dead loop risk.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Freact-component%2Ffield-form","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Freact-component%2Ffield-form","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Freact-component%2Ffield-form/lists"}