3个真实场景带你掌握Formily企业级表单开发

3个真实场景带你掌握Formily企业级表单开发

【免费下载链接】formily 📱🚀 🧩 Cross Device & High Performance Normal Form/Dynamic(JSON Schema) Form/Form Builder -- Support React/React Native/Vue 2/Vue 3 项目地址: https://gitcode.com/gh_mirrors/fo/formily

你是否还在为复杂表单的性能优化而头疼？是否在多步骤表单中难以维护用户输入状态？本文将通过登录注册、用户信息编辑和分步表单三个企业级真实场景，带你全面掌握Formily的核心优势与最佳实践。读完本文，你将能够：

• 使用Formily快速构建高性能复杂表单
• 掌握动态数据联动与分布式状态管理
• 实现复杂表单的分步提交与数据验证
• 学会在实际项目中应用Formily的高级特性

Formily简介

Formily是一个跨设备、高性能的表单解决方案，支持React/React Native/Vue 2/Vue 3等多个框架。它解决了传统表单开发中的性能瓶颈和开发效率问题，特别适合企业级复杂表单场景。

项目核心优势：

• 分布式状态管理，解决整树渲染问题
• 强大的数据联动能力，支持复杂业务逻辑
• 完善的验证体系，支持同步/异步验证
• 灵活的渲染方案，支持JSON Schema驱动
• 丰富的组件生态，适配主流UI库

官方文档：docs/guide/index.md 核心源码：packages/core/src/

场景一：登录注册表单

登录注册是每个系统的必备功能，Formily提供了简洁高效的实现方式，同时支持多种登录方式切换和实时表单验证。

实现方案

Formily的登录表单实现主要依赖以下核心模块：

• 表单容器：packages/antd/src/form/
• 输入组件：packages/antd/src/input/
• 密码组件：packages/antd/src/password/
• 验证码组件：docs/guide/scenes/VerifyCode.tsx

关键代码示例

以下是使用Markup Schema方式实现的登录表单：

<Form
  form={normalForm}
  layout="vertical"
  size="large"
  onAutoSubmit={console.log}
>
  <SchemaField>
    <SchemaField.String
      name="username"
      title="Username"
      required
      x-decorator="FormItem"
      x-component="Input"
      x-component-props={{
        prefix: "{{icon('UserOutlined')}}",
      }}
    />
    <SchemaField.String
      name="password"
      title="Password"
      required
      x-decorator="FormItem"
      x-component="Password"
      x-component-props={{
        prefix: "{{icon('LockOutlined')}}",
      }}
    />
  </SchemaField>
  <Submit block size="large">
    Log in
  </Submit>
</Form>

手机号登录实现

Formily支持通过标签页切换不同的登录方式，以下是手机号+验证码登录的实现：

<SchemaField>
  <SchemaField.String
    name="phone"
    title="Phone Number"
    required
    x-validator="phone"
    x-decorator="FormItem"
    x-component="Input"
    x-component-props={{
      prefix: "{{icon('PhoneOutlined')}}",
    }}
  />
  <SchemaField.String
    name="verifyCode"
    title="Verification Code"
    required
    x-decorator="FormItem"
    x-component="VerifyCode"
    x-reactions={[
      {
        dependencies: ['.phone#value', '.phone#valid'],
        fulfill: {
          state: {
            'component[1].readyPost': '{{$deps[0] && $deps[1]}}',
            'component[1].phoneNumber': '{{$deps[0]}}',
          },
        },
      },
    ]}
  />
</SchemaField>

注册表单实现

注册表单通常包含更多字段和复杂验证逻辑，Formily通过表单网格、数组组件等实现复杂布局：

<SchemaField.Void
  title="name"
  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: 'firstname',
    }}
    required
  />
  <SchemaField.String
    name="lastName"
    x-decorator="FormItem"
    x-component="Input"
    x-component-props={{
      placeholder: 'lastname',
    }}
    required
  />
</SchemaField.Void>

完整实现请参考：docs/guide/scenes/login-register.md

场景二：用户信息编辑表单

用户信息编辑是企业应用中常见的复杂表单场景，通常包含个人基本信息、联系方式、地址等多组数据，且需要支持数据回显和部分字段只读。

实现方案

Formily的信息编辑表单主要依赖以下模块：

• 级联选择器：packages/antd/src/cascader/
• 日期选择器：packages/antd/src/date-picker/
• 上传组件：packages/antd/src/upload/
• 数组组件：packages/antd/src/array-items/

数据回显实现

Formily通过setInitialValues方法轻松实现编辑表单的数据回显：

useEffect(() => {
  setTimeout(() => {
    form.setInitialValues({
      username: 'Aston Martin',
      firstName: 'Aston',
      lastName: 'Martin',
      email: 'aston_martin@aston.com',
      gender: 1,
      birthday: '1836-01-03',
      address: ['110000', '110000', '110101'],
      contacts: [
        {
          name: 'Zhang San',
          phone: '13245633378',
          email: 'zhangsan@gmail.com',
        },
        { name: 'Li Si', phone: '16873452678', email: 'lisi@gmail.com' },
      ],
    })
    setLoading(false)
  }, 2000)
}, [])

动态地址选择

通过Formily的 reactions 机制，可以轻松实现地址选择器的动态数据加载：

<SchemaField.String
  name="address"
  title="Address"
  required
  x-decorator="FormItem"
  x-component="Cascader"
  x-reactions="{{fetchAddress}}"
/>

地址数据加载逻辑：

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
      })
    )
}

联系人数组编辑

Formily的数组组件支持动态增删改查联系人信息：

<SchemaField.Array
  name="contacts"
  title="Contacts"
  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="Contact Informations"
      x-decorator="Editable.Popover"
      x-component="FormLayout"
      x-component-props={{
        layout: 'vertical',
      }}
    >
      <SchemaField.String
        name="name"
        required
        title="Name"
        x-decorator="FormItem"
        x-component="Input"
      />
      <SchemaField.String
        name="email"
        title="Email"
        x-validator={[{ required: true }, 'email']}
        x-decorator="FormItem"
        x-component="Input"
      />
      <SchemaField.String
        name="phone"
        required
        title="Phone Number"
        x-validator="phone"
        x-decorator="FormItem"
        x-component="Input"
      />
    </SchemaField.Void>
    <SchemaField.Void
      x-decorator="FormItem"
      x-component="ArrayItems.Remove"
    />
  </SchemaField.Object>
  <SchemaField.Void
    x-component="ArrayItems.Addition"
    title="Add Contact"
  />
</SchemaField.Array>

完整实现请参考：docs/guide/scenes/edit-detail.md

场景三：分步表单与选项卡表单

对于字段较多的复杂表单，通常需要拆分为多步或使用选项卡形式组织，Formily提供了完善的支持。

分步表单实现

Formily的分步表单主要依赖FormStep组件，支持步骤导航、步骤验证等功能。

基本用法：

<FormStep
  form={form}
  steps={[
    {
      title: 'Basic Info',
      fields: ['username', 'email', 'password'],
    },
    {
      title: 'Personal Info',
      fields: ['firstName', 'lastName', 'gender', 'birthday'],
    },
    {
      title: 'Contact Info',
      fields: ['address', 'contacts'],
    },
  ]}
/>

完整实现请参考：docs/guide/scenes/step-form.md

选项卡表单实现

选项卡表单使用FormTab组件实现：

<FormTab form={form}>
  <FormTab.TabPane title="Basic Info" path="basic">
    <Field name="username" title="Username" component={[Input]} />
    <Field name="email" title="Email" component={[Input]} />
  </FormTab.TabPane>
  <FormTab.TabPane title="Advanced" path="advanced">
    <Field name="address" title="Address" component={[Input]} />
    <Field name="phone" title="Phone" component={[Input]} />
  </FormTab.TabPane>
</FormTab>

完整实现请参考：docs/guide/scenes/tab-form.md

Formily核心优势总结

1. 高性能：分布式状态管理，解决传统表单整树渲染问题
2. 灵活易用：支持JSX、Markup Schema、JSON Schema三种编码方式
3. 丰富生态：适配Ant Design、Element UI、Next等主流UI库
4. 完善验证：内置丰富验证规则，支持自定义验证和异步验证
5. 动态联动：强大的reactions机制，轻松实现复杂数据联动

学习资源

• 快速开始：docs/guide/quick-start.md
• 高级教程：docs/guide/advanced/
• API文档：packages/core/docs/api/
• 更多场景：docs/guide/scenes/more.md

通过以上三个企业级场景的实践，我们展示了Formily在复杂表单开发中的强大能力。无论是简单的登录表单还是复杂的多步骤表单，Formily都能提供高效、优雅的解决方案，显著提升开发效率和用户体验。

如果你想深入学习Formily，可以参考官方提供的学习路径，也欢迎参与社区贡献，一起完善这个优秀的表单解决方案。

本文案例均来自Formily官方场景库，可直接在实际项目中复用。仓库地址：https://gitcode.com/gh_mirrors/fo/formily

【免费下载链接】formily 📱🚀 🧩 Cross Device & High Performance Normal Form/Dynamic(JSON Schema) Form/Form Builder -- Support React/React Native/Vue 2/Vue 3 项目地址: https://gitcode.com/gh_mirrors/fo/formily