2024年3月14日发(作者：)

formily获取自定义组件的方法

formily 是一个专注于表单开发的工具库，它提供了一套方便、高

效的方式来构建和管理表单。在使用 formily 进行表单开发时，我

们经常会遇到需要使用自定义组件的情况。本文将介绍如何使用

formily 获取自定义组件。

我们需要明确一点，formily 并不限制我们只能使用它提供的内置

组件，而是支持我们使用任何自定义组件。为了让 formily 能够识

别和管理自定义组件，我们需要对自定义组件进行一些封装和配置。

在开始之前，我们先来了解一下 formily 中的两个重要概念：字段

（Field）和控件（Control）。

字段是表单中的一个数据项，它包含了数据的名称、值、校验规则

等信息。控件是字段的表现形式，它负责展示字段的值，并与用户

进行交互。一个字段可以对应多个不同的控件，比如一个输入框和

一个下拉框可以使用同一个字段。

要使用自定义组件，我们首先需要封装它为一个 formily 的控件。

这个控件需要继承自 formily 的基础控件，比如 Input、Select

等。我们可以通过继承基础控件并添加一些自定义的属性和方法来

实现封装。

在封装过程中，我们需要关注以下几点：

1. 继承基础控件：通过继承基础控件，我们可以继承它的一些基本

属性和方法，比如 value、onChange 等。这样可以保证我们的自定

义控件在使用 formily 的时候具备基本的功能。

2. 添加自定义属性：根据自定义组件的特点，我们可以为它添加一

些自定义的属性。比如一个日期选择器组件可以添加一个 format

属性来指定日期的格式。

3. 处理数据同步：当用户输入或选择数据时，我们需要将这些数据

同步到字段中。可以通过在自定义控件的 onChange 方法中调用字

段的 setValue 方法来实现数据的同步。

4. 处理校验规则：如果自定义组件需要进行校验，我们可以在自定

义控件中添加对应的校验逻辑。可以通过调用字段的 addValidator

方法来添加校验规则，并在自定义控件的 onBlur 方法中触发校验。

5. 处理样式和布局：我们可以通过添加样式和布局来优化自定义组

件的展示效果。可以通过在自定义控件的 render 方法中添加相应

的样式和布局来实现。

封装完自定义控件后，我们需要将它注册到 formily 中，以便在表

单中使用。可以通过调用 formily 的 registerFieldComponent 方

法来注册自定义控件。注册时需要指定一个唯一的组件名，以及我

们封装的自定义控件类。

注册完成后，我们就可以在表单中使用自定义组件了。可以通过在

schema 中使用 component 属性来指定使用的组件名。同时，我们

还可以通过 props 属性来传递一些自定义的属性给自定义组件。

除了以上的方式，我们还可以通过 formily 的扩展机制来获取自定

义组件。通过调用 formily 的 registerFieldMiddleware 方法，

我们可以注册一个中间件函数。这个函数会在每个字段创建时被调

用，我们可以在函数中判断字段是否需要使用自定义组件，并返回

相应的组件名。

使用 formily 获取自定义组件的过程可以总结为以下几个步骤：

1. 封装自定义组件为 formily 的控件，继承基础控件并添加自定

义属性和方法。

2. 注册自定义控件到 formily 中，指定组件名和自定义控件类。

3. 在表单中使用自定义组件，通过 schema 中的 component 属性

指定组件名，并通过 props 属性传递自定义属性。

4. 可选：通过注册中间件函数的方式获取自定义组件。

通过以上步骤，我们就可以在使用 formily 进行表单开发时，灵活

地使用自定义组件了。这不仅提高了我们的开发效率，还能让我们

更好地满足项目的需求。