This is page 31 of 35. Use http://codebase.md/alibaba/formily?lines=false&page={x} to view the full context.
# Directory Structure
```
├── .all-contributorsrc
├── .codecov.yml
├── .editorconfig
├── .eslintignore
├── .eslintrc
├── .github
│ ├── CONTRIBUTING.md
│ ├── FUNDING.yml
│ ├── ISSUE_TEMPLATE
│ │ └── config.yml
│ ├── PULL_REQUEST_TEMPLATE.md
│ └── workflows
│ ├── check-pr-title.yml
│ ├── ci.yml
│ ├── commitlint.yml
│ ├── issue-open-check.yml
│ ├── package-size.yml
│ └── pr-welcome.yml
├── .gitignore
├── .prettierrc.js
├── .umirc.js
├── .vscode
│ └── cspell.json
├── .yarnrc
├── CHANGELOG.md
├── commitlint.config.js
├── devtools
│ ├── .eslintrc
│ └── chrome-extension
│ ├── .npmignore
│ ├── assets
│ │ └── img
│ │ ├── loading.svg
│ │ └── logo
│ │ ├── 128x128.png
│ │ ├── 16x16.png
│ │ ├── 38x38.png
│ │ ├── 48x48.png
│ │ ├── error.png
│ │ ├── gray.png
│ │ └── scalable.png
│ ├── config
│ │ ├── webpack.base.ts
│ │ ├── webpack.dev.ts
│ │ └── webpack.prod.ts
│ ├── LICENSE.md
│ ├── package.json
│ ├── src
│ │ ├── app
│ │ │ ├── components
│ │ │ │ ├── FieldTree.tsx
│ │ │ │ ├── filter.ts
│ │ │ │ ├── LeftPanel.tsx
│ │ │ │ ├── RightPanel.tsx
│ │ │ │ ├── SearchBox.tsx
│ │ │ │ └── Tabs.tsx
│ │ │ ├── demo.tsx
│ │ │ └── index.tsx
│ │ └── extension
│ │ ├── backend.ts
│ │ ├── background.ts
│ │ ├── content.ts
│ │ ├── devpanel.tsx
│ │ ├── devtools.tsx
│ │ ├── inject.ts
│ │ ├── manifest.json
│ │ ├── popup.tsx
│ │ └── views
│ │ ├── devpanel.ejs
│ │ ├── devtools.ejs
│ │ └── popup.ejs
│ ├── tsconfig.build.json
│ └── tsconfig.json
├── docs
│ ├── functions
│ │ ├── contributors.ts
│ │ └── npm-search.ts
│ ├── guide
│ │ ├── advanced
│ │ │ ├── async.md
│ │ │ ├── async.zh-CN.md
│ │ │ ├── build.md
│ │ │ ├── build.zh-CN.md
│ │ │ ├── business-logic.md
│ │ │ ├── business-logic.zh-CN.md
│ │ │ ├── calculator.md
│ │ │ ├── calculator.zh-CN.md
│ │ │ ├── controlled.md
│ │ │ ├── controlled.zh-CN.md
│ │ │ ├── custom.md
│ │ │ ├── custom.zh-CN.md
│ │ │ ├── destructor.md
│ │ │ ├── destructor.zh-CN.md
│ │ │ ├── input.less
│ │ │ ├── layout.md
│ │ │ ├── layout.zh-CN.md
│ │ │ ├── linkages.md
│ │ │ ├── linkages.zh-CN.md
│ │ │ ├── validate.md
│ │ │ └── validate.zh-CN.md
│ │ ├── contribution.md
│ │ ├── contribution.zh-CN.md
│ │ ├── form-builder.md
│ │ ├── form-builder.zh-CN.md
│ │ ├── index.md
│ │ ├── index.zh-CN.md
│ │ ├── issue-helper.md
│ │ ├── issue-helper.zh-CN.md
│ │ ├── learn-formily.md
│ │ ├── learn-formily.zh-CN.md
│ │ ├── quick-start.md
│ │ ├── quick-start.zh-CN.md
│ │ ├── scenes
│ │ │ ├── dialog-drawer.md
│ │ │ ├── dialog-drawer.zh-CN.md
│ │ │ ├── edit-detail.md
│ │ │ ├── edit-detail.zh-CN.md
│ │ │ ├── index.less
│ │ │ ├── login-register.md
│ │ │ ├── login-register.zh-CN.md
│ │ │ ├── more.md
│ │ │ ├── more.zh-CN.md
│ │ │ ├── query-list.md
│ │ │ ├── query-list.zh-CN.md
│ │ │ ├── step-form.md
│ │ │ ├── step-form.zh-CN.md
│ │ │ ├── tab-form.md
│ │ │ ├── tab-form.zh-CN.md
│ │ │ └── VerifyCode.tsx
│ │ ├── upgrade.md
│ │ └── upgrade.zh-CN.md
│ ├── index.md
│ ├── index.zh-CN.md
│ └── site
│ ├── Contributors.less
│ ├── Contributors.tsx
│ ├── QrCode.less
│ ├── QrCode.tsx
│ ├── Section.less
│ ├── Section.tsx
│ └── styles.less
├── global.config.ts
├── jest.config.js
├── lerna.json
├── LICENSE.md
├── package.json
├── packages
│ ├── .eslintrc
│ ├── antd
│ │ ├── __tests__
│ │ │ ├── moment.spec.ts
│ │ │ └── sideEffects.spec.ts
│ │ ├── .npmignore
│ │ ├── .umirc.js
│ │ ├── build-style.ts
│ │ ├── create-style.ts
│ │ ├── docs
│ │ │ ├── components
│ │ │ │ ├── ArrayCards.md
│ │ │ │ ├── ArrayCards.zh-CN.md
│ │ │ │ ├── ArrayCollapse.md
│ │ │ │ ├── ArrayCollapse.zh-CN.md
│ │ │ │ ├── ArrayItems.md
│ │ │ │ ├── ArrayItems.zh-CN.md
│ │ │ │ ├── ArrayTable.md
│ │ │ │ ├── ArrayTable.zh-CN.md
│ │ │ │ ├── ArrayTabs.md
│ │ │ │ ├── ArrayTabs.zh-CN.md
│ │ │ │ ├── Cascader.md
│ │ │ │ ├── Cascader.zh-CN.md
│ │ │ │ ├── Checkbox.md
│ │ │ │ ├── Checkbox.zh-CN.md
│ │ │ │ ├── DatePicker.md
│ │ │ │ ├── DatePicker.zh-CN.md
│ │ │ │ ├── Editable.md
│ │ │ │ ├── Editable.zh-CN.md
│ │ │ │ ├── Form.md
│ │ │ │ ├── Form.zh-CN.md
│ │ │ │ ├── FormButtonGroup.md
│ │ │ │ ├── FormButtonGroup.zh-CN.md
│ │ │ │ ├── FormCollapse.md
│ │ │ │ ├── FormCollapse.zh-CN.md
│ │ │ │ ├── FormDialog.md
│ │ │ │ ├── FormDialog.zh-CN.md
│ │ │ │ ├── FormDrawer.md
│ │ │ │ ├── FormDrawer.zh-CN.md
│ │ │ │ ├── FormGrid.md
│ │ │ │ ├── FormGrid.zh-CN.md
│ │ │ │ ├── FormItem.md
│ │ │ │ ├── FormItem.zh-CN.md
│ │ │ │ ├── FormLayout.md
│ │ │ │ ├── FormLayout.zh-CN.md
│ │ │ │ ├── FormStep.md
│ │ │ │ ├── FormStep.zh-CN.md
│ │ │ │ ├── FormTab.md
│ │ │ │ ├── FormTab.zh-CN.md
│ │ │ │ ├── index.md
│ │ │ │ ├── index.zh-CN.md
│ │ │ │ ├── Input.md
│ │ │ │ ├── Input.zh-CN.md
│ │ │ │ ├── NumberPicker.md
│ │ │ │ ├── NumberPicker.zh-CN.md
│ │ │ │ ├── Password.md
│ │ │ │ ├── Password.zh-CN.md
│ │ │ │ ├── PreviewText.md
│ │ │ │ ├── PreviewText.zh-CN.md
│ │ │ │ ├── Radio.md
│ │ │ │ ├── Radio.zh-CN.md
│ │ │ │ ├── Reset.md
│ │ │ │ ├── Reset.zh-CN.md
│ │ │ │ ├── Select.md
│ │ │ │ ├── Select.zh-CN.md
│ │ │ │ ├── SelectTable.md
│ │ │ │ ├── SelectTable.zh-CN.md
│ │ │ │ ├── Space.md
│ │ │ │ ├── Space.zh-CN.md
│ │ │ │ ├── Submit.md
│ │ │ │ ├── Submit.zh-CN.md
│ │ │ │ ├── Switch.md
│ │ │ │ ├── Switch.zh-CN.md
│ │ │ │ ├── TimePicker.md
│ │ │ │ ├── TimePicker.zh-CN.md
│ │ │ │ ├── Transfer.md
│ │ │ │ ├── Transfer.zh-CN.md
│ │ │ │ ├── TreeSelect.md
│ │ │ │ ├── TreeSelect.zh-CN.md
│ │ │ │ ├── Upload.md
│ │ │ │ └── Upload.zh-CN.md
│ │ │ ├── index.md
│ │ │ └── index.zh-CN.md
│ │ ├── LICENSE.md
│ │ ├── package.json
│ │ ├── README.md
│ │ ├── rollup.config.js
│ │ ├── src
│ │ │ ├── __builtins__
│ │ │ │ ├── hooks
│ │ │ │ │ ├── index.ts
│ │ │ │ │ ├── useClickAway.ts
│ │ │ │ │ └── usePrefixCls.ts
│ │ │ │ ├── index.ts
│ │ │ │ ├── loading.ts
│ │ │ │ ├── moment.ts
│ │ │ │ ├── pickDataProps.ts
│ │ │ │ ├── portal.tsx
│ │ │ │ ├── render.ts
│ │ │ │ └── sort.tsx
│ │ │ ├── array-base
│ │ │ │ ├── index.tsx
│ │ │ │ ├── style.less
│ │ │ │ └── style.ts
│ │ │ ├── array-cards
│ │ │ │ ├── index.tsx
│ │ │ │ ├── style.less
│ │ │ │ └── style.ts
│ │ │ ├── array-collapse
│ │ │ │ ├── index.tsx
│ │ │ │ ├── style.less
│ │ │ │ └── style.ts
│ │ │ ├── array-items
│ │ │ │ ├── index.tsx
│ │ │ │ ├── style.less
│ │ │ │ └── style.ts
│ │ │ ├── array-table
│ │ │ │ ├── index.tsx
│ │ │ │ ├── style.less
│ │ │ │ └── style.ts
│ │ │ ├── array-tabs
│ │ │ │ ├── index.tsx
│ │ │ │ └── style.ts
│ │ │ ├── cascader
│ │ │ │ ├── index.tsx
│ │ │ │ └── style.ts
│ │ │ ├── checkbox
│ │ │ │ ├── index.tsx
│ │ │ │ └── style.ts
│ │ │ ├── date-picker
│ │ │ │ ├── index.tsx
│ │ │ │ └── style.ts
│ │ │ ├── editable
│ │ │ │ ├── index.tsx
│ │ │ │ ├── style.less
│ │ │ │ └── style.ts
│ │ │ ├── form
│ │ │ │ ├── index.tsx
│ │ │ │ ├── style.less
│ │ │ │ └── style.ts
│ │ │ ├── form-button-group
│ │ │ │ ├── index.tsx
│ │ │ │ ├── style.less
│ │ │ │ └── style.ts
│ │ │ ├── form-collapse
│ │ │ │ ├── index.tsx
│ │ │ │ └── style.ts
│ │ │ ├── form-dialog
│ │ │ │ ├── index.tsx
│ │ │ │ └── style.ts
│ │ │ ├── form-drawer
│ │ │ │ ├── index.tsx
│ │ │ │ └── style.ts
│ │ │ ├── form-grid
│ │ │ │ ├── index.tsx
│ │ │ │ ├── style.less
│ │ │ │ └── style.ts
│ │ │ ├── form-item
│ │ │ │ ├── animation.less
│ │ │ │ ├── grid.less
│ │ │ │ ├── index.tsx
│ │ │ │ ├── style.less
│ │ │ │ └── style.ts
│ │ │ ├── form-layout
│ │ │ │ ├── index.tsx
│ │ │ │ ├── style.less
│ │ │ │ ├── style.ts
│ │ │ │ └── useResponsiveFormLayout.ts
│ │ │ ├── form-step
│ │ │ │ ├── index.tsx
│ │ │ │ └── style.ts
│ │ │ ├── form-tab
│ │ │ │ ├── index.tsx
│ │ │ │ └── style.ts
│ │ │ ├── index.ts
│ │ │ ├── input
│ │ │ │ ├── index.tsx
│ │ │ │ └── style.ts
│ │ │ ├── number-picker
│ │ │ │ ├── index.tsx
│ │ │ │ └── style.ts
│ │ │ ├── password
│ │ │ │ ├── index.tsx
│ │ │ │ ├── PasswordStrength.tsx
│ │ │ │ └── style.ts
│ │ │ ├── preview-text
│ │ │ │ ├── index.tsx
│ │ │ │ ├── style.less
│ │ │ │ └── style.ts
│ │ │ ├── radio
│ │ │ │ ├── index.tsx
│ │ │ │ ├── style.less
│ │ │ │ └── style.ts
│ │ │ ├── reset
│ │ │ │ ├── index.tsx
│ │ │ │ └── style.ts
│ │ │ ├── select
│ │ │ │ ├── index.tsx
│ │ │ │ └── style.ts
│ │ │ ├── select-table
│ │ │ │ ├── index.tsx
│ │ │ │ ├── style.less
│ │ │ │ ├── style.ts
│ │ │ │ ├── useCheckSlackly.tsx
│ │ │ │ ├── useFilterOptions.tsx
│ │ │ │ ├── useFlatOptions.tsx
│ │ │ │ ├── useSize.tsx
│ │ │ │ ├── useTitleAddon.tsx
│ │ │ │ └── utils.ts
│ │ │ ├── space
│ │ │ │ ├── index.tsx
│ │ │ │ └── style.ts
│ │ │ ├── style.less
│ │ │ ├── style.ts
│ │ │ ├── submit
│ │ │ │ ├── index.tsx
│ │ │ │ └── style.ts
│ │ │ ├── switch
│ │ │ │ ├── index.tsx
│ │ │ │ └── style.ts
│ │ │ ├── time-picker
│ │ │ │ ├── index.tsx
│ │ │ │ └── style.ts
│ │ │ ├── transfer
│ │ │ │ ├── index.tsx
│ │ │ │ └── style.ts
│ │ │ ├── tree-select
│ │ │ │ ├── index.tsx
│ │ │ │ └── style.ts
│ │ │ └── upload
│ │ │ ├── index.tsx
│ │ │ ├── placeholder.ts
│ │ │ └── style.ts
│ │ ├── tsconfig.build.json
│ │ └── tsconfig.json
│ ├── benchmark
│ │ ├── .npmignore
│ │ ├── .umirc.js
│ │ ├── LICENSE.md
│ │ ├── package.json
│ │ ├── README.md
│ │ ├── src
│ │ │ └── index.tsx
│ │ ├── template.ejs
│ │ ├── tsconfig.build.json
│ │ ├── tsconfig.json
│ │ ├── webpack.base.ts
│ │ ├── webpack.dev.ts
│ │ └── webpack.prod.ts
│ ├── core
│ │ ├── .npmignore
│ │ ├── .umirc.js
│ │ ├── docs
│ │ │ ├── api
│ │ │ │ ├── entry
│ │ │ │ │ ├── ActionResponse.less
│ │ │ │ │ ├── ActionResponse.tsx
│ │ │ │ │ ├── createForm.md
│ │ │ │ │ ├── createForm.zh-CN.md
│ │ │ │ │ ├── FieldEffectHooks.md
│ │ │ │ │ ├── FieldEffectHooks.zh-CN.md
│ │ │ │ │ ├── FormChecker.md
│ │ │ │ │ ├── FormChecker.zh-CN.md
│ │ │ │ │ ├── FormEffectHooks.md
│ │ │ │ │ ├── FormEffectHooks.zh-CN.md
│ │ │ │ │ ├── FormHooksAPI.md
│ │ │ │ │ ├── FormHooksAPI.zh-CN.md
│ │ │ │ │ ├── FormPath.md
│ │ │ │ │ ├── FormPath.zh-CN.md
│ │ │ │ │ ├── FormValidatorRegistry.md
│ │ │ │ │ └── FormValidatorRegistry.zh-CN.md
│ │ │ │ └── models
│ │ │ │ ├── ArrayField.md
│ │ │ │ ├── ArrayField.zh-CN.md
│ │ │ │ ├── Field.md
│ │ │ │ ├── Field.zh-CN.md
│ │ │ │ ├── Form.md
│ │ │ │ ├── Form.zh-CN.md
│ │ │ │ ├── ObjectField.md
│ │ │ │ ├── ObjectField.zh-CN.md
│ │ │ │ ├── Query.md
│ │ │ │ ├── Query.zh-CN.md
│ │ │ │ ├── VoidField.md
│ │ │ │ └── VoidField.zh-CN.md
│ │ │ ├── guide
│ │ │ │ ├── architecture.md
│ │ │ │ ├── architecture.zh-CN.md
│ │ │ │ ├── field.md
│ │ │ │ ├── field.zh-CN.md
│ │ │ │ ├── form.md
│ │ │ │ ├── form.zh-CN.md
│ │ │ │ ├── index.md
│ │ │ │ ├── index.zh-CN.md
│ │ │ │ ├── mvvm.md
│ │ │ │ ├── mvvm.zh-CN.md
│ │ │ │ ├── values.md
│ │ │ │ └── values.zh-CN.md
│ │ │ ├── index.md
│ │ │ └── index.zh-CN.md
│ │ ├── LICENSE.md
│ │ ├── package.json
│ │ ├── README.md
│ │ ├── rollup.config.js
│ │ ├── src
│ │ │ ├── __tests__
│ │ │ │ ├── array.spec.ts
│ │ │ │ ├── effects.spec.ts
│ │ │ │ ├── externals.spec.ts
│ │ │ │ ├── field.spec.ts
│ │ │ │ ├── form.spec.ts
│ │ │ │ ├── graph.spec.ts
│ │ │ │ ├── heart.spec.ts
│ │ │ │ ├── internals.spec.ts
│ │ │ │ ├── lifecycle.spec.ts
│ │ │ │ ├── object.spec.ts
│ │ │ │ ├── shared.ts
│ │ │ │ └── void.spec.ts
│ │ │ ├── effects
│ │ │ │ ├── index.ts
│ │ │ │ ├── onFieldEffects.ts
│ │ │ │ └── onFormEffects.ts
│ │ │ ├── global.d.ts
│ │ │ ├── index.ts
│ │ │ ├── models
│ │ │ │ ├── ArrayField.ts
│ │ │ │ ├── BaseField.ts
│ │ │ │ ├── Field.ts
│ │ │ │ ├── Form.ts
│ │ │ │ ├── Graph.ts
│ │ │ │ ├── Heart.ts
│ │ │ │ ├── index.ts
│ │ │ │ ├── LifeCycle.ts
│ │ │ │ ├── ObjectField.ts
│ │ │ │ ├── Query.ts
│ │ │ │ ├── types.ts
│ │ │ │ └── VoidField.ts
│ │ │ ├── shared
│ │ │ │ ├── checkers.ts
│ │ │ │ ├── constants.ts
│ │ │ │ ├── effective.ts
│ │ │ │ ├── externals.ts
│ │ │ │ └── internals.ts
│ │ │ └── types.ts
│ │ ├── tsconfig.build.json
│ │ └── tsconfig.json
│ ├── element
│ │ ├── .npmignore
│ │ ├── build-style.ts
│ │ ├── create-style.ts
│ │ ├── docs
│ │ │ ├── .vuepress
│ │ │ │ ├── components
│ │ │ │ │ ├── createCodeSandBox.js
│ │ │ │ │ ├── dumi-previewer.vue
│ │ │ │ │ └── highlight.js
│ │ │ │ ├── config.js
│ │ │ │ ├── enhanceApp.js
│ │ │ │ ├── styles
│ │ │ │ │ └── index.styl
│ │ │ │ └── util.js
│ │ │ ├── demos
│ │ │ │ ├── guide
│ │ │ │ │ ├── array-cards
│ │ │ │ │ │ ├── effects-json-schema.vue
│ │ │ │ │ │ ├── effects-markup-schema.vue
│ │ │ │ │ │ ├── json-schema.vue
│ │ │ │ │ │ └── markup-schema.vue
│ │ │ │ │ ├── array-collapse
│ │ │ │ │ │ ├── effects-json-schema.vue
│ │ │ │ │ │ ├── effects-markup-schema.vue
│ │ │ │ │ │ ├── json-schema.vue
│ │ │ │ │ │ └── markup-schema.vue
│ │ │ │ │ ├── array-items
│ │ │ │ │ │ ├── json-schema.vue
│ │ │ │ │ │ └── markup-schema.vue
│ │ │ │ │ ├── array-table
│ │ │ │ │ │ ├── effects-json-schema.vue
│ │ │ │ │ │ ├── effects-markup-schema.vue
│ │ │ │ │ │ ├── json-schema.vue
│ │ │ │ │ │ └── markup-schema.vue
│ │ │ │ │ ├── array-tabs
│ │ │ │ │ │ ├── json-schema.vue
│ │ │ │ │ │ └── markup-schema.vue
│ │ │ │ │ ├── cascader
│ │ │ │ │ │ ├── json-schema.vue
│ │ │ │ │ │ ├── markup-schema.vue
│ │ │ │ │ │ └── template.vue
│ │ │ │ │ ├── checkbox
│ │ │ │ │ │ ├── json-schema.vue
│ │ │ │ │ │ ├── markup-schema.vue
│ │ │ │ │ │ └── template.vue
│ │ │ │ │ ├── date-picker
│ │ │ │ │ │ ├── json-schema.vue
│ │ │ │ │ │ ├── markup-schema.vue
│ │ │ │ │ │ └── template.vue
│ │ │ │ │ ├── editable
│ │ │ │ │ │ ├── json-schema.vue
│ │ │ │ │ │ ├── markup-schema.vue
│ │ │ │ │ │ └── template.vue
│ │ │ │ │ ├── form-button-group.vue
│ │ │ │ │ ├── form-collapse
│ │ │ │ │ │ ├── json-schema.vue
│ │ │ │ │ │ └── markup-schema.vue
│ │ │ │ │ ├── form-dialog
│ │ │ │ │ │ ├── json-schema.vue
│ │ │ │ │ │ ├── markup-schema.vue
│ │ │ │ │ │ └── template.vue
│ │ │ │ │ ├── form-drawer
│ │ │ │ │ │ ├── json-schema.vue
│ │ │ │ │ │ ├── markup-schema.vue
│ │ │ │ │ │ └── template.vue
│ │ │ │ │ ├── form-grid
│ │ │ │ │ │ ├── form.vue
│ │ │ │ │ │ ├── json-schema.vue
│ │ │ │ │ │ ├── markup-schema.vue
│ │ │ │ │ │ └── native.vue
│ │ │ │ │ ├── form-item
│ │ │ │ │ │ ├── bordered-none.vue
│ │ │ │ │ │ ├── common.vue
│ │ │ │ │ │ ├── feedback.vue
│ │ │ │ │ │ ├── inset.vue
│ │ │ │ │ │ ├── json-schema.vue
│ │ │ │ │ │ ├── markup-schema.vue
│ │ │ │ │ │ ├── size.vue
│ │ │ │ │ │ └── template.vue
│ │ │ │ │ ├── form-layout
│ │ │ │ │ │ ├── json-schema.vue
│ │ │ │ │ │ ├── markup-schema.vue
│ │ │ │ │ │ └── template.vue
│ │ │ │ │ ├── form-step
│ │ │ │ │ │ ├── json-schema.vue
│ │ │ │ │ │ └── markup-schema.vue
│ │ │ │ │ ├── form-tab
│ │ │ │ │ │ ├── json-schema.vue
│ │ │ │ │ │ └── markup-schema.vue
│ │ │ │ │ ├── form.vue
│ │ │ │ │ ├── input
│ │ │ │ │ │ ├── json-schema.vue
│ │ │ │ │ │ ├── markup-schema.vue
│ │ │ │ │ │ └── template.vue
│ │ │ │ │ ├── input-number
│ │ │ │ │ │ ├── json-schema.vue
│ │ │ │ │ │ ├── markup-schema.vue
│ │ │ │ │ │ └── template.vue
│ │ │ │ │ ├── password
│ │ │ │ │ │ ├── json-schema.vue
│ │ │ │ │ │ ├── markup-schema.vue
│ │ │ │ │ │ └── template.vue
│ │ │ │ │ ├── preview-text
│ │ │ │ │ │ ├── base.vue
│ │ │ │ │ │ └── extend.vue
│ │ │ │ │ ├── radio
│ │ │ │ │ │ ├── json-schema.vue
│ │ │ │ │ │ ├── markup-schema.vue
│ │ │ │ │ │ └── template.vue
│ │ │ │ │ ├── reset
│ │ │ │ │ │ ├── base.vue
│ │ │ │ │ │ ├── force.vue
│ │ │ │ │ │ └── validate.vue
│ │ │ │ │ ├── select
│ │ │ │ │ │ ├── json-schema-async.vue
│ │ │ │ │ │ ├── json-schema-sync.vue
│ │ │ │ │ │ ├── markup-schema-async-search.vue
│ │ │ │ │ │ ├── markup-schema-async.vue
│ │ │ │ │ │ ├── markup-schema-sync.vue
│ │ │ │ │ │ ├── template-async.vue
│ │ │ │ │ │ └── template-sync.vue
│ │ │ │ │ ├── space
│ │ │ │ │ │ ├── json-schema.vue
│ │ │ │ │ │ ├── markup-schema.vue
│ │ │ │ │ │ └── template.vue
│ │ │ │ │ ├── submit
│ │ │ │ │ │ ├── base.vue
│ │ │ │ │ │ └── loading.vue
│ │ │ │ │ ├── switch
│ │ │ │ │ │ ├── json-schema.vue
│ │ │ │ │ │ ├── markup-schema.vue
│ │ │ │ │ │ └── template.vue
│ │ │ │ │ ├── time-picker
│ │ │ │ │ │ ├── json-schema.vue
│ │ │ │ │ │ ├── markup-schema.vue
│ │ │ │ │ │ └── template.vue
│ │ │ │ │ ├── transfer
│ │ │ │ │ │ ├── json-schema.vue
│ │ │ │ │ │ ├── markup-schema.vue
│ │ │ │ │ │ └── template.vue
│ │ │ │ │ └── upload
│ │ │ │ │ ├── json-schema.vue
│ │ │ │ │ ├── markup-schema.vue
│ │ │ │ │ └── template.vue
│ │ │ │ └── index.vue
│ │ │ ├── guide
│ │ │ │ ├── array-cards.md
│ │ │ │ ├── array-collapse.md
│ │ │ │ ├── array-items.md
│ │ │ │ ├── array-table.md
│ │ │ │ ├── array-tabs.md
│ │ │ │ ├── cascader.md
│ │ │ │ ├── checkbox.md
│ │ │ │ ├── date-picker.md
│ │ │ │ ├── editable.md
│ │ │ │ ├── form-button-group.md
│ │ │ │ ├── form-collapse.md
│ │ │ │ ├── form-dialog.md
│ │ │ │ ├── form-drawer.md
│ │ │ │ ├── form-grid.md
│ │ │ │ ├── form-item.md
│ │ │ │ ├── form-layout.md
│ │ │ │ ├── form-step.md
│ │ │ │ ├── form-tab.md
│ │ │ │ ├── form.md
│ │ │ │ ├── index.md
│ │ │ │ ├── input-number.md
│ │ │ │ ├── input.md
│ │ │ │ ├── password.md
│ │ │ │ ├── preview-text.md
│ │ │ │ ├── radio.md
│ │ │ │ ├── reset.md
│ │ │ │ ├── select.md
│ │ │ │ ├── space.md
│ │ │ │ ├── submit.md
│ │ │ │ ├── switch.md
│ │ │ │ ├── time-picker.md
│ │ │ │ ├── transfer.md
│ │ │ │ └── upload.md
│ │ │ └── README.md
│ │ ├── package.json
│ │ ├── README.md
│ │ ├── rollup.config.js
│ │ ├── src
│ │ │ ├── __builtins__
│ │ │ │ ├── configs
│ │ │ │ │ └── index.ts
│ │ │ │ ├── index.ts
│ │ │ │ ├── shared
│ │ │ │ │ ├── create-context.ts
│ │ │ │ │ ├── index.ts
│ │ │ │ │ ├── loading.ts
│ │ │ │ │ ├── portal.ts
│ │ │ │ │ ├── resolve-component.ts
│ │ │ │ │ ├── transform-component.ts
│ │ │ │ │ ├── types.ts
│ │ │ │ │ └── utils.ts
│ │ │ │ └── styles
│ │ │ │ └── common.scss
│ │ │ ├── array-base
│ │ │ │ ├── index.ts
│ │ │ │ ├── style.scss
│ │ │ │ └── style.ts
│ │ │ ├── array-cards
│ │ │ │ ├── index.ts
│ │ │ │ ├── style.scss
│ │ │ │ └── style.ts
│ │ │ ├── array-collapse
│ │ │ │ ├── index.ts
│ │ │ │ ├── style.scss
│ │ │ │ └── style.ts
│ │ │ ├── array-items
│ │ │ │ ├── index.ts
│ │ │ │ ├── style.scss
│ │ │ │ └── style.ts
│ │ │ ├── array-table
│ │ │ │ ├── index.ts
│ │ │ │ ├── style.scss
│ │ │ │ └── style.ts
│ │ │ ├── array-tabs
│ │ │ │ ├── index.ts
│ │ │ │ ├── style.scss
│ │ │ │ └── style.ts
│ │ │ ├── cascader
│ │ │ │ ├── index.ts
│ │ │ │ └── style.ts
│ │ │ ├── checkbox
│ │ │ │ ├── index.ts
│ │ │ │ └── style.ts
│ │ │ ├── date-picker
│ │ │ │ ├── index.ts
│ │ │ │ └── style.ts
│ │ │ ├── editable
│ │ │ │ ├── index.ts
│ │ │ │ ├── style.scss
│ │ │ │ └── style.ts
│ │ │ ├── el-form
│ │ │ │ ├── index.ts
│ │ │ │ └── style.ts
│ │ │ ├── el-form-item
│ │ │ │ ├── index.ts
│ │ │ │ └── style.ts
│ │ │ ├── form
│ │ │ │ ├── index.ts
│ │ │ │ ├── style.scss
│ │ │ │ └── style.ts
│ │ │ ├── form-button-group
│ │ │ │ ├── index.ts
│ │ │ │ ├── style.scss
│ │ │ │ └── style.ts
│ │ │ ├── form-collapse
│ │ │ │ ├── index.ts
│ │ │ │ ├── style.scss
│ │ │ │ └── style.ts
│ │ │ ├── form-dialog
│ │ │ │ ├── index.ts
│ │ │ │ └── style.ts
│ │ │ ├── form-drawer
│ │ │ │ ├── index.ts
│ │ │ │ ├── style.scss
│ │ │ │ └── style.ts
│ │ │ ├── form-grid
│ │ │ │ ├── index.ts
│ │ │ │ ├── style.scss
│ │ │ │ └── style.ts
│ │ │ ├── form-item
│ │ │ │ ├── animation.scss
│ │ │ │ ├── grid.scss
│ │ │ │ ├── index.ts
│ │ │ │ ├── style.scss
│ │ │ │ ├── style.ts
│ │ │ │ └── var.scss
│ │ │ ├── form-layout
│ │ │ │ ├── index.ts
│ │ │ │ ├── style.scss
│ │ │ │ ├── style.ts
│ │ │ │ └── useResponsiveFormLayout.ts
│ │ │ ├── form-step
│ │ │ │ ├── index.ts
│ │ │ │ └── style.ts
│ │ │ ├── form-tab
│ │ │ │ ├── index.ts
│ │ │ │ ├── style.scss
│ │ │ │ └── style.ts
│ │ │ ├── index.ts
│ │ │ ├── input
│ │ │ │ ├── index.ts
│ │ │ │ └── style.ts
│ │ │ ├── input-number
│ │ │ │ ├── index.ts
│ │ │ │ └── style.ts
│ │ │ ├── password
│ │ │ │ ├── index.ts
│ │ │ │ └── style.ts
│ │ │ ├── preview-text
│ │ │ │ ├── index.ts
│ │ │ │ └── style.ts
│ │ │ ├── radio
│ │ │ │ ├── index.ts
│ │ │ │ └── style.ts
│ │ │ ├── reset
│ │ │ │ ├── index.ts
│ │ │ │ └── style.ts
│ │ │ ├── select
│ │ │ │ ├── index.ts
│ │ │ │ └── style.ts
│ │ │ ├── space
│ │ │ │ ├── index.ts
│ │ │ │ ├── style.scss
│ │ │ │ └── style.ts
│ │ │ ├── style.ts
│ │ │ ├── submit
│ │ │ │ ├── index.ts
│ │ │ │ └── style.ts
│ │ │ ├── switch
│ │ │ │ ├── index.ts
│ │ │ │ └── style.ts
│ │ │ ├── time-picker
│ │ │ │ ├── index.ts
│ │ │ │ └── style.ts
│ │ │ ├── transfer
│ │ │ │ ├── index.ts
│ │ │ │ └── style.ts
│ │ │ └── upload
│ │ │ ├── index.ts
│ │ │ └── style.ts
│ │ ├── transformer.ts
│ │ ├── tsconfig.build.json
│ │ └── tsconfig.json
│ ├── grid
│ │ ├── .npmignore
│ │ ├── LICENSE.md
│ │ ├── package.json
│ │ ├── README.md
│ │ ├── rollup.config.js
│ │ ├── src
│ │ │ ├── index.ts
│ │ │ └── observer.ts
│ │ ├── tsconfig.build.json
│ │ └── tsconfig.json
│ ├── json-schema
│ │ ├── .npmignore
│ │ ├── LICENSE.md
│ │ ├── package.json
│ │ ├── README.md
│ │ ├── rollup.config.js
│ │ ├── src
│ │ │ ├── __tests__
│ │ │ │ ├── __snapshots__
│ │ │ │ │ └── schema.spec.ts.snap
│ │ │ │ ├── compiler.spec.ts
│ │ │ │ ├── patches.spec.ts
│ │ │ │ ├── schema.spec.ts
│ │ │ │ ├── server-validate.spec.ts
│ │ │ │ ├── shared.spec.ts
│ │ │ │ ├── transformer.spec.ts
│ │ │ │ └── traverse.spec.ts
│ │ │ ├── compiler.ts
│ │ │ ├── global.d.ts
│ │ │ ├── index.ts
│ │ │ ├── patches.ts
│ │ │ ├── polyfills
│ │ │ │ ├── index.ts
│ │ │ │ └── SPECIFICATION_1_0.ts
│ │ │ ├── schema.ts
│ │ │ ├── shared.ts
│ │ │ ├── transformer.ts
│ │ │ └── types.ts
│ │ ├── tsconfig.build.json
│ │ └── tsconfig.json
│ ├── next
│ │ ├── __tests__
│ │ │ ├── moment.spec.ts
│ │ │ └── sideEffects.spec.ts
│ │ ├── .npmignore
│ │ ├── .umirc.js
│ │ ├── build-style.ts
│ │ ├── create-style.ts
│ │ ├── docs
│ │ │ ├── components
│ │ │ │ ├── ArrayCards.md
│ │ │ │ ├── ArrayCards.zh-CN.md
│ │ │ │ ├── ArrayCollapse.md
│ │ │ │ ├── ArrayCollapse.zh-CN.md
│ │ │ │ ├── ArrayItems.md
│ │ │ │ ├── ArrayItems.zh-CN.md
│ │ │ │ ├── ArrayTable.md
│ │ │ │ ├── ArrayTable.zh-CN.md
│ │ │ │ ├── Cascader.md
│ │ │ │ ├── Cascader.zh-CN.md
│ │ │ │ ├── Checkbox.md
│ │ │ │ ├── Checkbox.zh-CN.md
│ │ │ │ ├── DatePicker.md
│ │ │ │ ├── DatePicker.zh-CN.md
│ │ │ │ ├── DatePicker2.md
│ │ │ │ ├── DatePicker2.zh-CN.md
│ │ │ │ ├── Editable.md
│ │ │ │ ├── Editable.zh-CN.md
│ │ │ │ ├── Form.md
│ │ │ │ ├── Form.zh-CN.md
│ │ │ │ ├── FormButtonGroup.md
│ │ │ │ ├── FormButtonGroup.zh-CN.md
│ │ │ │ ├── FormCollapse.md
│ │ │ │ ├── FormCollapse.zh-CN.md
│ │ │ │ ├── FormDialog.md
│ │ │ │ ├── FormDialog.zh-CN.md
│ │ │ │ ├── FormDrawer.md
│ │ │ │ ├── FormDrawer.zh-CN.md
│ │ │ │ ├── FormGrid.md
│ │ │ │ ├── FormGrid.zh-CN.md
│ │ │ │ ├── FormItem.md
│ │ │ │ ├── FormItem.zh-CN.md
│ │ │ │ ├── FormLayout.md
│ │ │ │ ├── FormLayout.zh-CN.md
│ │ │ │ ├── FormStep.md
│ │ │ │ ├── FormStep.zh-CN.md
│ │ │ │ ├── FormTab.md
│ │ │ │ ├── FormTab.zh-CN.md
│ │ │ │ ├── index.md
│ │ │ │ ├── index.zh-CN.md
│ │ │ │ ├── Input.md
│ │ │ │ ├── Input.zh-CN.md
│ │ │ │ ├── NumberPicker.md
│ │ │ │ ├── NumberPicker.zh-CN.md
│ │ │ │ ├── Password.md
│ │ │ │ ├── Password.zh-CN.md
│ │ │ │ ├── PreviewText.md
│ │ │ │ ├── PreviewText.zh-CN.md
│ │ │ │ ├── Radio.md
│ │ │ │ ├── Radio.zh-CN.md
│ │ │ │ ├── Reset.md
│ │ │ │ ├── Reset.zh-CN.md
│ │ │ │ ├── Select.md
│ │ │ │ ├── Select.zh-CN.md
│ │ │ │ ├── SelectTable.md
│ │ │ │ ├── SelectTable.zh-CN.md
│ │ │ │ ├── Space.md
│ │ │ │ ├── Space.zh-CN.md
│ │ │ │ ├── Submit.md
│ │ │ │ ├── Submit.zh-CN.md
│ │ │ │ ├── Switch.md
│ │ │ │ ├── Switch.zh-CN.md
│ │ │ │ ├── TimePicker.md
│ │ │ │ ├── TimePicker.zh-CN.md
│ │ │ │ ├── TimePicker2.md
│ │ │ │ ├── TimePicker2.zh-CN.md
│ │ │ │ ├── Transfer.md
│ │ │ │ ├── Transfer.zh-CN.md
│ │ │ │ ├── TreeSelect.md
│ │ │ │ ├── TreeSelect.zh-CN.md
│ │ │ │ ├── Upload.md
│ │ │ │ └── Upload.zh-CN.md
│ │ │ ├── index.md
│ │ │ └── index.zh-CN.md
│ │ ├── LESENCE.md
│ │ ├── package.json
│ │ ├── README.md
│ │ ├── rollup.config.js
│ │ ├── src
│ │ │ ├── __builtins__
│ │ │ │ ├── empty.tsx
│ │ │ │ ├── hooks
│ │ │ │ │ ├── index.ts
│ │ │ │ │ ├── useClickAway.ts
│ │ │ │ │ └── usePrefixCls.ts
│ │ │ │ ├── icons.tsx
│ │ │ │ ├── index.ts
│ │ │ │ ├── loading.ts
│ │ │ │ ├── mapSize.ts
│ │ │ │ ├── mapStatus.ts
│ │ │ │ ├── moment.ts
│ │ │ │ ├── pickDataProps.ts
│ │ │ │ ├── portal.tsx
│ │ │ │ ├── render.ts
│ │ │ │ └── toArray.ts
│ │ │ ├── array-base
│ │ │ │ ├── index.tsx
│ │ │ │ ├── main.scss
│ │ │ │ └── style.ts
│ │ │ ├── array-cards
│ │ │ │ ├── index.tsx
│ │ │ │ ├── main.scss
│ │ │ │ └── style.ts
│ │ │ ├── array-collapse
│ │ │ │ ├── index.tsx
│ │ │ │ ├── main.scss
│ │ │ │ └── style.ts
│ │ │ ├── array-items
│ │ │ │ ├── index.tsx
│ │ │ │ ├── main.scss
│ │ │ │ └── style.ts
│ │ │ ├── array-table
│ │ │ │ ├── index.tsx
│ │ │ │ ├── main.scss
│ │ │ │ └── style.ts
│ │ │ ├── cascader
│ │ │ │ ├── index.tsx
│ │ │ │ └── style.ts
│ │ │ ├── checkbox
│ │ │ │ ├── index.tsx
│ │ │ │ └── style.ts
│ │ │ ├── date-picker
│ │ │ │ ├── index.tsx
│ │ │ │ └── style.ts
│ │ │ ├── date-picker2
│ │ │ │ ├── index.tsx
│ │ │ │ ├── main.scss
│ │ │ │ └── style.ts
│ │ │ ├── editable
│ │ │ │ ├── index.tsx
│ │ │ │ ├── main.scss
│ │ │ │ └── style.ts
│ │ │ ├── form
│ │ │ │ ├── index.tsx
│ │ │ │ ├── main.scss
│ │ │ │ └── style.ts
│ │ │ ├── form-button-group
│ │ │ │ ├── index.tsx
│ │ │ │ ├── main.scss
│ │ │ │ └── style.ts
│ │ │ ├── form-collapse
│ │ │ │ ├── index.tsx
│ │ │ │ └── style.ts
│ │ │ ├── form-dialog
│ │ │ │ ├── index.tsx
│ │ │ │ └── style.ts
│ │ │ ├── form-drawer
│ │ │ │ ├── index.tsx
│ │ │ │ └── style.ts
│ │ │ ├── form-grid
│ │ │ │ ├── index.tsx
│ │ │ │ ├── main.scss
│ │ │ │ └── style.ts
│ │ │ ├── form-item
│ │ │ │ ├── animation.scss
│ │ │ │ ├── grid.scss
│ │ │ │ ├── index.tsx
│ │ │ │ ├── main.scss
│ │ │ │ ├── scss
│ │ │ │ │ └── variable.scss
│ │ │ │ └── style.ts
│ │ │ ├── form-layout
│ │ │ │ ├── index.tsx
│ │ │ │ ├── main.scss
│ │ │ │ ├── style.ts
│ │ │ │ └── useResponsiveFormLayout.ts
│ │ │ ├── form-step
│ │ │ │ ├── index.tsx
│ │ │ │ └── style.ts
│ │ │ ├── form-tab
│ │ │ │ ├── index.tsx
│ │ │ │ └── style.ts
│ │ │ ├── index.ts
│ │ │ ├── input
│ │ │ │ ├── index.tsx
│ │ │ │ └── style.ts
│ │ │ ├── main.scss
│ │ │ ├── number-picker
│ │ │ │ ├── index.tsx
│ │ │ │ └── style.ts
│ │ │ ├── password
│ │ │ │ ├── index.tsx
│ │ │ │ ├── PasswordStrength.tsx
│ │ │ │ └── style.ts
│ │ │ ├── preview-text
│ │ │ │ ├── index.tsx
│ │ │ │ ├── main.scss
│ │ │ │ └── style.ts
│ │ │ ├── radio
│ │ │ │ ├── index.tsx
│ │ │ │ └── style.ts
│ │ │ ├── reset
│ │ │ │ ├── index.tsx
│ │ │ │ └── style.ts
│ │ │ ├── select
│ │ │ │ ├── index.tsx
│ │ │ │ └── style.ts
│ │ │ ├── select-table
│ │ │ │ ├── index.tsx
│ │ │ │ ├── main.scss
│ │ │ │ ├── style.ts
│ │ │ │ ├── useCheckSlackly.tsx
│ │ │ │ ├── useFilterOptions.tsx
│ │ │ │ ├── useFlatOptions.tsx
│ │ │ │ ├── useSize.tsx
│ │ │ │ ├── useTitleAddon.tsx
│ │ │ │ └── utils.ts
│ │ │ ├── space
│ │ │ │ ├── index.tsx
│ │ │ │ ├── main.scss
│ │ │ │ └── style.ts
│ │ │ ├── style.ts
│ │ │ ├── submit
│ │ │ │ ├── index.tsx
│ │ │ │ └── style.ts
│ │ │ ├── switch
│ │ │ │ ├── index.tsx
│ │ │ │ └── style.ts
│ │ │ ├── time-picker
│ │ │ │ ├── index.tsx
│ │ │ │ └── style.ts
│ │ │ ├── time-picker2
│ │ │ │ ├── index.tsx
│ │ │ │ └── style.ts
│ │ │ ├── transfer
│ │ │ │ ├── index.tsx
│ │ │ │ └── style.ts
│ │ │ ├── tree-select
│ │ │ │ ├── index.tsx
│ │ │ │ └── style.ts
│ │ │ └── upload
│ │ │ ├── index.tsx
│ │ │ ├── main.scss
│ │ │ ├── placeholder.ts
│ │ │ └── style.ts
│ │ ├── tsconfig.build.json
│ │ └── tsconfig.json
│ ├── path
│ │ ├── .npmignore
│ │ ├── benchmark.ts
│ │ ├── LICENSE.md
│ │ ├── package.json
│ │ ├── README.md
│ │ ├── rollup.config.js
│ │ ├── src
│ │ │ ├── __tests__
│ │ │ │ ├── accessor.spec.ts
│ │ │ │ ├── basic.spec.ts
│ │ │ │ ├── match.spec.ts
│ │ │ │ ├── parser.spec.ts
│ │ │ │ └── share.spec.ts
│ │ │ ├── contexts.ts
│ │ │ ├── destructor.ts
│ │ │ ├── index.ts
│ │ │ ├── matcher.ts
│ │ │ ├── parser.ts
│ │ │ ├── shared.ts
│ │ │ ├── tokenizer.ts
│ │ │ ├── tokens.ts
│ │ │ └── types.ts
│ │ ├── tsconfig.build.json
│ │ └── tsconfig.json
│ ├── react
│ │ ├── .npmignore
│ │ ├── .umirc.js
│ │ ├── docs
│ │ │ ├── api
│ │ │ │ ├── components
│ │ │ │ │ ├── ArrayField.md
│ │ │ │ │ ├── ArrayField.zh-CN.md
│ │ │ │ │ ├── ExpressionScope.md
│ │ │ │ │ ├── ExpressionScope.zh-CN.md
│ │ │ │ │ ├── Field.md
│ │ │ │ │ ├── Field.zh-CN.md
│ │ │ │ │ ├── FormConsumer.md
│ │ │ │ │ ├── FormConsumer.zh-CN.md
│ │ │ │ │ ├── FormProvider.md
│ │ │ │ │ ├── FormProvider.zh-CN.md
│ │ │ │ │ ├── ObjectField.md
│ │ │ │ │ ├── ObjectField.zh-CN.md
│ │ │ │ │ ├── RecordScope.md
│ │ │ │ │ ├── RecordScope.zh-CN.md
│ │ │ │ │ ├── RecordsScope.md
│ │ │ │ │ ├── RecordsScope.zh-CN.md
│ │ │ │ │ ├── RecursionField.md
│ │ │ │ │ ├── RecursionField.zh-CN.md
│ │ │ │ │ ├── SchemaField.md
│ │ │ │ │ ├── SchemaField.zh-CN.md
│ │ │ │ │ ├── VoidField.md
│ │ │ │ │ └── VoidField.zh-CN.md
│ │ │ │ ├── hooks
│ │ │ │ │ ├── useExpressionScope.md
│ │ │ │ │ ├── useExpressionScope.zh-CN.md
│ │ │ │ │ ├── useField.md
│ │ │ │ │ ├── useField.zh-CN.md
│ │ │ │ │ ├── useFieldSchema.md
│ │ │ │ │ ├── useFieldSchema.zh-CN.md
│ │ │ │ │ ├── useForm.md
│ │ │ │ │ ├── useForm.zh-CN.md
│ │ │ │ │ ├── useFormEffects.md
│ │ │ │ │ ├── useFormEffects.zh-CN.md
│ │ │ │ │ ├── useParentForm.md
│ │ │ │ │ └── useParentForm.zh-CN.md
│ │ │ │ └── shared
│ │ │ │ ├── connect.md
│ │ │ │ ├── connect.zh-CN.md
│ │ │ │ ├── context.md
│ │ │ │ ├── context.zh-CN.md
│ │ │ │ ├── mapProps.md
│ │ │ │ ├── mapProps.zh-CN.md
│ │ │ │ ├── mapReadPretty.md
│ │ │ │ ├── mapReadPretty.zh-CN.md
│ │ │ │ ├── observer.md
│ │ │ │ ├── observer.zh-CN.md
│ │ │ │ ├── Schema.md
│ │ │ │ └── Schema.zh-CN.md
│ │ │ ├── guide
│ │ │ │ ├── architecture.md
│ │ │ │ ├── architecture.zh-CN.md
│ │ │ │ ├── concept.md
│ │ │ │ ├── concept.zh-CN.md
│ │ │ │ ├── index.md
│ │ │ │ └── index.zh-CN.md
│ │ │ ├── index.md
│ │ │ └── index.zh-CN.md
│ │ ├── LICENSE.md
│ │ ├── package.json
│ │ ├── README.md
│ │ ├── rollup.config.js
│ │ ├── src
│ │ │ ├── __tests__
│ │ │ │ ├── expression.spec.tsx
│ │ │ │ ├── field.spec.tsx
│ │ │ │ ├── form.spec.tsx
│ │ │ │ ├── schema.json.spec.tsx
│ │ │ │ ├── schema.markup.spec.tsx
│ │ │ │ └── shared.tsx
│ │ │ ├── components
│ │ │ │ ├── ArrayField.tsx
│ │ │ │ ├── ExpressionScope.tsx
│ │ │ │ ├── Field.tsx
│ │ │ │ ├── FormConsumer.tsx
│ │ │ │ ├── FormProvider.tsx
│ │ │ │ ├── index.ts
│ │ │ │ ├── ObjectField.tsx
│ │ │ │ ├── ReactiveField.tsx
│ │ │ │ ├── RecordScope.tsx
│ │ │ │ ├── RecordsScope.tsx
│ │ │ │ ├── RecursionField.tsx
│ │ │ │ ├── SchemaField.tsx
│ │ │ │ └── VoidField.tsx
│ │ │ ├── global.d.ts
│ │ │ ├── hooks
│ │ │ │ ├── index.ts
│ │ │ │ ├── useAttach.ts
│ │ │ │ ├── useExpressionScope.ts
│ │ │ │ ├── useField.ts
│ │ │ │ ├── useFieldSchema.ts
│ │ │ │ ├── useForm.ts
│ │ │ │ ├── useFormEffects.ts
│ │ │ │ └── useParentForm.ts
│ │ │ ├── index.ts
│ │ │ ├── shared
│ │ │ │ ├── connect.ts
│ │ │ │ ├── context.ts
│ │ │ │ ├── index.ts
│ │ │ │ └── render.ts
│ │ │ └── types.ts
│ │ ├── tsconfig.build.json
│ │ └── tsconfig.json
│ ├── reactive
│ │ ├── .npmignore
│ │ ├── .umirc.js
│ │ ├── benchmark.ts
│ │ ├── docs
│ │ │ ├── api
│ │ │ │ ├── action.md
│ │ │ │ ├── action.zh-CN.md
│ │ │ │ ├── autorun.md
│ │ │ │ ├── autorun.zh-CN.md
│ │ │ │ ├── batch.md
│ │ │ │ ├── batch.zh-CN.md
│ │ │ │ ├── define.md
│ │ │ │ ├── define.zh-CN.md
│ │ │ │ ├── hasCollected.md
│ │ │ │ ├── hasCollected.zh-CN.md
│ │ │ │ ├── markObservable.md
│ │ │ │ ├── markObservable.zh-CN.md
│ │ │ │ ├── markRaw.md
│ │ │ │ ├── markRaw.zh-CN.md
│ │ │ │ ├── model.md
│ │ │ │ ├── model.zh-CN.md
│ │ │ │ ├── observable.md
│ │ │ │ ├── observable.zh-CN.md
│ │ │ │ ├── observe.md
│ │ │ │ ├── observe.zh-CN.md
│ │ │ │ ├── raw.md
│ │ │ │ ├── raw.zh-CN.md
│ │ │ │ ├── react
│ │ │ │ │ ├── observer.md
│ │ │ │ │ └── observer.zh-CN.md
│ │ │ │ ├── reaction.md
│ │ │ │ ├── reaction.zh-CN.md
│ │ │ │ ├── toJS.md
│ │ │ │ ├── toJS.zh-CN.md
│ │ │ │ ├── tracker.md
│ │ │ │ ├── tracker.zh-CN.md
│ │ │ │ ├── typeChecker.md
│ │ │ │ ├── typeChecker.zh-CN.md
│ │ │ │ ├── untracked.md
│ │ │ │ ├── untracked.zh-CN.md
│ │ │ │ └── vue
│ │ │ │ ├── observer.md
│ │ │ │ └── observer.zh-CN.md
│ │ │ ├── guide
│ │ │ │ ├── best-practice.md
│ │ │ │ ├── best-practice.zh-CN.md
│ │ │ │ ├── concept.md
│ │ │ │ ├── concept.zh-CN.md
│ │ │ │ ├── index.md
│ │ │ │ └── index.zh-CN.md
│ │ │ ├── index.md
│ │ │ └── index.zh-CN.md
│ │ ├── LICENSE.md
│ │ ├── package.json
│ │ ├── README.md
│ │ ├── rollup.config.js
│ │ ├── src
│ │ │ ├── __tests__
│ │ │ │ ├── action.spec.ts
│ │ │ │ ├── annotations.spec.ts
│ │ │ │ ├── array.spec.ts
│ │ │ │ ├── autorun.spec.ts
│ │ │ │ ├── batch.spec.ts
│ │ │ │ ├── collections-map.spec.ts
│ │ │ │ ├── collections-set.spec.ts
│ │ │ │ ├── collections-weakmap.spec.ts
│ │ │ │ ├── collections-weakset.spec.ts
│ │ │ │ ├── define.spec.ts
│ │ │ │ ├── externals.spec.ts
│ │ │ │ ├── hasCollected.spec.ts
│ │ │ │ ├── observable.spec.ts
│ │ │ │ ├── observe.spec.ts
│ │ │ │ ├── tracker.spec.ts
│ │ │ │ └── untracked.spec.ts
│ │ │ ├── action.ts
│ │ │ ├── annotations
│ │ │ │ ├── box.ts
│ │ │ │ ├── computed.ts
│ │ │ │ ├── index.ts
│ │ │ │ ├── observable.ts
│ │ │ │ ├── ref.ts
│ │ │ │ └── shallow.ts
│ │ │ ├── array.ts
│ │ │ ├── autorun.ts
│ │ │ ├── batch.ts
│ │ │ ├── checkers.ts
│ │ │ ├── environment.ts
│ │ │ ├── externals.ts
│ │ │ ├── global.d.ts
│ │ │ ├── handlers.ts
│ │ │ ├── index.ts
│ │ │ ├── internals.ts
│ │ │ ├── model.ts
│ │ │ ├── observable.ts
│ │ │ ├── observe.ts
│ │ │ ├── reaction.ts
│ │ │ ├── tracker.ts
│ │ │ ├── tree.ts
│ │ │ ├── types.ts
│ │ │ └── untracked.ts
│ │ ├── tsconfig.build.json
│ │ └── tsconfig.json
│ ├── reactive-react
│ │ ├── .npmignore
│ │ ├── .umirc.js
│ │ ├── LICENSE.md
│ │ ├── package.json
│ │ ├── README.md
│ │ ├── rollup.config.js
│ │ ├── src
│ │ │ ├── hooks
│ │ │ │ ├── index.ts
│ │ │ │ ├── useCompatEffect.ts
│ │ │ │ ├── useCompatFactory.ts
│ │ │ │ ├── useDidUpdate.ts
│ │ │ │ ├── useForceUpdate.ts
│ │ │ │ ├── useLayoutEffect.ts
│ │ │ │ └── useObserver.ts
│ │ │ ├── index.ts
│ │ │ ├── observer.ts
│ │ │ ├── shared
│ │ │ │ ├── gc.ts
│ │ │ │ ├── global.ts
│ │ │ │ ├── immediate.ts
│ │ │ │ └── index.ts
│ │ │ └── types.ts
│ │ ├── tsconfig.build.json
│ │ └── tsconfig.json
│ ├── reactive-test-cases-for-react18
│ │ ├── .npmignore
│ │ ├── .umirc.js
│ │ ├── LICENSE.md
│ │ ├── package.json
│ │ ├── README.md
│ │ ├── src
│ │ │ ├── index.js
│ │ │ └── MySlowList.js
│ │ ├── template.ejs
│ │ ├── tsconfig.build.json
│ │ ├── tsconfig.json
│ │ ├── webpack.base.ts
│ │ ├── webpack.dev.ts
│ │ └── webpack.prod.ts
│ ├── reactive-vue
│ │ ├── .npmignore
│ │ ├── LICENSE.md
│ │ ├── package.json
│ │ ├── README.md
│ │ ├── rollup.config.js
│ │ ├── src
│ │ │ ├── __tests__
│ │ │ │ └── observer.spec.ts
│ │ │ ├── hooks
│ │ │ │ ├── index.ts
│ │ │ │ └── useObserver.ts
│ │ │ ├── index.ts
│ │ │ ├── observer
│ │ │ │ ├── collectData.ts
│ │ │ │ ├── index.ts
│ │ │ │ ├── observerInVue2.ts
│ │ │ │ └── observerInVue3.ts
│ │ │ └── types.ts
│ │ ├── tsconfig.build.json
│ │ └── tsconfig.json
│ ├── shared
│ │ ├── .npmignore
│ │ ├── LICENSE.md
│ │ ├── package.json
│ │ ├── README.md
│ │ ├── rollup.config.js
│ │ ├── src
│ │ │ ├── __tests__
│ │ │ │ └── index.spec.ts
│ │ │ ├── array.ts
│ │ │ ├── case.ts
│ │ │ ├── checkers.ts
│ │ │ ├── clone.ts
│ │ │ ├── compare.ts
│ │ │ ├── defaults.ts
│ │ │ ├── deprecate.ts
│ │ │ ├── global.ts
│ │ │ ├── index.ts
│ │ │ ├── instanceof.ts
│ │ │ ├── isEmpty.ts
│ │ │ ├── merge.ts
│ │ │ ├── middleware.ts
│ │ │ ├── path.ts
│ │ │ ├── string.ts
│ │ │ ├── subscribable.ts
│ │ │ └── uid.ts
│ │ ├── tsconfig.build.json
│ │ └── tsconfig.json
│ ├── validator
│ │ ├── .npmignore
│ │ ├── LICENSE.md
│ │ ├── package.json
│ │ ├── README.md
│ │ ├── rollup.config.js
│ │ ├── src
│ │ │ ├── __tests__
│ │ │ │ ├── parser.spec.ts
│ │ │ │ ├── registry.spec.ts
│ │ │ │ └── validator.spec.ts
│ │ │ ├── formats.ts
│ │ │ ├── index.ts
│ │ │ ├── locale.ts
│ │ │ ├── parser.ts
│ │ │ ├── registry.ts
│ │ │ ├── rules.ts
│ │ │ ├── template.ts
│ │ │ ├── types.ts
│ │ │ └── validator.ts
│ │ ├── tsconfig.build.json
│ │ └── tsconfig.json
│ └── vue
│ ├── .npmignore
│ ├── bin
│ │ ├── formily-vue-fix.js
│ │ └── formily-vue-switch.js
│ ├── docs
│ │ ├── .vuepress
│ │ │ ├── components
│ │ │ │ ├── createCodeSandBox.js
│ │ │ │ ├── dumi-previewer.vue
│ │ │ │ └── highlight.js
│ │ │ ├── config.js
│ │ │ ├── enhanceApp.js
│ │ │ └── styles
│ │ │ └── index.styl
│ │ ├── api
│ │ │ ├── components
│ │ │ │ ├── array-field.md
│ │ │ │ ├── expression-scope.md
│ │ │ │ ├── field.md
│ │ │ │ ├── form-consumer.md
│ │ │ │ ├── form-provider.md
│ │ │ │ ├── object-field.md
│ │ │ │ ├── recursion-field-with-component.md
│ │ │ │ ├── recursion-field.md
│ │ │ │ ├── schema-field-with-schema.md
│ │ │ │ ├── schema-field.md
│ │ │ │ └── void-field.md
│ │ │ ├── hooks
│ │ │ │ ├── use-field-schema.md
│ │ │ │ ├── use-field.md
│ │ │ │ ├── use-form-effects.md
│ │ │ │ ├── use-form.md
│ │ │ │ └── use-parent-form.md
│ │ │ └── shared
│ │ │ ├── connect.md
│ │ │ ├── injections.md
│ │ │ ├── map-props.md
│ │ │ ├── map-read-pretty.md
│ │ │ ├── observer.md
│ │ │ └── schema.md
│ │ ├── demos
│ │ │ ├── api
│ │ │ │ ├── components
│ │ │ │ │ ├── array-field.vue
│ │ │ │ │ ├── expression-scope.vue
│ │ │ │ │ ├── field.vue
│ │ │ │ │ ├── form-consumer.vue
│ │ │ │ │ ├── form-provider.vue
│ │ │ │ │ ├── object-field.vue
│ │ │ │ │ ├── recursion-field-with-component.vue
│ │ │ │ │ ├── recursion-field.vue
│ │ │ │ │ ├── schema-field-with-schema.vue
│ │ │ │ │ ├── schema-field.vue
│ │ │ │ │ └── void-field.vue
│ │ │ │ ├── hooks
│ │ │ │ │ ├── use-field-schema.vue
│ │ │ │ │ ├── use-field.vue
│ │ │ │ │ ├── use-form-effects.vue
│ │ │ │ │ ├── use-form.vue
│ │ │ │ │ └── use-parent-form.vue
│ │ │ │ └── shared
│ │ │ │ ├── connect.vue
│ │ │ │ ├── map-props.vue
│ │ │ │ ├── map-read-pretty.vue
│ │ │ │ └── observer.vue
│ │ │ ├── index.vue
│ │ │ └── questions
│ │ │ ├── default-slot.vue
│ │ │ ├── events.vue
│ │ │ ├── named-slot.vue
│ │ │ └── scoped-slot.vue
│ │ ├── guide
│ │ │ ├── architecture.md
│ │ │ ├── concept.md
│ │ │ └── README.md
│ │ ├── questions
│ │ │ └── README.md
│ │ └── README.md
│ ├── package.json
│ ├── README.md
│ ├── rollup.config.js
│ ├── scripts
│ │ ├── postinstall.js
│ │ ├── switch-cli.js
│ │ └── utils.js
│ ├── src
│ │ ├── __tests__
│ │ │ ├── expression.scope.spec.ts
│ │ │ ├── field.spec.ts
│ │ │ ├── form.spec.ts
│ │ │ ├── schema.json.spec.ts
│ │ │ ├── schema.markup.spec.ts
│ │ │ ├── shared.spec.ts
│ │ │ └── utils.spec.ts
│ │ ├── components
│ │ │ ├── ArrayField.ts
│ │ │ ├── ExpressionScope.ts
│ │ │ ├── Field.ts
│ │ │ ├── FormConsumer.ts
│ │ │ ├── FormProvider.ts
│ │ │ ├── index.ts
│ │ │ ├── ObjectField.ts
│ │ │ ├── ReactiveField.ts
│ │ │ ├── RecursionField.ts
│ │ │ ├── SchemaField.ts
│ │ │ └── VoidField.ts
│ │ ├── global.d.ts
│ │ ├── hooks
│ │ │ ├── index.ts
│ │ │ ├── useAttach.ts
│ │ │ ├── useField.ts
│ │ │ ├── useFieldSchema.ts
│ │ │ ├── useForm.ts
│ │ │ ├── useFormEffects.ts
│ │ │ ├── useInjectionCleaner.ts
│ │ │ └── useParentForm.ts
│ │ ├── index.ts
│ │ ├── shared
│ │ │ ├── connect.ts
│ │ │ ├── context.ts
│ │ │ ├── createForm.ts
│ │ │ ├── fragment.ts
│ │ │ ├── h.ts
│ │ │ └── index.ts
│ │ ├── types
│ │ │ └── index.ts
│ │ ├── utils
│ │ │ ├── formatVNodeData.ts
│ │ │ ├── getFieldProps.ts
│ │ │ ├── getRawComponent.ts
│ │ │ └── resolveSchemaProps.ts
│ │ └── vue2-components.ts
│ ├── tsconfig.build.json
│ ├── tsconfig.json
│ └── tsconfig.types.json
├── README.md
├── README.zh-cn.md
├── scripts
│ ├── build-style
│ │ ├── buildAllStyles.ts
│ │ ├── copy.ts
│ │ ├── helper.ts
│ │ └── index.ts
│ └── rollup.base.js
├── tsconfig.build.json
├── tsconfig.jest.json
├── tsconfig.json
└── yarn.lock
```
# Files
--------------------------------------------------------------------------------
/devtools/chrome-extension/src/app/demo.tsx:
--------------------------------------------------------------------------------
```typescript
import React from 'react'
import ReactDOM from 'react-dom'
import App from './index'
const dataSource = [
{
'': {
pristine: false,
valid: true,
invalid: false,
loading: false,
validating: false,
initialized: true,
submitting: false,
errors: [],
warnings: [],
values: {
aa: true,
cc: true,
gg: 'aaaa',
},
initialValues: {
aa: true,
cc: true,
},
mounted: true,
unmounted: false,
props: {},
displayName: 'FormState',
},
block: {
name: 'block',
path: 'block',
initialized: true,
visible: true,
display: true,
mounted: true,
unmounted: false,
props: {
key: 'block',
type: 'object',
name: 'block',
'x-component': 'block',
'x-props': {
title: 'Block1',
},
'x-component-props': {
title: 'Block1',
},
},
displayName: 'VirtualFieldState',
},
'block.aa': {
name: 'aa',
path: 'block.aa',
dataType: 'boolean',
initialized: true,
pristine: true,
valid: true,
modified: false,
touched: false,
active: false,
visited: false,
invalid: false,
visible: true,
display: true,
loading: false,
validating: false,
errors: [],
values: [true],
ruleErrors: [],
ruleWarnings: [],
effectErrors: [],
warnings: [],
effectWarnings: [],
editable: true,
value: true,
initialValue: true,
rules: [],
required: false,
mounted: true,
unmounted: false,
props: {
key: 'aa',
name: 'aa',
type: 'boolean',
'x-component': 'radio',
default: true,
enum: [
{
label: '是',
value: true,
},
{
label: '否',
value: false,
},
],
title: '是否隐藏AA',
},
displayName: 'FieldState',
},
'block.bb': {
name: 'bb',
path: 'block.bb',
dataType: 'string',
initialized: true,
pristine: true,
valid: true,
modified: false,
touched: false,
active: false,
visited: false,
invalid: false,
visible: false,
display: true,
loading: false,
validating: false,
errors: [],
values: [null],
ruleErrors: [],
ruleWarnings: [],
effectErrors: [],
warnings: [],
effectWarnings: [],
editable: true,
rules: [],
required: false,
mounted: true,
unmounted: false,
props: {
key: 'bb',
name: 'bb',
type: 'string',
title: 'AA',
},
displayName: 'FieldState',
},
'block.cc': {
name: 'cc',
path: 'block.cc',
dataType: 'boolean',
initialized: true,
pristine: true,
valid: true,
modified: false,
touched: false,
active: false,
visited: false,
invalid: false,
visible: true,
display: true,
loading: false,
validating: false,
errors: [],
values: [true],
ruleErrors: [],
ruleWarnings: [],
effectErrors: [],
warnings: [],
effectWarnings: [],
editable: true,
value: true,
initialValue: true,
rules: [],
required: false,
mounted: true,
unmounted: false,
props: {
key: 'cc',
name: 'cc',
type: 'boolean',
title: '是否隐藏DD',
default: true,
'x-component': 'radio',
enum: [
{
label: '是',
value: true,
},
{
label: '否',
value: false,
},
],
},
displayName: 'FieldState',
},
dd: {
name: 'dd',
path: 'dd',
initialized: true,
visible: false,
display: true,
mounted: true,
unmounted: false,
props: {
key: 'dd',
type: 'object',
name: 'dd',
'x-component': 'block',
'x-props': {
title: 'Block2',
},
'x-component-props': {
title: 'Block2',
},
},
displayName: 'VirtualFieldState',
},
kk: {
name: 'kk',
path: 'kk',
initialized: true,
visible: true,
display: true,
mounted: true,
unmounted: false,
props: {
key: 'kk',
type: 'object',
name: 'kk',
'x-component': 'block',
'x-props': {
title: 'Block3',
},
'x-component-props': {
title: 'Block3',
},
},
displayName: 'VirtualFieldState',
},
'kk.gg': {
name: 'gg',
path: 'kk.gg',
dataType: 'string',
initialized: true,
pristine: false,
valid: true,
modified: true,
touched: false,
active: false,
visited: false,
invalid: false,
visible: true,
display: true,
loading: false,
validating: false,
errors: [],
values: ['aaaa'],
ruleErrors: [],
ruleWarnings: [],
effectErrors: [],
warnings: [],
effectWarnings: [],
editable: true,
value: 'aaaa',
rules: [],
required: false,
mounted: true,
unmounted: false,
props: {
key: 'gg',
name: 'gg',
type: 'string',
title: 'GG',
'x-props': {
showSearch: true,
filterLocal: false,
style: {
width: 200,
},
},
enum: [
{
label: 'aaaa',
value: 'aaaa',
extra: ['x1', 'x2', 'x3'],
},
{
label: 'bbbb',
value: 'bbbb',
extra: ['x4', 'x5', 'x6'],
},
{
label: 'cccc',
value: 'cccc',
extra: ['x7', 'x8', 'x9'],
},
],
},
displayName: 'FieldState',
},
'kk.hh': {
name: 'hh',
path: 'kk.hh',
dataType: 'string',
initialized: true,
pristine: true,
valid: true,
modified: false,
touched: false,
active: false,
visited: false,
invalid: false,
visible: false,
display: true,
loading: false,
validating: false,
errors: [],
values: [null],
ruleErrors: [],
ruleWarnings: [],
effectErrors: [],
warnings: [],
effectWarnings: [],
editable: true,
rules: [],
required: false,
mounted: true,
unmounted: false,
props: {
key: 'hh',
name: 'hh',
type: 'string',
title: 'HH',
enum: [],
'x-props': {
style: {
width: 200,
},
},
},
displayName: 'FieldState',
},
},
{
'': {
pristine: true,
valid: true,
invalid: false,
loading: false,
validating: false,
initialized: true,
submitting: false,
errors: [],
warnings: [],
values: {},
initialValues: {},
mounted: true,
unmounted: false,
props: {},
displayName: 'FormState',
},
total: {
name: 'total',
path: 'total',
dataType: 'number',
initialized: true,
pristine: true,
valid: true,
modified: false,
touched: false,
active: false,
visited: false,
invalid: false,
visible: true,
display: true,
loading: false,
validating: false,
errors: [],
values: [null],
ruleErrors: [],
ruleWarnings: [],
effectErrors: [],
warnings: [],
effectWarnings: [],
editable: true,
rules: [
{
required: true,
},
],
required: true,
mounted: true,
unmounted: false,
props: {
key: 'total',
name: 'total',
type: 'number',
required: true,
title: '总价',
},
displayName: 'FieldState',
},
count: {
name: 'count',
path: 'count',
dataType: 'number',
initialized: true,
pristine: true,
valid: true,
modified: false,
touched: false,
active: false,
visited: false,
invalid: false,
visible: true,
display: true,
loading: false,
validating: false,
errors: [],
values: [null],
ruleErrors: [],
ruleWarnings: [],
effectErrors: [],
warnings: [],
effectWarnings: [],
editable: true,
rules: [
{
required: true,
},
],
required: true,
mounted: true,
unmounted: false,
props: {
key: 'count',
name: 'count',
type: 'number',
required: true,
title: '数量',
},
displayName: 'FieldState',
},
price: {
name: 'price',
path: 'price',
dataType: 'number',
initialized: true,
pristine: true,
valid: true,
modified: false,
touched: false,
active: false,
visited: false,
invalid: false,
visible: true,
display: true,
loading: false,
validating: false,
errors: [],
values: [null],
ruleErrors: [],
ruleWarnings: [],
effectErrors: [],
warnings: [],
effectWarnings: [],
editable: true,
rules: [
{
required: true,
},
],
required: true,
mounted: true,
unmounted: false,
props: {
key: 'price',
name: 'price',
type: 'number',
required: true,
title: '单价',
},
displayName: 'FieldState',
},
},
{
'': {
pristine: true,
valid: true,
invalid: false,
loading: false,
validating: false,
initialized: true,
submitting: false,
errors: [],
warnings: [],
values: {},
initialValues: {},
mounted: true,
unmounted: false,
props: {},
displayName: 'FormState',
},
NO_NAME_FIELD_$0: {
name: 'NO_NAME_FIELD_$0',
path: 'NO_NAME_FIELD_$0',
initialized: true,
visible: true,
display: true,
mounted: true,
unmounted: false,
props: {
key: 'NO_NAME_FIELD_$0',
type: 'object',
name: 'NO_NAME_FIELD_$0',
'x-component': 'block',
'x-props': {
title: 'Block1',
},
'x-component-props': {
title: 'Block1',
},
},
displayName: 'VirtualFieldState',
},
'NO_NAME_FIELD_$0.aa': {
name: 'aa',
path: 'NO_NAME_FIELD_$0.aa',
dataType: 'string',
initialized: true,
pristine: true,
valid: true,
modified: false,
touched: false,
active: false,
visited: false,
invalid: false,
visible: true,
display: true,
loading: false,
validating: false,
errors: [],
values: [null],
ruleErrors: [],
ruleWarnings: [],
effectErrors: [],
warnings: [],
effectWarnings: [],
editable: true,
rules: [],
required: false,
mounted: true,
unmounted: false,
props: {
key: 'aa',
name: 'aa',
type: 'string',
enum: ['aaaaa', 'bbbbb', 'ccccc', 'ddddd', 'eeeee'],
title: 'AA',
},
displayName: 'FieldState',
},
'NO_NAME_FIELD_$0.bb': {
name: 'bb',
path: 'NO_NAME_FIELD_$0.bb',
dataType: 'string',
initialized: true,
pristine: true,
valid: true,
modified: false,
touched: false,
active: false,
visited: false,
invalid: false,
visible: false,
display: true,
loading: false,
validating: false,
errors: [],
values: [null],
ruleErrors: [],
ruleWarnings: [],
effectErrors: [],
warnings: [],
effectWarnings: [],
editable: true,
rules: [],
required: false,
mounted: true,
unmounted: false,
props: {
key: 'bb',
type: 'string',
name: 'bb',
title: 'BB',
enum: [],
},
displayName: 'FieldState',
},
'NO_NAME_FIELD_$0.cc': {
name: 'cc',
path: 'NO_NAME_FIELD_$0.cc',
dataType: 'string',
initialized: true,
pristine: true,
valid: true,
modified: false,
touched: false,
active: false,
visited: false,
invalid: false,
visible: true,
display: true,
loading: false,
validating: false,
errors: [],
values: [null],
ruleErrors: [],
ruleWarnings: [],
effectErrors: [],
warnings: [],
effectWarnings: [],
editable: true,
rules: [],
required: false,
mounted: true,
unmounted: false,
props: {
key: 'cc',
type: 'string',
name: 'cc',
title: 'CC',
},
displayName: 'FieldState',
},
},
{
'': {
pristine: true,
valid: true,
invalid: false,
loading: false,
validating: false,
initialized: true,
submitting: false,
errors: [],
warnings: [],
values: {},
initialValues: {},
mounted: true,
unmounted: false,
props: {},
displayName: 'FormState',
},
aa: {
name: 'aa',
path: 'aa',
dataType: 'string',
initialized: true,
pristine: true,
valid: true,
modified: false,
touched: false,
active: false,
visited: false,
invalid: false,
visible: true,
display: true,
loading: false,
validating: false,
errors: [],
values: [null],
ruleErrors: [],
ruleWarnings: [],
effectErrors: [],
warnings: [],
effectWarnings: [],
editable: true,
rules: [
{
required: true,
},
],
required: true,
mounted: true,
unmounted: false,
props: {
key: 'aa',
name: 'aa',
type: 'string',
required: true,
title: 'AA',
},
displayName: 'FieldState',
},
bb: {
name: 'bb',
path: 'bb',
dataType: 'string',
initialized: true,
pristine: true,
valid: true,
modified: false,
touched: false,
active: false,
visited: false,
invalid: false,
visible: true,
display: true,
loading: false,
validating: false,
errors: [],
values: [null],
ruleErrors: [],
ruleWarnings: [],
effectErrors: [],
warnings: [],
effectWarnings: [],
editable: true,
rules: [],
required: false,
mounted: true,
unmounted: false,
props: {
key: 'bb',
type: 'string',
name: 'bb',
title: 'BB',
enum: ['111', '222'],
},
displayName: 'FieldState',
},
},
{
'': {
pristine: false,
valid: true,
invalid: false,
loading: false,
validating: false,
initialized: true,
submitting: false,
errors: [],
warnings: [],
values: {
aa: [
{
bb: 'aaaaa',
dd: [
{
ff: '是',
ee: '是',
},
],
cc: '1111',
},
{
bb: 'ccccc',
dd: [
{
ff: '是',
ee: '否',
},
],
cc: '1111',
},
],
},
initialValues: {
aa: [
{
bb: 'aaaaa',
dd: [
{
ee: '是',
ff: '是',
},
],
},
{
bb: 'ccccc',
dd: [
{
ee: '否',
ff: '是',
},
],
},
],
},
mounted: true,
unmounted: false,
props: {},
displayName: 'FormState',
},
NO_NAME_FIELD_$0: {
name: 'NO_NAME_FIELD_$0',
path: 'NO_NAME_FIELD_$0',
initialized: true,
visible: true,
display: true,
mounted: true,
unmounted: false,
props: {
key: 'NO_NAME_FIELD_$0',
type: 'object',
name: 'NO_NAME_FIELD_$0',
'x-component': 'block',
'x-props': {
title: 'Block1',
},
'x-component-props': {
title: 'Block1',
},
},
displayName: 'VirtualFieldState',
},
'NO_NAME_FIELD_$0.aa': {
name: 'aa',
path: 'NO_NAME_FIELD_$0.aa',
dataType: 'array',
initialized: true,
pristine: false,
valid: true,
modified: true,
touched: false,
active: false,
visited: false,
invalid: false,
visible: true,
display: true,
loading: false,
validating: false,
errors: [],
values: [
[
{
bb: 'aaaaa',
dd: [
{
ff: '是',
ee: '是',
},
],
cc: '1111',
},
{
bb: 'ccccc',
dd: [
{
ff: '是',
ee: '否',
},
],
cc: '1111',
},
],
],
ruleErrors: [],
ruleWarnings: [],
effectErrors: [],
warnings: [],
effectWarnings: [],
editable: true,
value: [
{
bb: 'aaaaa',
dd: [
{
ff: '是',
ee: '是',
},
],
cc: '1111',
},
{
bb: 'ccccc',
dd: [
{
ff: '是',
ee: '否',
},
],
cc: '1111',
},
],
initialValue: [
{
bb: 'aaaaa',
dd: [
{
ee: '是',
ff: '是',
},
],
},
{
bb: 'ccccc',
dd: [
{
ee: '否',
ff: '是',
},
],
},
],
rules: [],
required: false,
mounted: true,
unmounted: false,
props: {
key: 'aa',
type: 'array',
name: 'aa',
},
displayName: 'FieldState',
},
'NO_NAME_FIELD_$0.aa.0': {
name: 'aa.0',
path: 'NO_NAME_FIELD_$0.aa.0',
dataType: 'object',
initialized: true,
pristine: false,
valid: true,
modified: true,
touched: false,
active: false,
visited: false,
invalid: false,
visible: true,
display: true,
loading: false,
validating: false,
errors: [],
values: [
{
bb: 'aaaaa',
dd: [
{
ff: '是',
ee: '是',
},
],
cc: '1111',
},
],
ruleErrors: [],
ruleWarnings: [],
effectErrors: [],
warnings: [],
effectWarnings: [],
editable: true,
value: {
bb: 'aaaaa',
dd: [
{
ff: '是',
ee: '是',
},
],
cc: '1111',
},
initialValue: {
bb: 'aaaaa',
dd: [
{
ee: '是',
ff: '是',
},
],
},
rules: [],
required: false,
mounted: true,
unmounted: false,
props: {
type: 'object',
},
displayName: 'FieldState',
},
'NO_NAME_FIELD_$0.aa.0.NO_NAME_FIELD_$1': {
name: 'aa.0.NO_NAME_FIELD_$1',
path: 'NO_NAME_FIELD_$0.aa.0.NO_NAME_FIELD_$1',
initialized: true,
visible: true,
display: true,
mounted: true,
unmounted: false,
props: {
key: 'NO_NAME_FIELD_$1',
type: 'object',
name: 'NO_NAME_FIELD_$1',
'x-component': 'block',
'x-props': {
title: '基本信息',
},
'x-component-props': {
title: '基本信息',
},
},
displayName: 'VirtualFieldState',
},
'NO_NAME_FIELD_$0.aa.0.NO_NAME_FIELD_$1.NO_NAME_FIELD_$2': {
name: 'aa.0.NO_NAME_FIELD_$2',
path: 'NO_NAME_FIELD_$0.aa.0.NO_NAME_FIELD_$1.NO_NAME_FIELD_$2',
initialized: true,
visible: true,
display: true,
mounted: true,
unmounted: false,
props: {
key: 'NO_NAME_FIELD_$2',
type: 'object',
name: 'NO_NAME_FIELD_$2',
'x-component': 'layout',
'x-props': {
inline: true,
},
'x-component-props': {
inline: true,
},
},
displayName: 'VirtualFieldState',
},
'NO_NAME_FIELD_$0.aa.0.NO_NAME_FIELD_$1.NO_NAME_FIELD_$2.bb': {
name: 'aa.0.bb',
path: 'NO_NAME_FIELD_$0.aa.0.NO_NAME_FIELD_$1.NO_NAME_FIELD_$2.bb',
dataType: 'string',
initialized: true,
pristine: true,
valid: true,
modified: false,
touched: false,
active: false,
visited: false,
invalid: false,
visible: true,
display: true,
loading: false,
validating: false,
errors: [],
values: ['aaaaa'],
ruleErrors: [],
ruleWarnings: [],
effectErrors: [],
warnings: [],
effectWarnings: [],
editable: true,
value: 'aaaaa',
initialValue: 'aaaaa',
rules: [],
required: false,
mounted: true,
unmounted: false,
props: {
key: 'bb',
type: 'string',
name: 'bb',
enum: ['aaaaa', 'bbbbb', 'ccccc', 'ddddd', 'eeeee'],
title: 'BB',
},
displayName: 'FieldState',
},
'NO_NAME_FIELD_$0.aa.0.NO_NAME_FIELD_$1.NO_NAME_FIELD_$2.cc': {
name: 'aa.0.cc',
path: 'NO_NAME_FIELD_$0.aa.0.NO_NAME_FIELD_$1.NO_NAME_FIELD_$2.cc',
dataType: 'string',
initialized: true,
pristine: false,
valid: true,
modified: true,
touched: false,
active: false,
visited: false,
invalid: false,
visible: true,
display: true,
loading: false,
validating: false,
errors: [],
values: ['1111'],
ruleErrors: [],
ruleWarnings: [],
effectErrors: [],
warnings: [],
effectWarnings: [],
editable: true,
value: '1111',
rules: [],
required: false,
mounted: true,
unmounted: false,
props: {
key: 'cc',
type: 'string',
name: 'cc',
enum: ['1111', '2222'],
title: 'CC',
},
displayName: 'FieldState',
},
'NO_NAME_FIELD_$0.aa.0.NO_NAME_FIELD_$1.NO_NAME_FIELD_$2.gg': {
name: 'aa.0.gg',
path: 'NO_NAME_FIELD_$0.aa.0.NO_NAME_FIELD_$1.NO_NAME_FIELD_$2.gg',
dataType: 'string',
initialized: true,
pristine: true,
valid: true,
modified: false,
touched: false,
active: false,
visited: false,
invalid: false,
visible: true,
display: true,
loading: false,
validating: false,
errors: [],
values: [null],
ruleErrors: [],
ruleWarnings: [],
effectErrors: [],
warnings: [],
effectWarnings: [],
editable: true,
rules: [],
required: false,
mounted: true,
unmounted: false,
props: {
key: 'gg',
type: 'string',
name: 'gg',
title: 'GG',
'x-props': {
style: {
width: 200,
},
},
},
displayName: 'FieldState',
},
'NO_NAME_FIELD_$0.aa.0.NO_NAME_FIELD_$3': {
name: 'aa.0.NO_NAME_FIELD_$3',
path: 'NO_NAME_FIELD_$0.aa.0.NO_NAME_FIELD_$3',
initialized: true,
visible: true,
display: true,
mounted: true,
unmounted: false,
props: {
key: 'NO_NAME_FIELD_$3',
type: 'object',
name: 'NO_NAME_FIELD_$3',
'x-component': 'block',
'x-props': {
title: '嵌套Array',
},
'x-component-props': {
title: '嵌套Array',
},
},
displayName: 'VirtualFieldState',
},
'NO_NAME_FIELD_$0.aa.0.NO_NAME_FIELD_$3.dd': {
name: 'aa.0.dd',
path: 'NO_NAME_FIELD_$0.aa.0.NO_NAME_FIELD_$3.dd',
dataType: 'array',
initialized: true,
pristine: true,
valid: true,
modified: false,
touched: false,
active: false,
visited: false,
invalid: false,
visible: true,
display: true,
loading: false,
validating: false,
errors: [],
values: [
[
{
ee: '是',
ff: '是',
},
],
],
ruleErrors: [],
ruleWarnings: [],
effectErrors: [],
warnings: [],
effectWarnings: [],
editable: true,
value: [
{
ee: '是',
ff: '是',
},
],
initialValue: [
{
ee: '是',
ff: '是',
},
],
rules: [],
required: false,
mounted: true,
unmounted: false,
props: {
key: 'dd',
type: 'array',
name: 'dd',
},
displayName: 'FieldState',
},
'NO_NAME_FIELD_$0.aa.0.NO_NAME_FIELD_$3.dd.0': {
name: 'aa.0.dd.0',
path: 'NO_NAME_FIELD_$0.aa.0.NO_NAME_FIELD_$3.dd.0',
dataType: 'object',
initialized: true,
pristine: true,
valid: true,
modified: false,
touched: false,
active: false,
visited: false,
invalid: false,
visible: true,
display: true,
loading: false,
validating: false,
errors: [],
values: [
{
ee: '是',
ff: '是',
},
],
ruleErrors: [],
ruleWarnings: [],
effectErrors: [],
warnings: [],
effectWarnings: [],
editable: true,
value: {
ee: '是',
ff: '是',
},
initialValue: {
ee: '是',
ff: '是',
},
rules: [],
required: false,
mounted: true,
unmounted: false,
props: {
type: 'object',
},
displayName: 'FieldState',
},
'NO_NAME_FIELD_$0.aa.0.NO_NAME_FIELD_$3.dd.0.NO_NAME_FIELD_$4': {
name: 'aa.0.dd.0.NO_NAME_FIELD_$4',
path: 'NO_NAME_FIELD_$0.aa.0.NO_NAME_FIELD_$3.dd.0.NO_NAME_FIELD_$4',
initialized: true,
visible: true,
display: true,
mounted: true,
unmounted: false,
props: {
key: 'NO_NAME_FIELD_$4',
type: 'object',
name: 'NO_NAME_FIELD_$4',
'x-component': 'layout',
'x-props': {
inline: true,
style: {
marginLeft: 20,
},
},
'x-component-props': {
inline: true,
style: {
marginLeft: 20,
},
},
},
displayName: 'VirtualFieldState',
},
'NO_NAME_FIELD_$0.aa.0.NO_NAME_FIELD_$3.dd.0.NO_NAME_FIELD_$4.ee': {
name: 'aa.0.dd.0.ee',
path: 'NO_NAME_FIELD_$0.aa.0.NO_NAME_FIELD_$3.dd.0.NO_NAME_FIELD_$4.ee',
dataType: 'string',
initialized: true,
pristine: true,
valid: true,
modified: false,
touched: false,
active: false,
visited: false,
invalid: false,
visible: true,
display: true,
loading: false,
validating: false,
errors: [],
values: ['是'],
ruleErrors: [],
ruleWarnings: [],
effectErrors: [],
warnings: [],
effectWarnings: [],
editable: true,
value: '是',
initialValue: '是',
rules: [],
required: false,
mounted: true,
unmounted: false,
props: {
key: 'ee',
type: 'string',
name: 'ee',
enum: ['是', '否'],
title: 'EE',
description: '是否显示GG',
},
displayName: 'FieldState',
},
'NO_NAME_FIELD_$0.aa.0.NO_NAME_FIELD_$3.dd.0.NO_NAME_FIELD_$4.ff': {
name: 'aa.0.dd.0.ff',
path: 'NO_NAME_FIELD_$0.aa.0.NO_NAME_FIELD_$3.dd.0.NO_NAME_FIELD_$4.ff',
dataType: 'string',
initialized: true,
pristine: true,
valid: true,
modified: false,
touched: false,
active: false,
visited: false,
invalid: false,
visible: true,
display: true,
loading: false,
validating: false,
errors: [],
values: ['是'],
ruleErrors: [],
ruleWarnings: [],
effectErrors: [],
warnings: [],
effectWarnings: [],
editable: true,
value: '是',
initialValue: '是',
rules: [],
required: false,
mounted: true,
unmounted: false,
props: {
key: 'ff',
type: 'string',
name: 'ff',
default: '是',
enum: ['是', '否'],
title: 'FF',
description: '是否显示EE',
},
displayName: 'FieldState',
},
'NO_NAME_FIELD_$0.aa.1': {
name: 'aa.1',
path: 'NO_NAME_FIELD_$0.aa.1',
dataType: 'object',
initialized: true,
pristine: false,
valid: true,
modified: true,
touched: false,
active: false,
visited: false,
invalid: false,
visible: true,
display: true,
loading: false,
validating: false,
errors: [],
values: [
{
bb: 'ccccc',
dd: [
{
ff: '是',
ee: '否',
},
],
cc: '1111',
},
],
ruleErrors: [],
ruleWarnings: [],
effectErrors: [],
warnings: [],
effectWarnings: [],
editable: true,
value: {
bb: 'ccccc',
dd: [
{
ff: '是',
ee: '否',
},
],
cc: '1111',
},
initialValue: {
bb: 'ccccc',
dd: [
{
ee: '否',
ff: '是',
},
],
},
rules: [],
required: false,
mounted: true,
unmounted: false,
props: {
type: 'object',
},
displayName: 'FieldState',
},
'NO_NAME_FIELD_$0.aa.1.NO_NAME_FIELD_$1': {
name: 'aa.1.NO_NAME_FIELD_$1',
path: 'NO_NAME_FIELD_$0.aa.1.NO_NAME_FIELD_$1',
initialized: true,
visible: true,
display: true,
mounted: true,
unmounted: false,
props: {
key: 'NO_NAME_FIELD_$1',
type: 'object',
name: 'NO_NAME_FIELD_$1',
'x-component': 'block',
'x-props': {
title: '基本信息',
},
'x-component-props': {
title: '基本信息',
},
},
displayName: 'VirtualFieldState',
},
'NO_NAME_FIELD_$0.aa.1.NO_NAME_FIELD_$1.NO_NAME_FIELD_$2': {
name: 'aa.1.NO_NAME_FIELD_$2',
path: 'NO_NAME_FIELD_$0.aa.1.NO_NAME_FIELD_$1.NO_NAME_FIELD_$2',
initialized: true,
visible: true,
display: true,
mounted: true,
unmounted: false,
props: {
key: 'NO_NAME_FIELD_$2',
type: 'object',
name: 'NO_NAME_FIELD_$2',
'x-component': 'layout',
'x-props': {
inline: true,
},
'x-component-props': {
inline: true,
},
},
displayName: 'VirtualFieldState',
},
'NO_NAME_FIELD_$0.aa.1.NO_NAME_FIELD_$1.NO_NAME_FIELD_$2.bb': {
name: 'aa.1.bb',
path: 'NO_NAME_FIELD_$0.aa.1.NO_NAME_FIELD_$1.NO_NAME_FIELD_$2.bb',
dataType: 'string',
initialized: true,
pristine: true,
valid: true,
modified: false,
touched: false,
active: false,
visited: false,
invalid: false,
visible: true,
display: true,
loading: false,
validating: false,
errors: [],
values: ['ccccc'],
ruleErrors: [],
ruleWarnings: [],
effectErrors: [],
warnings: [],
effectWarnings: [],
editable: true,
value: 'ccccc',
initialValue: 'ccccc',
rules: [],
required: false,
mounted: true,
unmounted: false,
props: {
key: 'bb',
type: 'string',
name: 'bb',
enum: ['aaaaa', 'bbbbb', 'ccccc', 'ddddd', 'eeeee'],
title: 'BB',
},
displayName: 'FieldState',
},
'NO_NAME_FIELD_$0.aa.1.NO_NAME_FIELD_$1.NO_NAME_FIELD_$2.cc': {
name: 'aa.1.cc',
path: 'NO_NAME_FIELD_$0.aa.1.NO_NAME_FIELD_$1.NO_NAME_FIELD_$2.cc',
dataType: 'string',
initialized: true,
pristine: false,
valid: true,
modified: true,
touched: false,
active: false,
visited: false,
invalid: false,
visible: true,
display: true,
loading: false,
validating: false,
errors: [],
values: ['1111'],
ruleErrors: [],
ruleWarnings: [],
effectErrors: [],
warnings: [],
effectWarnings: [],
editable: true,
value: '1111',
rules: [],
required: false,
mounted: true,
unmounted: false,
props: {
key: 'cc',
type: 'string',
name: 'cc',
enum: ['1111', '2222'],
title: 'CC',
},
displayName: 'FieldState',
},
'NO_NAME_FIELD_$0.aa.1.NO_NAME_FIELD_$1.NO_NAME_FIELD_$2.gg': {
name: 'aa.1.gg',
path: 'NO_NAME_FIELD_$0.aa.1.NO_NAME_FIELD_$1.NO_NAME_FIELD_$2.gg',
dataType: 'string',
initialized: true,
pristine: true,
valid: true,
modified: false,
touched: false,
active: false,
visited: false,
invalid: false,
visible: false,
display: true,
loading: false,
validating: false,
errors: [],
values: [null],
ruleErrors: [],
ruleWarnings: [],
effectErrors: [],
warnings: [],
effectWarnings: [],
editable: true,
rules: [],
required: false,
mounted: true,
unmounted: false,
props: {
key: 'gg',
type: 'string',
name: 'gg',
title: 'GG',
'x-props': {
style: {
width: 200,
},
},
},
displayName: 'FieldState',
},
'NO_NAME_FIELD_$0.aa.1.NO_NAME_FIELD_$3': {
name: 'aa.1.NO_NAME_FIELD_$3',
path: 'NO_NAME_FIELD_$0.aa.1.NO_NAME_FIELD_$3',
initialized: true,
visible: true,
display: true,
mounted: true,
unmounted: false,
props: {
key: 'NO_NAME_FIELD_$3',
type: 'object',
name: 'NO_NAME_FIELD_$3',
'x-component': 'block',
'x-props': {
title: '嵌套Array',
},
'x-component-props': {
title: '嵌套Array',
},
},
displayName: 'VirtualFieldState',
},
'NO_NAME_FIELD_$0.aa.1.NO_NAME_FIELD_$3.dd': {
name: 'aa.1.dd',
path: 'NO_NAME_FIELD_$0.aa.1.NO_NAME_FIELD_$3.dd',
dataType: 'array',
initialized: true,
pristine: true,
valid: true,
modified: false,
touched: false,
active: false,
visited: false,
invalid: false,
visible: true,
display: true,
loading: false,
validating: false,
errors: [],
values: [
[
{
ee: '否',
ff: '是',
},
],
],
ruleErrors: [],
ruleWarnings: [],
effectErrors: [],
warnings: [],
effectWarnings: [],
editable: true,
value: [
{
ee: '否',
ff: '是',
},
],
initialValue: [
{
ee: '否',
ff: '是',
},
],
rules: [],
required: false,
mounted: true,
unmounted: false,
props: {
key: 'dd',
type: 'array',
name: 'dd',
},
displayName: 'FieldState',
},
'NO_NAME_FIELD_$0.aa.1.NO_NAME_FIELD_$3.dd.0': {
name: 'aa.1.dd.0',
path: 'NO_NAME_FIELD_$0.aa.1.NO_NAME_FIELD_$3.dd.0',
dataType: 'object',
initialized: true,
pristine: true,
valid: true,
modified: false,
touched: false,
active: false,
visited: false,
invalid: false,
visible: true,
display: true,
loading: false,
validating: false,
errors: [],
values: [
{
ee: '否',
ff: '是',
},
],
ruleErrors: [],
ruleWarnings: [],
effectErrors: [],
warnings: [],
effectWarnings: [],
editable: true,
value: {
ee: '否',
ff: '是',
},
initialValue: {
ee: '否',
ff: '是',
},
rules: [],
required: false,
mounted: true,
unmounted: false,
props: {
type: 'object',
},
displayName: 'FieldState',
},
'NO_NAME_FIELD_$0.aa.1.NO_NAME_FIELD_$3.dd.0.NO_NAME_FIELD_$4': {
name: 'aa.1.dd.0.NO_NAME_FIELD_$4',
path: 'NO_NAME_FIELD_$0.aa.1.NO_NAME_FIELD_$3.dd.0.NO_NAME_FIELD_$4',
initialized: true,
visible: true,
display: true,
mounted: true,
unmounted: false,
props: {
key: 'NO_NAME_FIELD_$4',
type: 'object',
name: 'NO_NAME_FIELD_$4',
'x-component': 'layout',
'x-props': {
inline: true,
style: {
marginLeft: 20,
},
},
'x-component-props': {
inline: true,
style: {
marginLeft: 20,
},
},
},
displayName: 'VirtualFieldState',
},
'NO_NAME_FIELD_$0.aa.1.NO_NAME_FIELD_$3.dd.0.NO_NAME_FIELD_$4.ee': {
name: 'aa.1.dd.0.ee',
path: 'NO_NAME_FIELD_$0.aa.1.NO_NAME_FIELD_$3.dd.0.NO_NAME_FIELD_$4.ee',
dataType: 'string',
initialized: true,
pristine: true,
valid: true,
modified: false,
touched: false,
active: false,
visited: false,
invalid: false,
visible: true,
display: true,
loading: false,
validating: false,
errors: [],
values: ['否'],
ruleErrors: [],
ruleWarnings: [],
effectErrors: [],
warnings: [],
effectWarnings: [],
editable: true,
value: '否',
initialValue: '否',
rules: [],
required: false,
mounted: true,
unmounted: false,
props: {
key: 'ee',
type: 'string',
name: 'ee',
enum: ['是', '否'],
title: 'EE',
description: '是否显示GG',
},
displayName: 'FieldState',
},
'NO_NAME_FIELD_$0.aa.1.NO_NAME_FIELD_$3.dd.0.NO_NAME_FIELD_$4.ff': {
name: 'aa.1.dd.0.ff',
path: 'NO_NAME_FIELD_$0.aa.1.NO_NAME_FIELD_$3.dd.0.NO_NAME_FIELD_$4.ff',
dataType: 'string',
initialized: true,
pristine: true,
valid: true,
modified: false,
touched: false,
active: false,
visited: false,
invalid: false,
visible: true,
display: true,
loading: false,
validating: false,
errors: [],
values: ['是'],
ruleErrors: [],
ruleWarnings: [],
effectErrors: [],
warnings: [],
effectWarnings: [],
editable: true,
value: '是',
initialValue: '是',
rules: [],
required: false,
mounted: true,
unmounted: false,
props: {
key: 'ff',
type: 'string',
name: 'ff',
default: '是',
enum: ['是', '否'],
title: 'FF',
description: '是否显示EE',
},
displayName: 'FieldState',
},
},
]
ReactDOM.render(
<App dataSource={dataSource} />,
document.getElementById('root')
)
```
--------------------------------------------------------------------------------
/docs/guide/advanced/linkages.md:
--------------------------------------------------------------------------------
```markdown
# Linkage Logic
There is only one mode to realize linkage logic in Formily 1.x, that is, active mode. It is necessary to monitor the event changes of one or more fields to control the state of another or more fields.
This is very convenient for one-to-many linkage scenarios, but it is very troublesome for many-to-one scenarios. It is necessary to monitor the changes of multiple fields to control the state of a field. Therefore, Formily 2.x provides a responsive mechanism that allows the linkage to support passive linkage. You only need to pay attention to the field that a field depends on. When the dependent field changes, the dependent field can be automatically linked.
## Active Mode
The core of active linkage is based on
- [FormEffectHooks](https://core.formilyjs.org/api/entry/form-effect-hooks)
- [FieldEffectHooks](https://core.formilyjs.org/api/entry/field-effect-hooks)
- [setFormState](https://core.formilyjs.org/api/models/form#setformstate)
- [setFieldState](https://core.formilyjs.org/api/models/form#setfieldstate)
- [SchemaReactions](https://react.formilyjs.org/api/shared/schema#schemareactions)
Realize active linkage, the advantage is that it is very convenient to realize one-to-many linkage.
### One-to-One Linkage
#### Effects Use Cases
```tsx
import React from 'react'
import { createForm, onFieldValueChange } from '@formily/core'
import { createSchemaField, FormConsumer } from '@formily/react'
import { Form, FormItem, Input, Select } from '@formily/antd'
const form = createForm({
effects() {
onFieldValueChange('select', (field) => {
form.setFieldState('input', (state) => {
//For the initial linkage, if the field cannot be found, setFieldState will push the update into the update queue until the field appears before performing the operation
state.display = field.value
})
})
},
})
const SchemaField = createSchemaField({
components: {
FormItem,
Input,
Select,
},
})
export default () => (
<Form form={form}>
<SchemaField>
<SchemaField.String
name="select"
title="controller"
default="visible"
enum={[
{ label: 'display', value: 'visible' },
{ label: 'hide', value: 'none' },
{ label: 'Hidden-reserved value', value: 'hidden' },
]}
x-component="Select"
x-decorator="FormItem"
/>
<SchemaField.String
name="input"
title="controlled target"
x-component="Input"
x-decorator="FormItem"
/>
</SchemaField>
<FormConsumer>
{() => (
<code>
<pre>{JSON.stringify(form.values, null, 2)}</pre>
</code>
)}
</FormConsumer>
</Form>
)
```
#### SchemaReactions Use Cases
```tsx
import React from 'react'
import { createForm } from '@formily/core'
import { createSchemaField, FormConsumer } from '@formily/react'
import { Form, FormItem, Input, Select } from '@formily/antd'
const form = createForm()
const SchemaField = createSchemaField({
components: {
FormItem,
Input,
Select,
},
})
export default () => (
<Form form={form}>
<SchemaField>
<SchemaField.String
name="select"
title="controller"
default="visible"
enum={[
{ label: 'display', value: 'visible' },
{ label: 'hide', value: 'none' },
{ label: 'Hidden-reserved value', value: 'hidden' },
]}
x-component="Select"
x-decorator="FormItem"
x-reactions={{
target: 'input',
fulfill: {
state: {
display: '{{$self.value}}',
},
},
}}
/>
<SchemaField.String
name="input"
title="controlled target"
x-component="Input"
x-decorator="FormItem"
/>
</SchemaField>
<FormConsumer>
{() => (
<code>
<pre>{JSON.stringify(form.values, null, 2)}</pre>
</code>
)}
</FormConsumer>
</Form>
)
```
### One-to-Many Linkage
#### Effects Use Cases
```tsx
import React from 'react'
import { createForm, onFieldValueChange } from '@formily/core'
import { createSchemaField, FormConsumer } from '@formily/react'
import { Form, FormItem, Input, Select } from '@formily/antd'
const form = createForm({
effects() {
onFieldValueChange('select', (field) => {
form.setFieldState('*(input1,input2)', (state) => {
//For the initial linkage, if the field cannot be found, setFieldState will push the update into the update queue until the field appears before performing the operation
state.display = field.value
})
})
},
})
const SchemaField = createSchemaField({
components: {
FormItem,
Input,
Select,
},
})
export default () => (
<Form form={form}>
<SchemaField>
<SchemaField.String
name="select"
title="controller"
default="visible"
enum={[
{ label: 'display', value: 'visible' },
{ label: 'hide', value: 'none' },
{ label: 'Hidden-reserved value', value: 'hidden' },
]}
x-component="Select"
x-decorator="FormItem"
/>
<SchemaField.String
name="input1"
title="controlled target"
x-component="Input"
x-decorator="FormItem"
/>
<SchemaField.String
name="input2"
title="controlled target"
x-component="Input"
x-decorator="FormItem"
/>
</SchemaField>
<FormConsumer>
{() => (
<code>
<pre>{JSON.stringify(form.values, null, 2)}</pre>
</code>
)}
</FormConsumer>
</Form>
)
```
#### SchemaReactions Use Cases
```tsx
import React from 'react'
import { createForm } from '@formily/core'
import { createSchemaField, FormConsumer } from '@formily/react'
import { Form, FormItem, Input, Select } from '@formily/antd'
const form = createForm()
const SchemaField = createSchemaField({
components: {
FormItem,
Input,
Select,
},
})
export default () => (
<Form form={form}>
<SchemaField>
<SchemaField.String
name="select"
title="controller"
default="visible"
enum={[
{ label: 'display', value: 'visible' },
{ label: 'hide', value: 'none' },
{ label: 'Hidden-reserved value', value: 'hidden' },
]}
x-component="Select"
x-decorator="FormItem"
x-reactions={{
target: '*(input1,input2)',
fulfill: {
state: {
display: '{{$self.value}}',
},
},
}}
/>
<SchemaField.String
name="input1"
title="controller"
x-component="Input"
x-decorator="FormItem"
/>
<SchemaField.String
name="input2"
title="controller"
x-component="Input"
x-decorator="FormItem"
/>
</SchemaField>
<FormConsumer>
{() => (
<code>
<pre>{JSON.stringify(form.values, null, 2)}</pre>
</code>
)}
</FormConsumer>
</Form>
)
```
### Rely on Linkage
#### Effects Use Cases
```tsx
import React from 'react'
import { createForm, onFieldValueChange } from '@formily/core'
import { createSchemaField, FormConsumer } from '@formily/react'
import { Form, FormItem, Input, NumberPicker } from '@formily/antd'
const form = createForm({
effects() {
onFieldValueChange('dim_1', (field) => {
const dim1 = field.value
const dim2 = field.query('dim_2').value()
form.setFieldState('result', (state) => {
state.value = dim1 * dim2
})
})
onFieldValueChange('dim_2', (field) => {
const dim1 = field.query('dim_1').value()
const dim2 = field.value || 0
form.setFieldState('result', (state) => {
state.value = dim1 * dim2
})
})
},
})
const SchemaField = createSchemaField({
components: {
FormItem,
Input,
NumberPicker,
},
})
export default () => (
<Form form={form}>
<SchemaField>
<SchemaField.Number
name="dim_1"
title="controller"
default={0}
x-component="NumberPicker"
x-decorator="FormItem"
/>
<SchemaField.Number
name="dim_2"
title="controller"
default={0}
x-component="NumberPicker"
x-decorator="FormItem"
/>
<SchemaField.Number
name="result"
title="controlled target"
x-pattern="readPretty"
x-component="NumberPicker"
x-decorator="FormItem"
/>
</SchemaField>
<FormConsumer>
{() => (
<code>
<pre>{JSON.stringify(form.values, null, 2)}</pre>
</code>
)}
</FormConsumer>
</Form>
)
```
#### SchemaReactions Use Cases
```tsx
import React from 'react'
import { createForm } from '@formily/core'
import { createSchemaField, FormConsumer } from '@formily/react'
import { Form, FormItem, Input, NumberPicker } from '@formily/antd'
const form = createForm()
const SchemaField = createSchemaField({
components: {
FormItem,
Input,
NumberPicker,
},
})
export default () => (
<Form form={form}>
<SchemaField>
<SchemaField.Number
name="dim_1"
title="controller"
default={0}
x-component="NumberPicker"
x-decorator="FormItem"
x-reactions={{
dependencies: ['dim_2'],
target: 'result',
fulfill: {
state: {
value: '{{$self.value * $deps[0]}}',
},
},
}}
/>
<SchemaField.Number
name="dim_2"
title="controller"
default={0}
x-component="NumberPicker"
x-decorator="FormItem"
x-reactions={{
dependencies: ['dim_1'],
target: 'result',
fulfill: {
state: {
value: '{{$self.value * $deps[0]}}',
},
},
}}
/>
<SchemaField.Number
name="result"
title="controller"
x-pattern="readPretty"
x-component="NumberPicker"
x-decorator="FormItem"
/>
</SchemaField>
<FormConsumer>
{() => (
<code>
<pre>{JSON.stringify(form.values, null, 2)}</pre>
</code>
)}
</FormConsumer>
</Form>
)
```
### Chain Linkage
#### Effects Use Cases
```tsx
import React from 'react'
import { createForm, onFieldValueChange } from '@formily/core'
import { createSchemaField, FormConsumer } from '@formily/react'
import { Form, FormItem, Input, Select } from '@formily/antd'
const form = createForm({
effects() {
onFieldValueChange('select', (field) => {
form.setFieldState('input1', (state) => {
//For the initial linkage, if the field cannot be found, setFieldState will push the update into the update queue until the field appears before performing the operation
state.visible = !!field.value
})
})
onFieldValueChange('input1', (field) => {
form.setFieldState('input2', (state) => {
//For the initial linkage, if the field cannot be found, setFieldState will push the update into the update queue until the field appears before performing the operation
state.visible = !!field.value
})
})
},
})
const SchemaField = createSchemaField({
components: {
FormItem,
Input,
Select,
},
})
export default () => (
<Form form={form}>
<SchemaField>
<SchemaField.String
name="select"
title="controller"
default={false}
enum={[
{ label: 'display', value: true },
{ label: 'hide', value: false },
]}
x-component="Select"
x-decorator="FormItem"
/>
<SchemaField.String
name="input1"
title="controlled target"
default={true}
enum={[
{ label: 'display', value: true },
{ label: 'hide', value: false },
]}
x-component="Select"
x-decorator="FormItem"
/>
<SchemaField.String
name="input2"
title="controlled target"
x-component="Input"
x-decorator="FormItem"
/>
</SchemaField>
<FormConsumer>
{() => (
<code>
<pre>{JSON.stringify(form.values, null, 2)}</pre>
</code>
)}
</FormConsumer>
</Form>
)
```
#### SchemaReactions Use Cases
```tsx
import React from 'react'
import { createForm } from '@formily/core'
import { createSchemaField, FormConsumer } from '@formily/react'
import { Form, FormItem, Input, Select } from '@formily/antd'
const form = createForm()
const SchemaField = createSchemaField({
components: {
FormItem,
Input,
Select,
},
})
export default () => (
<Form form={form}>
<SchemaField>
<SchemaField.String
name="select"
title="controller"
default={false}
enum={[
{ label: 'display', value: true },
{ label: 'hide', value: false },
]}
x-component="Select"
x-decorator="FormItem"
x-reactions={{
target: 'input1',
fulfill: {
state: {
visible: '{{!!$self.value}}',
},
},
}}
/>
<SchemaField.String
name="input1"
title="controlled target"
default={true}
enum={[
{ label: 'display', value: true },
{ label: 'hide', value: false },
]}
x-component="Select"
x-decorator="FormItem"
x-reactions={{
target: 'input2',
fulfill: {
state: {
visible: '{{!!$self.value}}',
},
},
}}
/>
<SchemaField.String
name="input2"
title="controlled target"
x-component="Input"
x-decorator="FormItem"
/>
</SchemaField>
<FormConsumer>
{() => (
<code>
<pre>{JSON.stringify(form.values, null, 2)}</pre>
</code>
)}
</FormConsumer>
</Form>
)
```
### Loop Linkage
#### Effects Use Cases
```tsx
import React from 'react'
import { createForm, onFieldInputValueChange } from '@formily/core'
import { createSchemaField, FormConsumer } from '@formily/react'
import { Form, FormItem, NumberPicker } from '@formily/antd'
const form = createForm({
effects() {
onFieldInputValueChange('total', (field) => {
if (field.value === undefined) return
form.setFieldState('count', (state) => {
const price = form.values.price
if (!price) return
state.value = field.value / price
})
form.setFieldState('price', (state) => {
const count = form.values.count
if (!count) return
state.value = field.value / count
})
})
onFieldInputValueChange('price', (field) => {
form.setFieldState('total', (state) => {
const count = form.values.count
if (count === undefined) return
state.value = field.value * count
})
})
onFieldInputValueChange('count', (field) => {
form.setFieldState('total', (state) => {
const price = form.values.price
if (price === undefined) return
state.value = field.value * price
})
})
},
})
const SchemaField = createSchemaField({
components: {
FormItem,
NumberPicker,
},
})
export default () => (
<Form form={form}>
<SchemaField>
<SchemaField.Number
name="total"
title="total price"
x-component="NumberPicker"
x-decorator="FormItem"
/>
<SchemaField.Number
name="count"
title="quantity"
x-component="NumberPicker"
x-decorator="FormItem"
/>
<SchemaField.Number
name="price"
title="unit price"
x-component="NumberPicker"
x-decorator="FormItem"
/>
</SchemaField>
<FormConsumer>
{() => (
<code>
<pre>{JSON.stringify(form.values, null, 2)}</pre>
</code>
)}
</FormConsumer>
</Form>
)
```
#### SchemaReactions Use Cases
```tsx
import React from 'react'
import { createForm } from '@formily/core'
import { createSchemaField, FormConsumer } from '@formily/react'
import { Form, FormItem, NumberPicker } from '@formily/antd'
const form = createForm()
const SchemaField = createSchemaField({
components: {
FormItem,
NumberPicker,
},
})
export default () => (
<Form form={form}>
<SchemaField>
<SchemaField.Number
name="total"
title="total price"
x-component="NumberPicker"
x-decorator="FormItem"
x-reactions={[
{
target: 'count',
effects: ['onFieldInputValueChange'],
dependencies: ['price'],
fulfill: {
state: {
value: '{{$deps[0] ? $self.value / $deps[0] : $target.value}}',
},
},
},
{
target: 'price',
effects: ['onFieldInputValueChange'],
dependencies: ['count'],
fulfill: {
state: {
value: '{{$deps[0] ? $self.value / $deps[0] : $target.value}}',
},
},
},
]}
/>
<SchemaField.Number
name="count"
title="quantity"
x-component="NumberPicker"
x-decorator="FormItem"
x-reactions={{
target: 'total',
effects: ['onFieldInputValueChange'],
dependencies: ['price'],
fulfill: {
state: {
value:
'{{$deps[0] !== undefined ? $self.value * $deps[0] : $target.value}}',
},
},
}}
/>
<SchemaField.Number
name="price"
title="unit price"
x-component="NumberPicker"
x-decorator="FormItem"
x-reactions={{
target: 'total',
effects: ['onFieldInputValueChange'],
dependencies: ['count'],
fulfill: {
state: {
value:
'{{$deps[0] !== undefined ? $self.value * $deps[0] : $target.value}}',
},
},
}}
/>
</SchemaField>
<FormConsumer>
{() => (
<code>
<pre>{JSON.stringify(form.values, null, 2)}</pre>
</code>
)}
</FormConsumer>
</Form>
)
```
### Self Linkage
#### Effects Use Cases
```tsx
import React from 'react'
import { createForm, onFieldValueChange } from '@formily/core'
import { createSchemaField, FormConsumer } from '@formily/react'
import { Form, FormItem, Input } from '@formily/antd'
import './input.less'
const form = createForm({
effects() {
onFieldValueChange('color', (field) => {
field.setComponentProps({
style: {
backgroundColor: field.value,
},
})
})
},
})
const SchemaField = createSchemaField({
components: {
FormItem,
Input,
},
})
export default () => (
<Form form={form}>
<SchemaField>
<SchemaField.Number
name="color"
default="#FFFFFF"
title="color"
x-component="Input"
x-decorator="FormItem"
/>
</SchemaField>
<FormConsumer>
{() => (
<code>
<pre>{JSON.stringify(form.values, null, 2)}</pre>
</code>
)}
</FormConsumer>
</Form>
)
```
#### SchemaReactions Use Cases
```tsx
import React from 'react'
import { createForm } from '@formily/core'
import { createSchemaField, FormConsumer } from '@formily/react'
import { Form, FormItem, Input } from '@formily/antd'
import './input.less'
const form = createForm()
const SchemaField = createSchemaField({
components: {
FormItem,
Input,
},
})
export default () => (
<Form form={form}>
<SchemaField>
<SchemaField.Number
name="color"
default="#FFFFFF"
title="color"
x-component="Input"
x-decorator="FormItem"
x-reactions={{
target: 'color',
fulfill: {
state: {
'component[1].style.backgroundColor': '{{$self.value}}',
},
//The following usage is also possible
// schema: {
// 'x-component-props.style.backgroundColor': '{{$self.value}}',
// },
},
}}
/>
</SchemaField>
<FormConsumer>
{() => (
<code>
<pre>{JSON.stringify(form.values, null, 2)}</pre>
</code>
)}
</FormConsumer>
</Form>
)
```
### Asynchronous Linkage
#### Effects Use Cases
```tsx
import React from 'react'
import { createForm, onFieldValueChange } from '@formily/core'
import { createSchemaField, FormConsumer } from '@formily/react'
import { Form, FormItem, Input, Select } from '@formily/antd'
const form = createForm({
effects() {
onFieldValueChange('select', (field) => {
field.loading = true
setTimeout(() => {
field.loading = false
form.setFieldState('input', (state) => {
//For the initial linkage, if the field cannot be found, setFieldState will push the update into the update queue until the field appears before performing the operation
state.display = field.value
})
}, 1000)
})
},
})
const SchemaField = createSchemaField({
components: {
FormItem,
Input,
Select,
},
})
export default () => (
<Form form={form}>
<SchemaField>
<SchemaField.String
name="select"
title="controller"
default="visible"
enum={[
{ label: 'display', value: 'visible' },
{ label: 'hide', value: 'none' },
{ label: 'Hidden-reserved value', value: 'hidden' },
]}
x-component="Select"
x-decorator="FormItem"
/>
<SchemaField.String
name="input"
title="controlled target"
x-component="Input"
x-decorator="FormItem"
x-visible={false}
/>
</SchemaField>
<FormConsumer>
{() => (
<code>
<pre>{JSON.stringify(form.values, null, 2)}</pre>
</code>
)}
</FormConsumer>
</Form>
)
```
#### SchemaReactions Use Cases
```tsx
import React from 'react'
import { createForm } from '@formily/core'
import { createSchemaField, FormConsumer } from '@formily/react'
import { Form, FormItem, Input, Select } from '@formily/antd'
const form = createForm()
const SchemaField = createSchemaField({
components: {
FormItem,
Input,
Select,
},
scope: {
asyncVisible(field, target) {
field.loading = true
setTimeout(() => {
field.loading = false
form.setFieldState(target, (state) => {
//For the initial linkage, if the field cannot be found, setFieldState will push the update into the update queue until the field appears before performing the operation
state.display = field.value
})
}, 1000)
},
},
})
export default () => (
<Form form={form}>
<SchemaField>
<SchemaField.String
name="select"
title="controller"
default="visible"
enum={[
{ label: 'display', value: 'visible' },
{ label: 'hide', value: 'none' },
{ label: 'Hidden-reserved value', value: 'hidden' },
]}
x-component="Select"
x-decorator="FormItem"
x-reactions={{
target: 'input',
effects: ['onFieldInit', 'onFieldValueChange'],
fulfill: {
run: 'asyncVisible($self,$target)',
},
}}
/>
<SchemaField.String
name="input"
title="controlled target"
x-component="Input"
x-decorator="FormItem"
x-visible={false}
/>
</SchemaField>
<FormConsumer>
{() => (
<code>
<pre>{JSON.stringify(form.values, null, 2)}</pre>
</code>
)}
</FormConsumer>
</Form>
)
```
## Passive Mode
The core of the passive mode is based on
- [onFieldReact](https://core.formilyjs.org/api/entry/field-effect-hooks#onfieldreact) Implement global reactive logic
- [FieldReaction](https://core.formilyjs.org/api/models/field#fieldreaction) Implement partial responsive logic
- [SchemaReactions](https://react.formilyjs.org/api/shared/schema#schemareactions) Implement the structured logical description in the Schema protocol (the internal implementation is based on FieldReaction)
### One-to-One Linkage
#### Effects Use Cases
```tsx
import React from 'react'
import { createForm, onFieldReact } from '@formily/core'
import { createSchemaField, FormConsumer } from '@formily/react'
import { Form, FormItem, Input, Select } from '@formily/antd'
const form = createForm({
effects() {
onFieldReact('input', (field) => {
field.display = field.query('select').value()
})
},
})
const SchemaField = createSchemaField({
components: {
FormItem,
Input,
Select,
},
})
export default () => (
<Form form={form}>
<SchemaField>
<SchemaField.String
name="select"
title="controller"
default="visible"
enum={[
{ label: 'display', value: 'visible' },
{ label: 'hide', value: 'none' },
{ label: 'Hidden-reserved value', value: 'hidden' },
]}
x-component="Select"
x-decorator="FormItem"
/>
<SchemaField.String
name="input"
title="controlled target"
x-component="Input"
x-decorator="FormItem"
/>
</SchemaField>
<FormConsumer>
{() => (
<code>
<pre>{JSON.stringify(form.values, null, 2)}</pre>
</code>
)}
</FormConsumer>
</Form>
)
```
#### SchemaReactions Use Cases
```tsx
import React from 'react'
import { createForm } from '@formily/core'
import { createSchemaField, FormConsumer } from '@formily/react'
import { Form, FormItem, Input, Select } from '@formily/antd'
const form = createForm()
const SchemaField = createSchemaField({
components: {
FormItem,
Input,
Select,
},
})
export default () => (
<Form form={form}>
<SchemaField>
<SchemaField.String
name="select"
title="controller"
default="visible"
enum={[
{ label: 'display', value: 'visible' },
{ label: 'hide', value: 'none' },
{ label: 'Hidden-reserved value', value: 'hidden' },
]}
x-component="Select"
x-decorator="FormItem"
/>
<SchemaField.String
name="input"
title="controlled target"
x-component="Input"
x-decorator="FormItem"
x-reactions={{
dependencies: ['select'],
fulfill: {
state: {
display: '{{$deps[0]}}',
},
},
}}
/>
</SchemaField>
<FormConsumer>
{() => (
<code>
<pre>{JSON.stringify(form.values, null, 2)}</pre>
</code>
)}
</FormConsumer>
</Form>
)
```
### One-to-Many Linkage
#### Effects Use Cases
```tsx
import React from 'react'
import { createForm, onFieldReact } from '@formily/core'
import { createSchemaField, FormConsumer } from '@formily/react'
import { Form, FormItem, Input, Select } from '@formily/antd'
const form = createForm({
effects() {
onFieldReact('*(input1,input2)', (field) => {
field.display = field.query('select').value()
})
},
})
const SchemaField = createSchemaField({
components: {
FormItem,
Input,
Select,
},
})
export default () => (
<Form form={form}>
<SchemaField>
<SchemaField.String
name="select"
title="controller"
default="visible"
enum={[
{ label: 'display', value: 'visible' },
{ label: 'hide', value: 'none' },
{ label: 'Hidden-reserved value', value: 'hidden' },
]}
x-component="Select"
x-decorator="FormItem"
/>
<SchemaField.String
name="input1"
title="controlled target"
x-component="Input"
x-decorator="FormItem"
/>
<SchemaField.String
name="input2"
title="controlled target"
x-component="Input"
x-decorator="FormItem"
/>
</SchemaField>
<FormConsumer>
{() => (
<code>
<pre>{JSON.stringify(form.values, null, 2)}</pre>
</code>
)}
</FormConsumer>
</Form>
)
```
#### SchemaReactions Use Cases
```tsx
import React from 'react'
import { createForm } from '@formily/core'
import { createSchemaField, FormConsumer } from '@formily/react'
import { Form, FormItem, Input, Select } from '@formily/antd'
const form = createForm()
const SchemaField = createSchemaField({
components: {
FormItem,
Input,
Select,
},
})
export default () => (
<Form form={form}>
<SchemaField>
<SchemaField.String
name="select"
title="controller"
default="visible"
enum={[
{ label: 'display', value: 'visible' },
{ label: 'hide', value: 'none' },
{ label: 'Hidden-reserved value', value: 'hidden' },
]}
x-component="Select"
x-decorator="FormItem"
/>
<SchemaField.String
name="input1"
title="controlled target"
x-component="Input"
x-decorator="FormItem"
x-reactions={{
dependencies: ['select'],
fulfill: {
state: {
display: '{{$deps[0]}}',
},
},
}}
/>
<SchemaField.String
name="input2"
title="controlled target"
x-component="Input"
x-decorator="FormItem"
x-reactions={{
dependencies: ['select'],
fulfill: {
state: {
display: '{{$deps[0]}}',
},
},
}}
/>
</SchemaField>
<FormConsumer>
{() => (
<code>
<pre>{JSON.stringify(form.values, null, 2)}</pre>
</code>
)}
</FormConsumer>
</Form>
)
```
### Rely on Linkage
#### Effects Use Cases
```tsx
import React from 'react'
import { createForm, onFieldReact } from '@formily/core'
import { createSchemaField, FormConsumer } from '@formily/react'
import { Form, FormItem, Input, NumberPicker } from '@formily/antd'
const form = createForm({
effects() {
onFieldReact('result', (field) => {
field.value = field.query('dim_1').value() * field.query('dim_2').value()
})
},
})
const SchemaField = createSchemaField({
components: {
FormItem,
Input,
NumberPicker,
},
})
export default () => (
<Form form={form}>
<SchemaField>
<SchemaField.Number
name="dim_1"
title="controller"
default={0}
x-component="NumberPicker"
x-decorator="FormItem"
/>
<SchemaField.Number
name="dim_2"
title="controller"
default={0}
x-component="NumberPicker"
x-decorator="FormItem"
/>
<SchemaField.Number
name="result"
title="controlled target"
x-pattern="readPretty"
x-component="NumberPicker"
x-decorator="FormItem"
/>
</SchemaField>
<FormConsumer>
{() => (
<code>
<pre>{JSON.stringify(form.values, null, 2)}</pre>
</code>
)}
</FormConsumer>
</Form>
)
```
#### SchemaReactions Use Cases
```tsx
import React from 'react'
import { createForm } from '@formily/core'
import { createSchemaField, FormConsumer } from '@formily/react'
import { Form, FormItem, Input, NumberPicker } from '@formily/antd'
const form = createForm()
const SchemaField = createSchemaField({
components: {
FormItem,
Input,
NumberPicker,
},
})
export default () => (
<Form form={form}>
<SchemaField>
<SchemaField.Number
name="dim_1"
title="controller"
default={0}
x-component="NumberPicker"
x-decorator="FormItem"
/>
<SchemaField.Number
name="dim_2"
title="controller"
default={0}
x-component="NumberPicker"
x-decorator="FormItem"
/>
<SchemaField.Number
name="result"
title="controlled target"
x-pattern="readPretty"
x-component="NumberPicker"
x-decorator="FormItem"
x-reactions={{
dependencies: ['dim_1', 'dim_2'],
fulfill: {
state: {
value: '{{$deps[0] * $deps[1]}}',
},
},
}}
/>
</SchemaField>
<FormConsumer>
{() => (
<code>
<pre>{JSON.stringify(form.values, null, 2)}</pre>
</code>
)}
</FormConsumer>
</Form>
)
```
### Chain Linkage
#### Effects Use Cases
```tsx
import React from 'react'
import { createForm, onFieldReact } from '@formily/core'
import { createSchemaField, FormConsumer } from '@formily/react'
import { Form, FormItem, Input, Select } from '@formily/antd'
const form = createForm({
effects() {
onFieldReact('input1', (field) => {
field.visible = !!field.query('select').value()
})
onFieldReact('input2', (field) => {
field.visible = !!field.query('input1').value()
})
},
})
const SchemaField = createSchemaField({
components: {
FormItem,
Input,
Select,
},
})
export default () => (
<Form form={form}>
<SchemaField>
<SchemaField.String
name="select"
title="controller"
default={false}
enum={[
{ label: 'display', value: true },
{ label: 'hide', value: false },
]}
x-component="Select"
x-decorator="FormItem"
/>
<SchemaField.String
name="input1"
title="controlled target"
default={true}
enum={[
{ label: 'display', value: true },
{ label: 'hide', value: false },
]}
x-component="Select"
x-decorator="FormItem"
/>
<SchemaField.String
name="input2"
title="controlled target"
x-component="Input"
x-decorator="FormItem"
/>
</SchemaField>
<FormConsumer>
{() => (
<code>
<pre>{JSON.stringify(form.values, null, 2)}</pre>
</code>
)}
</FormConsumer>
</Form>
)
```
#### SchemaReactions Use Cases
```tsx
import React from 'react'
import { createForm } from '@formily/core'
import { createSchemaField, FormConsumer } from '@formily/react'
import { Form, FormItem, Input, Select } from '@formily/antd'
const form = createForm()
const SchemaField = createSchemaField({
components: {
FormItem,
Input,
Select,
},
})
export default () => (
<Form form={form}>
<SchemaField>
<SchemaField.String
name="select"
title="controller"
default={false}
enum={[
{ label: 'display', value: true },
{ label: 'hide', value: false },
]}
x-component="Select"
x-decorator="FormItem"
/>
<SchemaField.String
name="input1"
title="controlled target"
default={true}
enum={[
{ label: 'display', value: true },
{ label: 'hide', value: false },
]}
x-component="Select"
x-decorator="FormItem"
x-reactions={{
dependencies: ['select'],
fulfill: {
state: {
visible: '{{!!$deps[0]}}',
},
},
}}
/>
<SchemaField.String
name="input2"
title="controlled target"
x-component="Input"
x-decorator="FormItem"
x-reactions={{
dependencies: ['input1'],
fulfill: {
state: {
visible: '{{!!$deps[0]}}',
},
},
}}
/>
</SchemaField>
<FormConsumer>
{() => (
<code>
<pre>{JSON.stringify(form.values, null, 2)}</pre>
</code>
)}
</FormConsumer>
</Form>
)
```
### Loop Linkage
#### Effects Use Cases
```tsx
import React from 'react'
import { createForm, onFieldReact } from '@formily/core'
import { createSchemaField, FormConsumer } from '@formily/react'
import { Form, FormItem, NumberPicker } from '@formily/antd'
const form = createForm({
effects() {
onFieldReact('total', (field) => {
const count = field.query('count').value()
const price = field.query('price').value()
if (count !== undefined && price !== undefined) {
field.value = count * price
}
})
onFieldReact('price', (field) => {
const total = field.query('total').value()
const count = field.query('count').value()
if (total !== undefined && count > 0) {
field.value = total / count
}
})
onFieldReact('count', (field) => {
const total = field.query('total').value()
const price = field.query('price').value()
if (total !== undefined && price > 0) {
field.value = total / price
}
})
},
})
const SchemaField = createSchemaField({
components: {
FormItem,
NumberPicker,
},
})
export default () => (
<Form form={form}>
<SchemaField>
<SchemaField.Number
name="total"
title="总价"
x-component="NumberPicker"
x-decorator="FormItem"
/>
<SchemaField.Number
name="count"
title="数量"
x-component="NumberPicker"
x-decorator="FormItem"
/>
<SchemaField.Number
name="price"
title="单价"
x-component="NumberPicker"
x-decorator="FormItem"
/>
</SchemaField>
<FormConsumer>
{() => (
<code>
<pre>{JSON.stringify(form.values, null, 2)}</pre>
</code>
)}
</FormConsumer>
</Form>
)
```
#### SchemaReactions Use Cases
```tsx
import React from 'react'
import { createForm } from '@formily/core'
import { createSchemaField, FormConsumer } from '@formily/react'
import { Form, FormItem, NumberPicker } from '@formily/antd'
const form = createForm()
const SchemaField = createSchemaField({
components: {
FormItem,
NumberPicker,
},
})
export default () => (
<Form form={form}>
<SchemaField>
<SchemaField.Number
name="total"
title="总价"
x-component="NumberPicker"
x-decorator="FormItem"
x-reactions={{
dependencies: ['.count', '.price'],
fulfill: {
state: {
value:
'{{$deps[0] !== undefined && $deps[1] !== undefined ? $deps[0] * $deps[1] : $self.value}}',
},
},
}}
/>
<SchemaField.Number
name="count"
title="数量"
x-component="NumberPicker"
x-decorator="FormItem"
x-reactions={{
dependencies: ['.total', '.price'],
fulfill: {
state: {
value: '{{ $deps[1] > 0 ? $deps[0] / $deps[1] : $self.value}}',
},
},
}}
/>
<SchemaField.Number
name="price"
title="单价"
x-component="NumberPicker"
x-decorator="FormItem"
x-reactions={{
dependencies: ['.total', '.count'],
fulfill: {
state: {
value: '{{ $deps[1] > 0 ? $deps[0] / $deps[1] : $self.value}}',
},
},
}}
/>
</SchemaField>
<FormConsumer>
{() => (
<code>
<pre>{JSON.stringify(form.values, null, 2)}</pre>
</code>
)}
</FormConsumer>
</Form>
)
```
### Self Linkage
#### Effects Use Cases
```tsx
import React from 'react'
import { createForm, onFieldReact } from '@formily/core'
import { createSchemaField, FormConsumer } from '@formily/react'
import { Form, FormItem, Input } from '@formily/antd'
import './input.less'
const form = createForm({
effects() {
onFieldReact('color', (field) => {
field.setComponentProps({
style: {
backgroundColor: field.value,
},
})
})
},
})
const SchemaField = createSchemaField({
components: {
FormItem,
Input,
},
})
export default () => (
<Form form={form}>
<SchemaField>
<SchemaField.Number
name="color"
default="#FFFFFF"
title="color"
x-component="Input"
x-decorator="FormItem"
/>
</SchemaField>
<FormConsumer>
{() => (
<code>
<pre>{JSON.stringify(form.values, null, 2)}</pre>
</code>
)}
</FormConsumer>
</Form>
)
```
#### SchemaReactions Use Cases
```tsx
import React from 'react'
import { createForm } from '@formily/core'
import { createSchemaField, FormConsumer } from '@formily/react'
import { Form, FormItem, Input } from '@formily/antd'
import './input.less'
const form = createForm()
const SchemaField = createSchemaField({
components: {
FormItem,
Input,
},
})
export default () => (
<Form form={form}>
<SchemaField>
<SchemaField.Number
name="color"
default="#FFFFFF"
title="color"
x-component="Input"
x-decorator="FormItem"
x-reactions={{
fulfill: {
state: {
'component[1].style.backgroundColor': '{{$self.value}}',
},
//The following usage is also possible
// schema: {
// 'x-component-props.style.backgroundColor': '{{$self.value}}',
// },
},
}}
/>
</SchemaField>
<FormConsumer>
{() => (
<code>
<pre>{JSON.stringify(form.values, null, 2)}</pre>
</code>
)}
</FormConsumer>
</Form>
)
```
### Asynchronous Linkage
#### Effects Use Cases
```tsx
import React from 'react'
import { createForm, onFieldReact } from '@formily/core'
import { createSchemaField, FormConsumer } from '@formily/react'
import { Form, FormItem, Input, Select } from '@formily/antd'
const form = createForm({
effects() {
onFieldReact('input', (field) => {
const select = field.query('select').take()
if (!select) return
const selectValue = select.value
select.loading = true
if (selectValue) {
setTimeout(() => {
select.loading = false
field.display = selectValue
}, 1000)
}
})
},
})
const SchemaField = createSchemaField({
components: {
FormItem,
Input,
Select,
},
})
export default () => (
<Form form={form}>
<SchemaField>
<SchemaField.String
name="select"
title="controller"
default="visible"
enum={[
{ label: 'display', value: 'visible' },
{ label: 'hide', value: 'none' },
{ label: 'Hidden-reserved value', value: 'hidden' },
]}
x-component="Select"
x-decorator="FormItem"
/>
<SchemaField.String
name="input"
title="controlled target"
x-component="Input"
x-decorator="FormItem"
x-visible={false}
/>
</SchemaField>
<FormConsumer>
{() => (
<code>
<pre>{JSON.stringify(form.values, null, 2)}</pre>
</code>
)}
</FormConsumer>
</Form>
)
```
#### SchemaReactions Use Cases
```tsx
import React from 'react'
import { createForm } from '@formily/core'
import { createSchemaField, FormConsumer } from '@formily/react'
import { Form, FormItem, Input, Select } from '@formily/antd'
const form = createForm()
const SchemaField = createSchemaField({
components: {
FormItem,
Input,
Select,
},
scope: {
asyncVisible(field) {
const select = field.query('select').take()
if (!select) return
const selectValue = select.value
select.loading = true
if (selectValue) {
setTimeout(() => {
select.loading = false
field.display = selectValue
}, 1000)
}
},
},
})
export default () => (
<Form form={form}>
<SchemaField>
<SchemaField.String
name="select"
title="controller"
default="visible"
enum={[
{ label: 'display', value: 'visible' },
{ label: 'hide', value: 'none' },
{ label: 'Hidden-reserved value', value: 'hidden' },
]}
x-component="Select"
x-decorator="FormItem"
/>
<SchemaField.String
name="input"
title="controlled target"
x-component="Input"
x-decorator="FormItem"
x-visible={false}
x-reactions="{{asyncVisible}}"
/>
</SchemaField>
<FormConsumer>
{() => (
<code>
<pre>{JSON.stringify(form.values, null, 2)}</pre>
</code>
)}
</FormConsumer>
</Form>
)
```
```
--------------------------------------------------------------------------------
/docs/guide/scenes/login-register.zh-CN.md:
--------------------------------------------------------------------------------
```markdown
# 登录注册
## 登录
#### Markup Schema 案例
```tsx
import React from 'react'
import { createForm } from '@formily/core'
import { createSchemaField } from '@formily/react'
import { Form, FormItem, Input, Password, Submit } from '@formily/antd'
import { Tabs, Card } from 'antd'
import * as ICONS from '@ant-design/icons'
import { VerifyCode } from './VerifyCode'
const normalForm = createForm({
validateFirst: true,
})
const phoneForm = createForm({
validateFirst: true,
})
const SchemaField = createSchemaField({
components: {
FormItem,
Input,
Password,
VerifyCode,
},
scope: {
icon(name) {
return React.createElement(ICONS[name])
},
},
})
export default () => {
return (
<div
style={{
display: 'flex',
justifyContent: 'center',
background: '#eee',
padding: '40px 0',
}}
>
<Card style={{ width: 400 }}>
<Tabs style={{ overflow: 'visible', marginTop: -10 }}>
<Tabs.TabPane key="1" tab="账密登录">
<Form
form={normalForm}
layout="vertical"
size="large"
onAutoSubmit={console.log}
>
<SchemaField>
<SchemaField.String
name="username"
title="用户名"
required
x-decorator="FormItem"
x-component="Input"
x-validator={{
required: true,
}}
x-component-props={{
prefix: "{{icon('UserOutlined')}}",
}}
/>
<SchemaField.String
name="password"
title="密码"
required
x-decorator="FormItem"
x-component="Password"
x-component-props={{
prefix: "{{icon('LockOutlined')}}",
}}
/>
</SchemaField>
<Submit block size="large">
登录
</Submit>
</Form>
</Tabs.TabPane>
<Tabs.TabPane key="2" tab="手机登录">
<Form
form={phoneForm}
layout="vertical"
size="large"
onAutoSubmit={console.log}
>
<SchemaField>
<SchemaField.String
name="phone"
title="手机号"
required
x-validator="phone"
x-decorator="FormItem"
x-component="Input"
x-component-props={{
prefix: "{{icon('PhoneOutlined')}}",
}}
/>
<SchemaField.String
name="verifyCode"
title="验证码"
required
x-decorator="FormItem"
x-component="VerifyCode"
x-component-props={{
prefix: "{{icon('LockOutlined')}}",
}}
x-reactions={[
{
dependencies: ['.phone#value', '.phone#valid'],
fulfill: {
state: {
'component[1].readyPost': '{{$deps[0] && $deps[1]}}',
'component[1].phoneNumber': '{{$deps[0]}}',
},
},
},
]}
/>
</SchemaField>
<Submit block size="large">
登录
</Submit>
</Form>
</Tabs.TabPane>
</Tabs>
<div
style={{
display: 'flex',
justifyContent: 'space-between',
}}
>
<a href="#新用户注册">新用户注册</a>
<a href="#忘记密码">忘记密码?</a>
</div>
</Card>
</div>
)
}
```
#### JSON Schema 案例
```tsx
import React from 'react'
import { createForm } from '@formily/core'
import { createSchemaField } from '@formily/react'
import { Form, FormItem, Input, Password, Submit } from '@formily/antd'
import { Tabs, Card } from 'antd'
import * as ICONS from '@ant-design/icons'
import { VerifyCode } from './VerifyCode'
const normalForm = createForm({
validateFirst: true,
})
const phoneForm = createForm({
validateFirst: true,
})
const SchemaField = createSchemaField({
components: {
FormItem,
Input,
Password,
VerifyCode,
},
scope: {
icon(name) {
return React.createElement(ICONS[name])
},
},
})
const normalSchema = {
type: 'object',
properties: {
username: {
type: 'string',
title: '用户名',
required: true,
'x-decorator': 'FormItem',
'x-component': 'Input',
'x-component-props': {
prefix: "{{icon('UserOutlined')}}",
},
},
password: {
type: 'string',
title: '密码',
required: true,
'x-decorator': 'FormItem',
'x-component': 'Password',
'x-component-props': {
prefix: "{{icon('LockOutlined')}}",
},
},
},
}
const phoneSchema = {
type: 'object',
properties: {
phone: {
type: 'string',
title: '手机号',
required: true,
'x-validator': 'phone',
'x-decorator': 'FormItem',
'x-component': 'Input',
'x-component-props': {
prefix: "{{icon('PhoneOutlined')}}",
},
},
verifyCode: {
type: 'string',
title: '验证码',
required: true,
'x-decorator': 'FormItem',
'x-component': 'VerifyCode',
'x-component-props': {
prefix: "{{icon('LockOutlined')}}",
},
'x-reactions': [
{
dependencies: ['.phone#value', '.phone#valid'],
fulfill: {
state: {
'component[1].readyPost': '{{$deps[0] && $deps[1]}}',
'component[1].phoneNumber': '{{$deps[0]}}',
},
},
},
],
},
},
}
export default () => {
return (
<div
style={{
display: 'flex',
justifyContent: 'center',
background: '#eee',
padding: '40px 0',
}}
>
<Card style={{ width: 400 }}>
<Tabs style={{ overflow: 'visible', marginTop: -10 }}>
<Tabs.TabPane key="1" tab="账密登录">
<Form
form={normalForm}
layout="vertical"
size="large"
onAutoSubmit={console.log}
>
<SchemaField schema={normalSchema} />
<Submit block size="large">
登录
</Submit>
</Form>
</Tabs.TabPane>
<Tabs.TabPane key="2" tab="手机登录">
<Form
form={phoneForm}
layout="vertical"
size="large"
onAutoSubmit={console.log}
>
<SchemaField schema={phoneSchema} />
<Submit block size="large">
登录
</Submit>
</Form>
</Tabs.TabPane>
</Tabs>
<div
style={{
display: 'flex',
justifyContent: 'space-between',
}}
>
<a href="#新用户注册">新用户注册</a>
<a href="#忘记密码">忘记密码?</a>
</div>
</Card>
</div>
)
}
```
#### 纯 JSX 案例
```tsx
import React from 'react'
import { createForm } from '@formily/core'
import { Field } from '@formily/react'
import { Form, FormItem, Input, Password, Submit } from '@formily/antd'
import { Tabs, Card } from 'antd'
import { UserOutlined, LockOutlined, PhoneOutlined } from '@ant-design/icons'
import { VerifyCode } from './VerifyCode'
const normalForm = createForm({
validateFirst: true,
})
const phoneForm = createForm({
validateFirst: true,
})
export default () => {
return (
<div
style={{
display: 'flex',
justifyContent: 'center',
background: '#eee',
padding: '40px 0',
}}
>
<Card style={{ width: 400 }}>
<Tabs style={{ overflow: 'visible', marginTop: -10 }}>
<Tabs.TabPane key="1" tab="账密登录">
<Form
form={normalForm}
layout="vertical"
size="large"
onAutoSubmit={console.log}
>
<Field
name="username"
title="用户名"
required
decorator={[FormItem]}
component={[
Input,
{
prefix: <UserOutlined />,
},
]}
/>
<Field
name="password"
title="密码"
required
decorator={[FormItem]}
component={[
Password,
{
prefix: <LockOutlined />,
},
]}
/>
<Submit block size="large">
登录
</Submit>
</Form>
</Tabs.TabPane>
<Tabs.TabPane key="2" tab="手机登录">
<Form
form={phoneForm}
layout="vertical"
size="large"
onAutoSubmit={console.log}
>
<Field
name="phone"
title="手机号"
required
validator="phone"
decorator={[FormItem]}
component={[
Input,
{
prefix: <PhoneOutlined />,
},
]}
/>
<Field
name="verifyCode"
title="验证码"
required
reactions={(field) => {
const phone = field.query('.phone')
field.setComponentProps({
readyPost: phone.get('valid') && phone.get('value'),
phoneNumber: phone.get('value'),
})
}}
decorator={[FormItem]}
component={[
VerifyCode,
{
prefix: <LockOutlined />,
},
]}
/>
<Submit block size="large">
登录
</Submit>
</Form>
</Tabs.TabPane>
</Tabs>
<div
style={{
display: 'flex',
justifyContent: 'space-between',
}}
>
<a href="#新用户注册">新用户注册</a>
<a href="#忘记密码">忘记密码?</a>
</div>
</Card>
</div>
)
}
```
## 新用户注册
#### Markup Schema 案例
```tsx
import React from 'react'
import { createForm } from '@formily/core'
import { createSchemaField } from '@formily/react'
import {
Form,
FormItem,
FormLayout,
Input,
Select,
Password,
Cascader,
DatePicker,
Submit,
Space,
FormGrid,
Upload,
ArrayItems,
Editable,
FormButtonGroup,
} from '@formily/antd'
import { action } from '@formily/reactive'
import { Card, Button } from 'antd'
import { UploadOutlined } from '@ant-design/icons'
const form = createForm({
validateFirst: true,
})
const IDUpload = (props) => {
return (
<Upload
{...props}
action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
headers={{
authorization: 'authorization-text',
}}
>
<Button icon={<UploadOutlined />}>上传复印件</Button>
</Upload>
)
}
const SchemaField = createSchemaField({
components: {
FormItem,
FormGrid,
FormLayout,
Input,
DatePicker,
Cascader,
Select,
Password,
IDUpload,
Space,
ArrayItems,
Editable,
},
scope: {
fetchAddress: (field) => {
const transform = (data = {}) => {
return Object.entries(data).reduce((buf, [key, value]) => {
if (typeof value === 'string')
return buf.concat({
label: value,
value: key,
})
const { name, code, cities, districts } = value
const _cities = transform(cities)
const _districts = transform(districts)
return buf.concat({
label: name,
value: code,
children: _cities.length
? _cities
: _districts.length
? _districts
: undefined,
})
}, [])
}
field.loading = true
fetch('//unpkg.com/china-location/dist/location.json')
.then((res) => res.json())
.then(
action.bound((data) => {
field.dataSource = transform(data)
field.loading = false
})
)
},
},
})
export default () => {
return (
<div
style={{
display: 'flex',
justifyContent: 'center',
background: '#eee',
padding: '40px 0',
}}
>
<Card title="新用户注册" style={{ width: 620 }}>
<Form
form={form}
labelCol={5}
wrapperCol={16}
onAutoSubmit={console.log}
>
<SchemaField>
<SchemaField.String
name="username"
title="用户名"
required
x-decorator="FormItem"
x-component="Input"
/>
<SchemaField.String
name="password"
title="密码"
required
x-decorator="FormItem"
x-component="Password"
x-component-props={{
checkStrength: true,
}}
x-reactions={[
{
dependencies: ['.confirm_password'],
fulfill: {
state: {
selfErrors:
'{{$deps[0] && $self.value && $self.value !== $deps[0] ? "确认密码不匹配" : ""}}',
},
},
},
]}
/>
<SchemaField.String
name="confirm_password"
title="确认密码"
required
x-decorator="FormItem"
x-component="Password"
x-component-props={{
checkStrength: true,
}}
x-reactions={[
{
dependencies: ['.password'],
fulfill: {
state: {
selfErrors:
'{{$deps[0] && $self.value && $self.value !== $deps[0] ? "确认密码不匹配" : ""}}',
},
},
},
]}
/>
<SchemaField.Void
title="姓名"
x-decorator="FormItem"
x-decorator-props={{
asterisk: true,
feedbackLayout: 'none',
}}
x-component="FormGrid"
>
<SchemaField.String
name="firstName"
x-decorator="FormItem"
x-component="Input"
x-component-props={{
placeholder: '姓',
}}
required
/>
<SchemaField.String
name="lastName"
x-decorator="FormItem"
x-component="Input"
x-component-props={{
placeholder: '名',
}}
required
/>
</SchemaField.Void>
<SchemaField.String
name="email"
title="邮箱"
required
x-validator="email"
x-decorator="FormItem"
x-component="Input"
/>
<SchemaField.String
name="gender"
title="性别"
x-decorator="FormItem"
x-component="Select"
enum={[
{
label: '男',
value: 1,
},
{
label: '女',
value: 2,
},
{
label: '第三性别',
value: 3,
},
]}
required
/>
<SchemaField.String
name="birthday"
title="生日"
required
x-decorator="FormItem"
x-component="DatePicker"
/>
<SchemaField.String
name="address"
title="地址"
required
x-decorator="FormItem"
x-component="Cascader"
x-reactions="{{fetchAddress}}"
/>
<SchemaField.String
name="idCard"
title="身份证复印件"
required
x-decorator="FormItem"
x-component="IDUpload"
/>
<SchemaField.Array
name="contacts"
title="联系人信息"
required
x-decorator="FormItem"
x-component="ArrayItems"
>
<SchemaField.Object x-component="ArrayItems.Item">
<SchemaField.Void
x-decorator="FormItem"
x-component="ArrayItems.SortHandle"
/>
<SchemaField.Void
name="popover"
title="维护联系人信息"
x-decorator="Editable.Popover"
x-component="FormLayout"
x-component-props={{
layout: 'vertical',
}}
x-reactions={[
{
dependencies: ['.popover.name'],
fulfill: {
schema: {
title: '{{$deps[0]}}',
},
},
},
]}
>
<SchemaField.String
name="name"
required
title="姓名"
x-decorator="FormItem"
x-component="Input"
x-component-props={{
style: {
width: 300,
},
}}
/>
<SchemaField.String
name="email"
title="邮箱"
x-validator={[{ required: true }, 'email']}
x-decorator="FormItem"
x-component="Input"
x-component-props={{
style: {
width: 300,
},
}}
/>
<SchemaField.String
name="phone"
required
title="手机号"
x-validator="phone"
x-decorator="FormItem"
x-component="Input"
x-component-props={{
style: {
width: 300,
},
}}
/>
</SchemaField.Void>
<SchemaField.Void
x-decorator="FormItem"
x-component="ArrayItems.Remove"
/>
</SchemaField.Object>
<SchemaField.Void
x-component="ArrayItems.Addition"
title="新增联系人"
/>
</SchemaField.Array>
</SchemaField>
<FormButtonGroup.FormItem>
<Submit block size="large">
注册
</Submit>
</FormButtonGroup.FormItem>
</Form>
</Card>
</div>
)
}
```
#### JSON Schema 案例
```tsx
import React from 'react'
import { createForm } from '@formily/core'
import { createSchemaField } from '@formily/react'
import {
Form,
FormItem,
FormLayout,
Input,
Select,
Password,
Cascader,
DatePicker,
Submit,
Space,
FormGrid,
Upload,
ArrayItems,
Editable,
FormButtonGroup,
} from '@formily/antd'
import { action } from '@formily/reactive'
import { Card, Button } from 'antd'
import { UploadOutlined } from '@ant-design/icons'
const form = createForm({
validateFirst: true,
})
const IDUpload = (props) => {
return (
<Upload
{...props}
action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
headers={{
authorization: 'authorization-text',
}}
>
<Button icon={<UploadOutlined />}>上传复印件</Button>
</Upload>
)
}
const SchemaField = createSchemaField({
components: {
FormItem,
FormGrid,
FormLayout,
Input,
DatePicker,
Cascader,
Select,
Password,
IDUpload,
Space,
ArrayItems,
Editable,
},
scope: {
fetchAddress: (field) => {
const transform = (data = {}) => {
return Object.entries(data).reduce((buf, [key, value]) => {
if (typeof value === 'string')
return buf.concat({
label: value,
value: key,
})
const { name, code, cities, districts } = value
const _cities = transform(cities)
const _districts = transform(districts)
return buf.concat({
label: name,
value: code,
children: _cities.length
? _cities
: _districts.length
? _districts
: undefined,
})
}, [])
}
field.loading = true
fetch('//unpkg.com/china-location/dist/location.json')
.then((res) => res.json())
.then(
action.bound((data) => {
field.dataSource = transform(data)
field.loading = false
})
)
},
},
})
const schema = {
type: 'object',
properties: {
username: {
type: 'string',
title: '用户名',
required: true,
'x-decorator': 'FormItem',
'x-component': 'Input',
},
password: {
type: 'string',
title: '密码',
required: true,
'x-decorator': 'FormItem',
'x-component': 'Password',
'x-component-props': {
checkStrength: true,
},
'x-reactions': [
{
dependencies: ['.confirm_password'],
fulfill: {
state: {
selfErrors:
'{{$deps[0] && $self.value && $self.value !== $deps[0] ? "确认密码不匹配" : ""}}',
},
},
},
],
},
confirm_password: {
type: 'string',
title: '确认密码',
required: true,
'x-decorator': 'FormItem',
'x-component': 'Password',
'x-component-props': {
checkStrength: true,
},
'x-reactions': [
{
dependencies: ['.password'],
fulfill: {
state: {
selfErrors:
'{{$deps[0] && $self.value && $self.value !== $deps[0] ? "确认密码不匹配" : ""}}',
},
},
},
],
},
name: {
type: 'void',
title: '姓名',
'x-decorator': 'FormItem',
'x-decorator-props': {
asterisk: true,
feedbackLayout: 'none',
},
'x-component': 'FormGrid',
properties: {
firstName: {
type: 'string',
required: true,
'x-decorator': 'FormItem',
'x-component': 'Input',
'x-component-props': {
placeholder: '姓',
},
},
lastName: {
type: 'string',
required: true,
'x-decorator': 'FormItem',
'x-component': 'Input',
'x-component-props': {
placeholder: '名',
},
},
},
},
email: {
type: 'string',
title: '邮箱',
required: true,
'x-decorator': 'FormItem',
'x-component': 'Input',
'x-validator': 'email',
},
gender: {
type: 'string',
title: '性别',
enum: [
{
label: '男',
value: 1,
},
{
label: '女',
value: 2,
},
{
label: '第三性别',
value: 3,
},
],
'x-decorator': 'FormItem',
'x-component': 'Select',
},
birthday: {
type: 'string',
required: true,
title: '生日',
'x-decorator': 'FormItem',
'x-component': 'DatePicker',
},
address: {
type: 'string',
required: true,
title: '地址',
'x-decorator': 'FormItem',
'x-component': 'Cascader',
'x-reactions': '{{fetchAddress}}',
},
idCard: {
type: 'string',
required: true,
title: '身份证复印件',
'x-decorator': 'FormItem',
'x-component': 'IDUpload',
},
contacts: {
type: 'array',
required: true,
title: '联系人信息',
'x-decorator': 'FormItem',
'x-component': 'ArrayItems',
items: {
type: 'object',
'x-component': 'ArrayItems.Item',
properties: {
sort: {
type: 'void',
'x-decorator': 'FormItem',
'x-component': 'ArrayItems.SortHandle',
},
popover: {
type: 'void',
title: '完善联系人信息',
'x-decorator': 'Editable.Popover',
'x-component': 'FormLayout',
'x-component-props': {
layout: 'vertical',
},
'x-reactions': [
{
dependencies: ['.popover.name'],
fulfill: {
schema: {
title: '{{$deps[0]}}',
},
},
},
],
properties: {
name: {
type: 'string',
title: '姓名',
required: true,
'x-decorator': 'FormItem',
'x-component': 'Input',
'x-component-props': {
style: {
width: 300,
},
},
},
email: {
type: 'string',
title: '邮箱',
'x-decorator': 'FormItem',
'x-component': 'Input',
'x-validator': [{ required: true }, 'email'],
'x-component-props': {
style: {
width: 300,
},
},
},
phone: {
type: 'string',
title: '手机号',
'x-decorator': 'FormItem',
'x-component': 'Input',
'x-validator': [{ required: true }, 'phone'],
'x-component-props': {
style: {
width: 300,
},
},
},
},
},
remove: {
type: 'void',
'x-decorator': 'FormItem',
'x-component': 'ArrayItems.Remove',
},
},
},
properties: {
addition: {
type: 'void',
title: '新增联系人',
'x-component': 'ArrayItems.Addition',
},
},
},
},
}
export default () => {
return (
<div
style={{
display: 'flex',
justifyContent: 'center',
background: '#eee',
padding: '40px 0',
}}
>
<Card title="新用户注册" style={{ width: 620 }}>
<Form
form={form}
labelCol={5}
wrapperCol={16}
onAutoSubmit={console.log}
>
<SchemaField schema={schema} />
<FormButtonGroup.FormItem>
<Submit block size="large">
注册
</Submit>
</FormButtonGroup.FormItem>
</Form>
</Card>
</div>
)
}
```
#### 纯 JSX 案例
```tsx
import React from 'react'
import { createForm } from '@formily/core'
import { Field, VoidField, ArrayField } from '@formily/react'
import {
Form,
FormItem,
Input,
Select,
Password,
Cascader,
DatePicker,
Submit,
FormGrid,
Upload,
FormButtonGroup,
ArrayBase,
Editable,
FormLayout,
} from '@formily/antd'
import { action } from '@formily/reactive'
import { Card, Button } from 'antd'
import { UploadOutlined } from '@ant-design/icons'
const form = createForm({
validateFirst: true,
})
const IDUpload = (props) => {
return (
<Upload
{...props}
action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
headers={{
authorization: 'authorization-text',
}}
>
<Button icon={<UploadOutlined />}>上传复印件</Button>
</Upload>
)
}
export default () => {
return (
<div
style={{
display: 'flex',
justifyContent: 'center',
background: '#eee',
padding: '40px 0',
}}
>
<Card title="新用户注册" style={{ width: 620 }}>
<Form
form={form}
labelCol={5}
wrapperCol={16}
onAutoSubmit={console.log}
>
<Field
name="username"
title="用户名"
required
decorator={[FormItem]}
component={[Input]}
/>
<Field
name="password"
title="密码"
required
decorator={[FormItem]}
component={[
Password,
{
checkStrength: true,
},
]}
reactions={(field) => {
const confirm = field.query('.confirm_password')
field.selfErrors =
confirm.get('value') &&
field.value &&
field.value !== confirm.get('value')
? '确认密码不匹配'
: ''
}}
/>
<Field
name="confirm_password"
title="确认密码"
required
decorator={[FormItem]}
component={[
Password,
{
checkStrength: true,
},
]}
reactions={(field) => {
const password = field.query('.password')
field.selfErrors =
password.get('value') &&
field.value &&
field.value !== password.get('value')
? '确认密码不匹配'
: ''
}}
/>
<VoidField
name="name"
title="姓名"
decorator={[
FormItem,
{
asterisk: true,
feedbackLayout: 'none',
},
]}
component={[FormGrid]}
>
<Field
name="firstName"
decorator={[FormItem]}
component={[
Input,
{
placeholder: '姓',
},
]}
required
/>
<Field
name="lastName"
decorator={[FormItem]}
component={[
Input,
{
placeholder: '名',
},
]}
required
/>
</VoidField>
<Field
name="email"
title="邮箱"
required
validator="email"
decorator={[FormItem]}
component={[Input]}
/>
<Field
name="gender"
title="性别"
decorator={[FormItem]}
component={[Select]}
dataSource={[
{
label: '男',
value: 1,
},
{
label: '女',
value: 2,
},
{
label: '第三性别',
value: 3,
},
]}
required
/>
<Field
name="birthday"
title="生日"
required
decorator={[FormItem]}
component={[DatePicker]}
/>
<Field
name="address"
title="地址"
required
decorator={[FormItem]}
component={[Cascader]}
reactions={(field) => {
const transform = (data = {}) => {
return Object.entries(data).reduce((buf, [key, value]) => {
if (typeof value === 'string')
return buf.concat({
label: value,
value: key,
})
const { name, code, cities, districts } = value
const _cities = transform(cities)
const _districts = transform(districts)
return buf.concat({
label: name,
value: code,
children: _cities.length
? _cities
: _districts.length
? _districts
: undefined,
})
}, [])
}
field.loading = true
fetch('//unpkg.com/china-location/dist/location.json')
.then((res) => res.json())
.then(
action.bound((data) => {
field.dataSource = transform(data)
field.loading = false
})
)
}}
/>
<Field
name="idCard"
title="身份证复印件"
required
decorator={[FormItem]}
component={[IDUpload]}
/>
<ArrayField name="contacts" title="联系人信息" decorator={[FormItem]}>
{(field) => (
<ArrayBase>
{field.value?.map((item, index) => (
<div key={index} className="array-items-item">
<Field
name={`${index}`}
title="完善联系人信息"
component={[Editable.Popover]}
reactions={(field) => {
field.title =
field.query('.[].name').value() || field.title
}}
>
<VoidField
name="layout"
component={[FormLayout, { layout: 'vertical' }]}
>
<Field
name="name"
title="姓名"
required
decorator={[FormItem]}
component={[
Input,
{
style: {
width: 300,
},
},
]}
/>
<Field
name="email"
title="邮箱"
required
validator="email"
decorator={[FormItem]}
component={[
Input,
{
style: {
width: 300,
},
},
]}
/>
<Field
name="phone"
title="手机号"
required
validator="phone"
decorator={[FormItem]}
component={[
Input,
{
style: {
width: 300,
},
},
]}
/>
</VoidField>
</Field>
<FormItem.BaseItem>
<ArrayBase.Remove index={index} />
<ArrayBase.MoveDown index={index} />
<ArrayBase.MoveUp index={index} />
</FormItem.BaseItem>
</div>
))}
<ArrayBase.Addition title="新增联系人" />
</ArrayBase>
)}
</ArrayField>
<FormButtonGroup.FormItem>
<Submit block size="large">
注册
</Submit>
</FormButtonGroup.FormItem>
</Form>
</Card>
</div>
)
}
```
## 忘记密码
#### Markup Schema 案例
```tsx
import React from 'react'
import { createForm } from '@formily/core'
import { createSchemaField } from '@formily/react'
import {
Form,
FormItem,
Input,
Password,
Submit,
FormButtonGroup,
} from '@formily/antd'
import { Card } from 'antd'
const form = createForm({
validateFirst: true,
})
const SchemaField = createSchemaField({
components: {
FormItem,
Input,
Password,
},
})
export default () => {
return (
<div
style={{
display: 'flex',
justifyContent: 'center',
background: '#eee',
padding: '40px 0',
}}
>
<Card title="变更密码" style={{ width: 620 }}>
<Form
form={form}
labelCol={5}
wrapperCol={16}
onAutoSubmit={console.log}
>
<SchemaField>
<SchemaField.String
name="username"
title="用户名"
required
x-decorator="FormItem"
x-component="Input"
/>
<SchemaField.String
name="email"
title="邮箱"
required
x-validator="email"
x-decorator="FormItem"
x-component="Input"
/>
<SchemaField.String
name="old_password"
title="原始密码"
required
x-decorator="FormItem"
x-component="Password"
/>
<SchemaField.String
name="password"
title="新密码"
required
x-decorator="FormItem"
x-component="Password"
x-component-props={{
checkStrength: true,
}}
x-reactions={[
{
dependencies: ['.confirm_password'],
fulfill: {
state: {
selfErrors:
'{{$deps[0] && $self.value && $self.value !== $deps[0] ? "确认密码不匹配" : ""}}',
},
},
},
]}
/>
<SchemaField.String
name="confirm_password"
title="确认密码"
required
x-decorator="FormItem"
x-component="Password"
x-component-props={{
checkStrength: true,
}}
x-reactions={[
{
dependencies: ['.password'],
fulfill: {
state: {
selfErrors:
'{{$deps[0] && $self.value && $self.value !== $deps[0] ? "确认密码不匹配" : ""}}',
},
},
},
]}
/>
</SchemaField>
<FormButtonGroup.FormItem>
<Submit block size="large">
确认变更
</Submit>
</FormButtonGroup.FormItem>
</Form>
</Card>
</div>
)
}
```
#### JSON Schema 案例
```tsx
import React from 'react'
import { createForm } from '@formily/core'
import { createSchemaField } from '@formily/react'
import {
Form,
FormItem,
Input,
Password,
Submit,
FormButtonGroup,
} from '@formily/antd'
import { Card } from 'antd'
const form = createForm({
validateFirst: true,
})
const SchemaField = createSchemaField({
components: {
FormItem,
Input,
Password,
},
})
const schema = {
type: 'object',
properties: {
username: {
type: 'string',
title: '用户名',
required: true,
'x-decorator': 'FormItem',
'x-component': 'Input',
},
email: {
type: 'string',
title: '邮箱',
required: true,
'x-validator': 'email',
'x-decorator': 'FormItem',
'x-component': 'Input',
},
oldPassword: {
type: 'string',
title: '原始密码',
required: true,
'x-decorator': 'FormItem',
'x-component': 'Password',
},
password: {
type: 'string',
title: '新密码',
required: true,
'x-decorator': 'FormItem',
'x-component': 'Password',
'x-component-props': {
checkStrength: true,
},
'x-reactions': [
{
dependencies: ['.confirm_password'],
fulfill: {
state: {
selfErrors:
'{{$deps[0] && $self.value && $self.value !== $deps[0] ? "确认密码不匹配" : ""}}',
},
},
},
],
},
confirm_password: {
type: 'string',
title: '确认密码',
required: true,
'x-decorator': 'FormItem',
'x-component': 'Password',
'x-component-props': {
checkStrength: true,
},
'x-reactions': [
{
dependencies: ['.password'],
fulfill: {
state: {
selfErrors:
'{{$deps[0] && $self.value && $self.value !== $deps[0] ? "确认密码不匹配" : ""}}',
},
},
},
],
},
},
}
export default () => {
return (
<div
style={{
display: 'flex',
justifyContent: 'center',
background: '#eee',
padding: '40px 0',
}}
>
<Card title="变更密码" style={{ width: 620 }}>
<Form
form={form}
labelCol={5}
wrapperCol={16}
onAutoSubmit={console.log}
>
<SchemaField schema={schema} />
<FormButtonGroup.FormItem>
<Submit block size="large">
确认变更
</Submit>
</FormButtonGroup.FormItem>
</Form>
</Card>
</div>
)
}
```
#### 纯 JSX 案例
```tsx
import React from 'react'
import { createForm } from '@formily/core'
import { Field } from '@formily/react'
import {
Form,
FormItem,
Input,
Password,
Submit,
FormButtonGroup,
} from '@formily/antd'
import { Card } from 'antd'
const form = createForm({
validateFirst: true,
})
export default () => {
return (
<div
style={{
display: 'flex',
justifyContent: 'center',
background: '#eee',
padding: '40px 0',
}}
>
<Card title="变更密码" style={{ width: 620 }}>
<Form
form={form}
labelCol={5}
wrapperCol={16}
onAutoSubmit={console.log}
>
<Field
name="username"
title="用户名"
required
decorator={[FormItem]}
component={[Input]}
/>
<Field
name="email"
title="邮箱"
required
validator="email"
decorator={[FormItem]}
component={[Input]}
/>
<Field
name="old_password"
title="原始密码"
required
decorator={[FormItem]}
component={[Password]}
/>
<Field
name="password"
title="新密码"
required
decorator={[FormItem]}
component={[
Password,
{
checkStrength: true,
},
]}
reactions={(field) => {
const confirm = field.query('.confirm_password')
field.selfErrors =
confirm.get('value') &&
field.value &&
field.value !== confirm.get('value')
? '确认密码不匹配'
: ''
}}
/>
<Field
name="confirm_password"
title="确认密码"
required
decorator={[FormItem]}
component={[
Password,
{
checkStrength: true,
},
]}
reactions={(field) => {
const confirm = field.query('.password')
field.selfErrors =
confirm.get('value') &&
field.value &&
field.value !== confirm.get('value')
? '确认密码不匹配'
: ''
}}
/>
<FormButtonGroup.FormItem>
<Submit block size="large">
确认变更
</Submit>
</FormButtonGroup.FormItem>
</Form>
</Card>
</div>
)
}
```
```