formily 的协议主要是基于标准 JSON Schema 来进行驱动渲染的
同时在标准之上又扩展了一些x-*属性来表达 UI，让整个表单渲染引擎可以具备完整描述一个复杂系统的能力

  • @formily/core 就是 ViewModel
  • Component 和 Decorator 就是 View
    • ViewModel 和 View 的绑定就叫做模型绑定
  • @formily/react 就是将 ViewModel 和 View 绑定起来的胶水层

x-component

formily支持的 x- 属性可以在线测试 https://designable-antd.formilyjs.org
JSON Schema外，通过x-的扩展方式，抽象了x-属性以对表单UI进行描述

  • x-component 字段编辑组件类型，比如Input、Select等，另外仍然可以是CustomComponent，通过渲染层注入组件即可
    • x-component-props 组件的 props，例如 Input，Select
  • x-decorator
    • x-decorator-props：字段属性描述，通俗可以理解为FormItem属性定义
  • x-validator 表单验证
  • x-designable-id
  • x-index
  1. {
  2.   "type": "number",
  3.   "title": "NumberPicker",
  4.   "x-decorator": "FormItem",
  5.   "x-component": "NumberPicker",
  6.   "x-validator": [],
  7.   "x-component-props": {},
  8.   "x-decorator-props": {},
  9.   "x-designable-id": "q51a2b2r3dw",
  10.   "x-index": 3
  11. }

x-component类型

  • Input
  • Input.TextArea
  • DatePicker
  • DatePicker.RangePicker
  • TimePicker
  • Radio.Group
  • Cascader
  • Checkbox.Group
  • Upload
  • Upload.Dragger
  • Password
  • NumberPicker
  • Rate
  • Slider
  • Select
  • TreeSelect
  • Transfer
  • Switch

搜索表单案例

image.png

  1. {
  2.   "form": {
  3.     "labelCol": 4,
  4.     "wrapperCol": 20
  5.   },
  6.   "schema": {
  7.     "type": "object",
  8.     "properties": {
  9.       "otw6zkqmond": {
  10.         "type": "void",
  11.         "x-component": "FormGrid",
  12.         "x-validator": [],
  13.         "x-component-props": {},
  14.         "x-designable-id": "otw6zkqmond",
  15.         "x-index": 0,
  16.         "properties": {
  17.           "ubpqsz5z6xq": {
  18.             "type": "void",
  19.             "x-component": "FormGrid.GridColumn",
  20.             "x-designable-id": "ubpqsz5z6xq",
  21.             "x-index": 0,
  22.             "properties": {
  23.               "c1x350m23ai": {
  24.                 "type": "number",
  25.                 "title": "重量",
  26.                 "x-decorator": "FormItem",
  27.                 "x-component": "NumberPicker",
  28.                 "x-validator": [],
  29.                 "x-component-props": {},
  30.                 "x-decorator-props": {},
  31.                 "x-designable-id": "c1x350m23ai",
  32.                 "x-index": 0
  33.               }
  34.             }
  35.           },
  36.           "dxamcghnxgg": {
  37.             "type": "void",
  38.             "x-component": "FormGrid.GridColumn",
  39.             "x-designable-id": "dxamcghnxgg",
  40.             "x-index": 1,
  41.             "properties": {
  42.               "cxlgzfanh2z": {
  43.                 "title": "来源",
  44.                 "x-decorator": "FormItem",
  45.                 "x-component": "Select",
  46.                 "x-validator": [],
  47.                 "x-component-props": {},
  48.                 "x-decorator-props": {},
  49.                 "x-designable-id": "cxlgzfanh2z",
  50.                 "x-index": 0
  51.               }
  52.             }
  53.           },
  54.           "0cu4jvzmtqr": {
  55.             "type": "void",
  56.             "x-component": "FormGrid.GridColumn",
  57.             "x-designable-id": "0cu4jvzmtqr",
  58.             "x-index": 2,
  59.             "properties": {
  60.               "bvpse88vn38": {
  61.                 "type": "string",
  62.                 "title": "日期",
  63.                 "x-decorator": "FormItem",
  64.                 "x-component": "DatePicker",
  65.                 "x-validator": [],
  66.                 "x-component-props": {},
  67.                 "x-decorator-props": {},
  68.                 "x-designable-id": "bvpse88vn38",
  69.                 "x-index": 0
  70.               }
  71.             }
  72.           }
  73.         }
  74.       },
  75.       "6ftvfh7qwos": {
  76.         "type": "void",
  77.         "x-component": "FormGrid",
  78.         "x-validator": [],
  79.         "x-component-props": {},
  80.         "x-designable-id": "6ftvfh7qwos",
  81.         "properties": {
  82.           "kih7etsd61b": {
  83.             "type": "void",
  84.             "x-component": "FormGrid.GridColumn",
  85.             "x-designable-id": "kih7etsd61b",
  86.             "properties": {
  87.               "qvudj88c1ri": {
  88.                 "type": "string",
  89.                 "title": "时间",
  90.                 "x-decorator": "FormItem",
  91.                 "x-component": "TimePicker",
  92.                 "x-validator": [],
  93.                 "x-component-props": {},
  94.                 "x-decorator-props": {},
  95.                 "x-designable-id": "qvudj88c1ri",
  96.                 "x-index": 0
  97.               }
  98.             },
  99.             "x-index": 0
  100.           },
  101.           "dw0mvx4viuh": {
  102.             "type": "void",
  103.             "x-component": "FormGrid.GridColumn",
  104.             "x-designable-id": "dw0mvx4viuh",
  105.             "properties": {
  106.               "riyrre6y8nh": {
  107.                 "type": "string",
  108.                 "title": "日期",
  109.                 "x-decorator": "FormItem",
  110.                 "x-component": "DatePicker",
  111.                 "x-validator": [],
  112.                 "x-component-props": {},
  113.                 "x-decorator-props": {},
  114.                 "x-designable-id": "riyrre6y8nh",
  115.                 "x-index": 0
  116.               }
  117.             },
  118.             "x-index": 1
  119.           },
  120.           "gmxjqf6u60c": {
  121.             "type": "void",
  122.             "x-component": "FormGrid.GridColumn",
  123.             "x-designable-id": "gmxjqf6u60c",
  124.             "properties": {
  125.               "mwqz9kt98td": {
  126.                 "type": "string",
  127.                 "title": "手机",
  128.                 "x-decorator": "FormItem",
  129.                 "x-component": "Input",
  130.                 "x-validator": [],
  131.                 "x-component-props": {},
  132.                 "x-decorator-props": {},
  133.                 "x-designable-id": "mwqz9kt98td",
  134.                 "x-index": 0
  135.               }
  136.             },
  137.             "x-index": 2
  138.           }
  139.         },
  140.         "x-index": 1
  141.       }
  142.     },
  143.     "x-designable-id": "n0lpepey1ve"
  144.   }
  145. }