5分钟攻克Formily：从安装到表单提交的极速上手指南
项目地址: https://gitcode.com/gh_mirrors/fo/formily 你是否还在为复杂表单开发而烦恼？是否想快速掌握一款高性能的表单解决方案？本文将带你5分钟内从零开始，完成Formily的安装、基础配置到实现一个完整的登录表单提交功能。读完本文，你将能够：
- 掌握Formily核心库的安装方法
- 理解Formily的基本使用流程
- 实现一个包含验证的登录表单
- 了解Formily在实际场景中的应用
Formily简介
Formily是一个跨设备、高性能的表单解决方案，支持React、React Native、Vue 2和Vue 3等多个框架。它提供了Normal Form（普通表单）、Dynamic(JSON Schema) Form（动态表单）和Form Builder（表单构建器）等多种形态，满足不同场景的表单需求。
官方文档：docs/guide/index.md
快速开始
安装核心依赖
首先，我们需要安装Formily的核心库。打开终端，执行以下命令：
npm install --save @formily/core
根据你使用的UI框架，选择安装对应的桥接库。如果你使用React，可以安装：
npm install --save @formily/react
如果你使用Vue，可以安装：
npm install --save @formily/vue
为了快速实现美观的表单，我们推荐使用Formily与Ant Design的集成组件：
npm install --save antd moment @formily/antd
引入依赖
使用ES Module语法引入所需的依赖：
import React from 'react'
import { createForm } from '@formily/core'
import { FormProvider, Field } from '@formily/react'
import { FormItem, Input } from '@formily/antd'
基础示例
下面我们来创建一个最简单的表单示例，包含一个输入框和提交按钮：
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="input"
title="输入框"
required
initialValue="Hello world"
decorator={[FormItem]}
component={[Input]}
/>
</FormLayout>
<FormConsumer>
{() => (
<div
style={{
marginBottom: 20,
padding: 5,
border: '1px dashed #666',
}}
>
实时响应：{form.values.input}
</div>
)}
</FormConsumer>
<FormButtonGroup>
<Submit onSubmit={console.log}>提交</Submit>
</FormButtonGroup>
</FormProvider>
)
}
从这个简单的示例中，我们可以了解到Formily的几个核心概念：
createForm：用于创建表单的核心领域模型，是MVVM设计模式中的ViewModelFormProvider：作为视图层桥接表单模型的入口，通过context将Form实例传递给子组件FormLayout：用于批量控制FormItem样式的组件Field：用于承载普通字段的组件，包含name、title、required等属性FormConsumer：作为响应式模型的订阅者，用于实现各种计算和汇总需求Submit：表单提交的动作触发器，会自动处理表单的加载状态
详细API文档：docs/guide/quick-start.md
实战案例：登录表单
让我们通过一个更实际的案例来深入了解Formily的使用。我们将创建一个包含密码登录和手机验证码登录两种方式的登录表单。
实现代码
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>
)
}
代码解析
这个登录表单案例展示了Formily的更多高级特性：
- 表单验证：通过设置
required属性和validator属性实现字段验证 - 条件响应：使用
reactions属性实现字段间的联动逻辑 - 组件组合：通过
decorator和component属性组合不同的UI组件 - 表单切换：结合Ant Design的Tabs组件实现不同登录方式的切换
案例来源：docs/guide/scenes/login-register.md
更多场景应用
Formily还支持更多复杂的表单场景，如：
- 分步表单：将长表单拆分为多个步骤，提高用户体验
- 动态表单：根据用户输入动态显示或隐藏表单字段
- 查询列表表单：结合表格和表单实现数据查询功能
- 对话框/抽屉表单：在对话框或抽屉中使用表单
你可以在docs/guide/scenes/目录下找到更多场景示例。
总结
通过本文的介绍，你已经了解了Formily的基本使用方法和核心概念。Formily作为一款高性能的表单解决方案，不仅提供了丰富的表单组件，还通过响应式设计和灵活的配置方式，大大简化了复杂表单的开发流程。
要深入学习Formily，建议参考以下资源：
- 官方文档：docs/guide/index.md
- API参考：packages/core/docs/api/
- 示例代码：docs/guide/scenes/
现在，你已经具备了使用Formily开发表单的基本能力。开始尝试用Formily构建你自己的表单吧！
创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
