前言
在前端开发中，处理表单是很常见的任务。由于表单功能的复杂性和不同业务场景的需求，我们需要找到更加方便和易用的方式来完成这些任务。在这方面，npm 包 @formily/antd 就是一个很好的选择。
@formily/antd 是应用 Ant Design 的表单解决方案，完全兼容 Ant Design 的上下文和样式，同时还提供了全面的、配置化的表单解决方案，以及模型管理、条件呈现等诸多功能。本文将详细介绍如何使用 @formily/antd 完成前端表单处理。
安装
@formily/antd 可以通过 npm 包管理器来安装：
npm install @formily/antd --save
安装完成后，就可以通过以下方式来引用：
import { createForm } from '@formily/antd';
import { Form } from 'antd';如何使用
使用 @formily/antd 与使用 AntDesign 的 Form 组件非常相似，它们主要的不同点在于前者提供了更加完整的表单解决方案和更加简单的编程方式。下面是一个使用 @formily/antd 的示例：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ---- - ---- -------
------ - ---------- - ---- ----------------
----- ------ - ------------
-------------- -----
-------- -- -
----- ---- - -----------
------ -
----- ------------------
---------- -----------------
------
----------------------------
---------------------------------- ------------
------------------------------ ------------
--
----------- --------------- --
------------
---------- -----------------
------
---------------
----------------------------
---------------------------------- ------------
------------------------------ ------------
--
----------- --------------- --
------------
-----------
------- -------------------------------------
------------
-------
--
---上面的代码很容易理解，通过 createForm 创建一个表单对象，它包含了 validateFirst 和其他配置项。表单包含了两个输入框和一个提交按钮，每个输入框都包含有请求校验和错误提示的逻辑。
配置
@formily/antd 提供了大量的配置选项，这里我们就简单介绍一些常用的选项。
createForm
initialValues
静态初始化时的值，不受组件变化的影响：
-- -------------------- ---- -------
------------
-------------- -
----- ----------
--
-------- -- -
----- ---- - -----------
------ -
------
---------- --------------
------
--------------------------------------
---------------------------------- --------
--
------------
-------
--
---effects
表单生命周期影响。
-- -------------------- ---- -------
------------
-------- --- -- -
---------------------------- -- -
----------------- ------
---
----------------------------- -- -
------------------ ------
---
------------------------------ -- -
------------------- ------
---
----------------------------- -- -
------------------ ------
---
----------------------- ------------------------- -- -
----------------- -------- ------
---
--
-------- -- -
----- ---- - -----------
------ -
----- ------------------
---------- -------------
------
------------------------
---------------------------------- --------
--
----------- ----------- --
------------
-------
--
---validateTrigger
触发表单验证的事件，默认为 onChange，可选 valueChange, blur 等。
-- -------------------- ---- -------
------------
---------------- ---------
-------- -- -
----- ---- - -----------
------ -
------
---------- --------------
------
------------------------
---------------------------------- --------
------------------------------ --------
--
----------- ----------- --
------------
-------
--
---Form.Item
@formily/antd 继承了 Ant Design Form.Item 的大部分属性，但也增加了一些新的属性和方法，下面就来介绍一些常用的属性和方法。
name
表单项的名称，可以用于值的存储和唯一性校验：
<Form.Item name="username" label="Username"> <Input /> <Form.Error name="username" /> </Form.Item>
initialValue
初始值，表单对象初始化后的值。
<Form.Item name="username" label="Username" initialValue="admin"> <Input /> <Form.Error name="username" /> </Form.Item>
dependencies
注册表单项的依赖关系属性。
-- -------------------- ---- -------
---------- -----------
------- -------- ------ ------ ---
--------------- -- -
------- --------------------------
---
---------
------------
---------- ---------------- -----------------------
--------- -------- ----------- ----- -----------------------
------------validate
自定义校验规则，可使用 promise API。
-- -------------------- ---- -------
---------- --------------- -----------------
------ --
----------- --------------- --
----------------
------------------------
--------
-
--------- -----
-------- ----------
--
-
---------- ----- ------ ------ --------- -- -
-- ------ --- ------- -
------ ---------------------- -------
-
--
--
--
--
------------总结
@formily/antd 提供了精简的表单处理解决方案，配置项非常齐全，使用也非常方便。可以满足大部分企业级前端项目中表单拼装的需求。希望本文可以帮助你更加快速的掌握该技术，更加准确高效的开发前端项目。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/formily-antd