介绍
@formily/core 是一个用于开发表单页面和数据模型驱动 UI 的 JavaScript 库，它提供了一系列简单易用的 API，帮助您创建和管理表单数据。此外，@formily/core 还支持表单验证和可视化调试界面，使您的开发更加方便。
在本教程中，我们将介绍如何使用 @formily/core 包来创建一个简单的表单，包括如何定义表单数据模型、如何实现数据绑定和验证、以及如何使用可视化调试界面。
开始
首先我们需要安装 @formily/core 包，可以通过 npm 或 yarn 安装，如果您已经安装了 npm 或 yarn，只需要打开终端并输入以下命令即可：
npm install @formily/core # 或者 yarn add @formily/core
安装完成后，我们就可以开始开发了。下面我们将通过一个简单的示例来演示如何使用 @formily/core 包。
示例
定义数据模型
在开始编写表单之前，我们需要定义表单的数据模型。数据模型是表单的基础，它定义了表单中所有数据的字段和类型。
首先，我们需要导入 @formily/core 包：
import { createForm } from '@formily/core';
然后我们可以通过 createForm() 函数来创建一个表单实例，并定义数据模型：
-- -------------------- ---- ------- ----- ---- - ------------ -------------- - --------- ---------- --------- --- -- ----------- - --------- - --------- ----- -- --------- - --------- ----- -- -- ---展开代码
在上面的代码中，我们定义了一个包含 username 和 password 两个字段的数据模型，并设置了它们的 initial value 和 validators 属性。initial value 属性用于设置表单数据的默认值，validators 属性用于设置表单数据的验证规则。
创建表单元素
接下来我们需要为表单创建界面元素。在 @formily/core 包中，表单元素是通过组件来实现的。
首先，我们需要导入表单元素所需的组件：
import { Form, Field } from '@formily/core';
然后，我们可以通过 Form 组件来创建表单元素：
-- -------------------- ---- ------- ------ ----- ---- -------- ------ - ----------- ----- ----- - ---- ---------------- ----- ---- - ------------ -------------- - --------- ---------- --------- --- -- ----------- - --------- - --------- ----- -- --------- - --------- ----- -- -- --- ------ ------- -------- ----- - ------ - ----- ------------ ------ --------------- ---------------- -- ------ --------------- ---------------- --------------- -- ------- -- -展开代码
在上面的代码中，我们通过 Form 组件创建了一个表单，并使用 Field 组件来创建表单元素。Field 组件的 name 和 title 属性可以用于设置表单数据中的字段名和元素标题。type 属性用于设置表单元素的类型，例如 password 类型用于隐藏密码字段。
绑定数据
在创建表单元素之后，我们还需要将表单元素与表单数据模型进行绑定，这样才能进行数据操作。
我们可以在 Field 组件中使用 value 和 onChange 属性来实现数据绑定：
<Field name="username" title="Username" value={form.values.username} onChange={form.setFieldValue} />
在上面的代码中，value 属性用于绑定表单元素的值，onChange 属性用于绑定表单元素的值改变事件。setFieldValue 方法用于更新表单数据的值。
表单验证
在绑定数据之后，我们还需要实现表单验证，确保用户提交的数据是有效的。在 @formily/core 包中，表单验证是通过 validators 属性来实现的。
我们可以在 Field 组件中使用 validators 属性来设置表单验证规则：
<Field name="username" title="Username" value={form.values.username} onChange={form.setFieldValue} validators={form.validators.username} />
在上面的代码中，validators 属性用于设置表单元素的验证规则，form.validators.username 表示 username 字段的验证规则。如果验证失败，会自动提示错误信息。
可视化调试界面
最后，我们可以使用 @formily/core 包提供的可视化调试界面来调试并查看表单数据。
我们可以通过在 App 组件中添加 Debug 组件来实现：
-- -------------------- ---- ------- ------ - ----- - ---- --------------------------- -- --- ------ ------- -------- ----- - ------ - ----- ------------ --- ---- --- ------ -- ------- -- -展开代码
在上面的代码中，我们使用 Debug 组件来展示可视化调试界面。在界面中，可以查看表单数据的值和验证错误信息。
总结
@formily/core 包是一个强大的工具，它提供了丰富的 API，可以帮助我们快速开发表单界面。在本教程中，我们介绍了如何使用 @formily/core 包来实现一个简单的表单，包括定义数据模型、创建表单元素、数据绑定和验证及可视化调试等。希望本教程对您有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5f5897448250f93ef89005ad
