Formily核心概念解析，构建复杂表单的最佳实践总结

import React from 'react'
import { createForm } from '@formily/core'
import { FormProvider, FormConsumer, Field } from '@formily/react'
import {
  FormItem,
  FormLayout,
  Input,
  FormButtonGroup,
  Submit,
} from '@formily/antd'

// 创建表单实例
const form = createForm()

export default () => {
  return (
    <FormProvider form={form}>
      <FormLayout layout="vertical">
        <Field
          name="username"
          title="用户名"
          required
          initialValue="Hello world"
          decorator={[FormItem]}
          component={[Input]}
        />
        <Field
          name="email"
          title="邮箱"
          required
          decorator={[FormItem]}
          component={[Input]}
        />
      </FormLayout>
      <FormConsumer>
        {() => (
          <div
            style={{
              marginBottom: 20,
              padding: 5,
              border: '1px dashed #666',
            }}
          >
            实时响应：{form.values.username} - {form.values.email}
          </div>
        )}
      </FormConsumer>
      <FormButtonGroup>
        <Submit onSubmit={console.log}>提交</Submit>
      </FormButtonGroup>
    </FormProvider>
  )
}

import React from 'react'
import { createForm } from '@formily/core'
import { createSchemaField } from '@formily/react'
import { Form, FormItem, Input, NumberPicker } from '@formily/antd'

const form = createForm()

const SchemaField = createSchemaField({
  components: {
    Input,
    FormItem,
    NumberPicker,
  },
})

export default () => (
  <Form form={form} labelCol={6} wrapperCol={10}>
    <SchemaField>
      {/* 必填校验 */}
      <SchemaField.String
        name="required"
        title="必填字段"
        required
        x-component="Input"
        x-decorator="FormItem"
      />
      {/* 最大值校验 */}
      <SchemaField.Number
        name="max"
        title="最大值(>100报错)"
        maximum={100}
        x-component="NumberPicker"
        x-decorator="FormItem"
      />
      {/* 最小值校验 */}
      <SchemaField.Number
        name="min"
        title="最小值(<0报错)"
        minimum={0}
        x-component="NumberPicker"
        x-decorator="FormItem"
      />
      {/* 长度校验 */}
      <SchemaField.String
        name="length"
        title="长度为5"
        x-validator={{ len: 5 }}
        x-component="Input"
        x-decorator="FormItem"
      />
      {/* 枚举校验 */}
      <SchemaField.String
        name="enum"
        title="枚举匹配"
        x-validator={{ enum: ['A', 'B', 'C'] }}
        x-component="Input"
        x-decorator="FormItem"
      />
    </SchemaField>
  </Form>
)