# @bolttech/form-engine-core 中文文档

规范地址：https://npmcn.com/package/%40bolttech/form-engine-core/

版本：1\.2\.3
npm 元数据更新时间：2026-11-06T15:03:02.179Z
中文译文更新时间：2026-11-09T21:03:15.003Z
软件包许可：未声明

本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。

原始 npm 页面：https://www.npmjs.com/package/%40bolttech/form-engine-core
原文对照：https://npmcn.com/package/%40bolttech/form-engine-core/?lang=original

## 关键信息（来自 npm 元数据）

- 包体积（解压后）：526 kB，65 个文件
- 模块格式：ES Module
- TypeScript 类型：包内自带
- 运行依赖：3 个
- 首次发布：2024-06-13T15:21:40.238Z
- 最新版本发布：2026-10-01T16:14:09.323Z
- 近 30 天下载量：1731（2026-10-09 至 2026-11-07，npm 官方下载统计）
- 已发布版本数：110（近 12 个月 13 个）

## 中文简介

开发维护文件

## 安装

```sh
npm install @bolttech/form-engine-core
```

也可以使用：`pnpm add @bolttech/form-engine-core`、`yarn add @bolttech/form-engine-core`、`bun add @bolttech/form-engine-core`

## README

# 窗体引擎核心

开发维护文件

1.  [方程式概览](https://npmcn.com/package/%40bolttech/form-engine-core/#readme-arquitecture-overview)

-   1.1 国家 [窗体组应负责任](https://npmcn.com/package/%40bolttech/form-engine-core/#readme-formgroup-responsability)
-   1.2 国家 [表单责任](https://npmcn.com/package/%40bolttech/form-engine-core/#readme-formcore-responsability)
-   1.3 国家 [表单字段责任](https://npmcn.com/package/%40bolttech/form-engine-core/#readme-formfield-responsability)

2.  [改变私人外地财产类别](https://npmcn.com/package/%40bolttech/form-engine-core/#readme-changing-private-field-class-properties-implementation)
3.  [价值变化规则](https://npmcn.com/package/%40bolttech/form-engine-core/#readme-value-change-rules)
4.  [倡导更改和能见度规则](https://npmcn.com/package/%40bolttech/form-engine-core/#readme-props-change-and-visibility-rules)
5.  [显示错误消息](https://npmcn.com/package/%40bolttech/form-engine-core/#readme-error-messages-display)
6.  [主题依赖关系](https://npmcn.com/package/%40bolttech/form-engine-core/#readme-subject-dependencies)

-   6.1 请检查date=中的日期值 (帮助) [字段](https://npmcn.com/package/%40bolttech/form-engine-core/#readme-field)
-   6.1.1 国家 [模板对象$](https://npmcn.com/package/%40bolttech/form-engine-core/#readme-templatesubject)
-   6.1.2 国家 [字段事件对象$](https://npmcn.com/package/%40bolttech/form-engine-core/#readme-fieldeventsubject)
-   6.1.3 (中文(简体) ) [数据对象元](https://npmcn.com/package/%40bolttech/form-engine-core/#readme-datasubject)
-   6.1.4 (中文(简体) ) [表格](https://npmcn.com/package/%40bolttech/form-engine-core/#readme-formvalidnotification)

7.  [以计划构建字段](https://npmcn.com/package/%40bolttech/form-engine-core/#readme-build-fields-with-a-schema)

-   第7.1条 [字段](https://npmcn.com/package/%40bolttech/form-engine-core/#readme-fields)
-   第7.2条 [模板](https://npmcn.com/package/%40bolttech/form-engine-core/#readme-templates)

8.  [构建没有计划字段](https://npmcn.com/package/%40bolttech/form-engine-core/#readme-build-fields-without-schema)
9.  [窗体组事件召回寄存器](https://npmcn.com/package/%40bolttech/form-engine-core/#readme-form-group-event-callback-register)

-   9.1 国家 [数据上的窗体组](https://npmcn.com/package/%40bolttech/form-engine-core/#readme-form-group-ondata)
-   9.2 (中文(简体) ) [valid 上的窗体组](https://npmcn.com/package/%40bolttech/form-engine-core/#readme-form-group-onvalid)

## 方程式概览

![form-engine general arquitecture](https://npmcn.com/package/%40bolttech/form-engine-core/devdocs/assets/generic_arquitecture.png)

Form-engine Basic arquiture是以类为主,由FormGroup,Form and Field等组成,通信是可观察的以基为主,以便喂养那些负责放出并重播在图上所配置的被动操纵的适配器.

每个类从下到上都是独立的,这意味着你可以独立地固定一个字段,但一个表单依赖于字段来工作,因为一个表单类管理着相互相互作用的字段,与依赖表单的表单组一样来工作.

FormGroup管理作为密钥/值映射而存储的窗体,与将字段存储为密钥/值映射的窗体相同.

### 窗体组应负责任

-   管理表单的添加和去除
-   管理用户插入表格的数据,以便向适配器提供回调
-   管理表格的有效性,为适配器提供回调
-   正在检查所需的功能

### 表单责任

-   管理字段的添加和去除按键
-   根据方案配置管理字段的能见度
-   基于计划配置管理重置 Values
-   管理跨字段释放的诱导属性变化
-   基于映射器列表配置管理组件配置
-   管理对字段发送的事件的回调订阅( 调整外部动作触发器)
-   管理表单值提交和有效性检查

### 表单字段责任

-   管理诸如验证、价值、错误信息等属性的存储和排放
-   管理请求的 api 方案配置
-   管理适配器初始化外部配置绑定通则

## 改变私人外地财产类别

在执行过程中,必须理解表格的反应取决于 **RXJS 软件**,这种属性变化会对其他属性造成副作用,所有属性都由 **RXJS 软件** 主题,所以对于所有这些类属性,每次它们改变,它们都需要向相应的主题发出,所以所有这些属性都有一个被发出到结尾的主体.

如果从事涉及这些财产的任何维护工作:

```typescript
private _props: Record<string, unknown>;
private _value: unknown;
private _stateValue: Record<string, unknown>;
private _metadata: unknown;
private _visibility: boolean;
private _errors: TErrorMessages;
private _api: TApiResponse;
private _valid: boolean;
private _mounted: boolean;
```

他们都有一个 `get` 财务报告和审定财务报表 `set` 方法构造器

这个 `get` 构造者负责交付价值

这个 `set` 构造者负责在此私有属性上设定值,同时向相应的主体和窗体模板主体排放

```javascript
private _stateValue: unknown;
private _metadata: unknown;
errorsString: string;
errorsList: string[];
```

这种财产是根据其他私有财产计算的,

`_stateValue` 将口罩应用到 `_value` 何时 `set value` 方法称为

`_metadata` 已发送元数据 **变化事件** 映射器在 `set value` 名为

何时 `set errors` 方法叫做, `errorsString` 是在字符串中缩合出错的信息列表,用逗号分隔 `,` 财务报告和审定财务报表 `errorsList` 是错误消息的列表

**如果您尝试直接改变这个值而不使用它的构造器, 它会在形式反应上引起严重的问题, 即使是在最后使用的情况下, 谨慎地评价是否您应该直接在任何维护或特性执行上改变这个值**

## 价值变化规则

如果您在数值变化上努力, 请考虑值变化被作为配置上的特殊属性处理, 让我们考虑在反应中某个组件会发生什么:

```javascript
const [value, setValue] = useState('');

const handleChange = (e) => {
  const val = e.currentTarget.value;
  val ? (setValue = val) : '';
};

<input onChange={handleChange} value={value} />;
```

值道克被绑定在值态上,而onChange道克被绑定在会改变该值的函数上.

在形式引擎中,持有该价值的财产和改变该价值的财产是:

```javascript
class FormField
  private _value: unknown;
  (...)
  get value(): unknown {
    return this._value;
  }

  set value(value: unknown) {
    /*
      too much unstable, if the valueChangeEvent parses the template event
      value, might occur unexpected results
    */
    let val;
    if (this.valueChangeEvent) {
      try {
        val = this.valueChangeEvent(value, { props: this.props });
      } catch (e) {
        val = value;
      }
    } else {
      val = value;
    }
    if (typeof val === 'undefined' || val === null) return;
    if (typeof val === 'object' && '_value' in val && '_metadata' in val) {
      this._value = this.formatValue(val['_value']);
      this._stateValue = this.mapper.events?.setValue
        ? {
            [this.mapper.events.setValue]: this.maskValue(
              this.formatValue(val['_value'])
            ),
          }
        : {};
      this._metadata = val._metadata;
    } else {
      this._value = this.formatValue(val);
      this._stateValue = this.mapper.events?.setValue
        ? {
            [this.mapper.events?.setValue]: this.maskValue(
              this.formatValue(val)
            ),
          }
        : {};
      this.maskValue(this.formatValue(val));
      this._metadata = val;
    }
    this.stateValue && this.valueSubject$.next(this.stateValue);
    this.templateSubject$.next({ key: this.name, event: 'ON_VALUE' });
  }
```

在这种情况下,传递到这种设置方法的值可以有多种格式(这是 **变化事件** 负责在此每一种格式上传递值的映射函数 :

```javascript
value: unknown;
```

该值被格式化并存储到 `fieldinstance._value` 和带有值的道具名称 `fieldinstance._stateValue`

```javascript
{ _value: unknown, _metadata: unknown }
```

这个 `_value` 键已格式化并存储到 `fieldinstance._value` 和带有值的道具名称 `fieldinstance._stateValue`

这个 `_metadata` 密钥存储于 `fieldinstance._metadata` 并可以使用 `fieldinstance.metadata` 只读属性

但是,这种改变可以在Schema上定义副作用,比如验证,能见度条件等等,所以改变这个值并触发所有副作用的正确方式,以便更新使用这个实例的组件就是使用 `fieldinstance.emitValue` 类函数 :

```javascript
fieldinstance.emitValue({ event: 'ON_FIELD_CHANGE', value: 'hello' });
```

此函数将设定值并触发所有副作用, 并触发定义的 OnData 回调 :

```javascript
  emitValue(prop: {
    value: unknown | { _value: unknown; _stateValue: unknown };
    event: TEvents;
  }): void {
    this.value = prop.value;
    this.emitEvents({ event: prop.event });
    this.dataSubject$.next({ key: this.name, event: prop.event });
  }
  emitEvents({ event }: { event: TEvents }): void {
    this.setFieldValidity({ event });
    this.validateVisibility({ event, key: this.name });
    this.resetValue({ event, key: this.name });
    this.apiEventQueueSubject$.next({ event });
    this.fieldEventSubject$.next({
      event,
      fieldName: this.name,
      fieldInstance: this,
    });
  }
```

要释放此值变化的抓取, 值设置在端部释放, 在配置的属性上设定值 `mapper -> events -> setValue` 当该值被取回时,会用已配置的通讯键创建对象,以在组件上作为道具传递.

另外,还有一个帮助器函数来帮助注册这个召回函数,它负责在调用适配器上更改这个值 `subscribeValue`。 。 。 .

因此,将基本反应执行从简单的绑定状态和更改处理器与形式引擎控制输入处理器进行比较,执行是这样的:

```javascript
const [valueState, setValueState] = useState<Record<string, unknown>>(fieldinstance.stateValue || {});

fieldInstance = new FormField(
  (...)
  mapper: {
    events: {
      setValue: 'value'
    }
  }
  (...)
)

useEffect(() => {
    fieldInstance.subscribeValue((value) => setValueState(value));
    return () => {
      fieldInstance?.destroyField();
    };
  }, []);

  const handleChange = useCallback((event: unknown) => {
    fieldInstance?.emitValue({ value: event, event: 'ON_FIELD_CHANGE' });
  }, []);

return <input onChange={handleChange} {...valueState}>
```

当字段挂起呼叫时, 收听者会注册 `subscribeValue` 用于更新状态的实地实例.

手柄切换调取字段实例 `emitValue`

管理验证,能见度等的其余过程在形式-引擎-核心(form-engine-core)上内部发生,适配器唯一需要做的就是告知设定为输入值的值,处理输出,并在效应所定义的回调函数上交付.

**说明:** _这是为演示目的, 适配器的最终执行 仅类似于此_

## 倡导更改和能见度规则

道具的改变可以在计划上定义,也可以用诱导来改变,让我们考虑反应中发生的情况:

```javascript
return <input label={props.label} placeholder={props.placeholder}>
```

反应每次改变道具时都会重置这个元件,如果是形式-引擎,这种道具会传到schema上,并且可以根据任何场面副作用改变的诱导,管理道具变化的是一个RXJS主题,以便正确登记道具,让形式-引擎管理副作用,这需要完成:

```javascript
const [state, setState] = useState<Partial<IState>>({
    visibility: fieldInstance?.visibility || true,
    props: fieldInstance?.props || props,
  });

useEffect(() => {
    fieldInstance.subscribeState((props) => {
        setState((prev) => ({
          ...prev,
          ...props,
        }))
    })

    return () => {
      fieldInstance?.destroyField();
    };
},[])

return {state.visibility && <input {...props}>}
```

字段实例有一个帮助函数来注册回调函数 `subscribeState` 用于每次在窗体引擎上内部更改道具时调用,在这个调回功能上,您需要更改道具的状态,以便发生到适配器上,同样可见度控制由 `visibility` 由回调函数给出道具,所以要显示或隐藏元件的条件要根据这个道具值来制作到适配器上.

**注:试图传递发送该值的值,除非该值是一个模板,否则不会成功**

**说明:** _这是为演示目的, 适配器的最终执行 仅类似于此_

## 显示错误消息

对于错误消息显示,基于配置到计划上的字段发生的验证逻辑,组件需要将属性配置到映射器配置上 `mappers -> events -> setErrorMessage`,然后,每次发生错误,字段都会自动在相应的道具上显示出错误.

反应中的基本成分示例:

```javascript
const [errorMessage, setErrorMessage] = useState('')

return <Input errorMessage={errorMessage}>
```

在窗体引擎中,错误消息将在 `errors` 将道具名称传递到映射程序配置上, 以及所有被触发的错误消息

示例

```javascript
fieldInstance = new FormField(
  (...)
  mapper: {
    events: {
      setErrorMessage: 'errorMessage'
    }
  }
  (...)
)

const [state, setState] = useState<Partial<IState>>({
    visibility: fieldInstance?.visibility || true,
    props: fieldInstance?.props || props,
  });

useEffect(() => {
    fieldInstance.subscribeState((props) => {
        setState((prev) => ({
          ...prev,
          ...props,
        }))
    })

    return () => {
      fieldInstance?.destroyField();
    };
},[])

return <Input {...state.errors}>
```

错误将包含一个有密钥的对象 `errorMessage` 用逗号分隔出的所有出错, 配置到映射器上的密钥会根据组件道具的不同而变化, 如果另一个组件在另一个道具上设置出错消息, 则需要配置到映射器配置到设置的 ErrorMessage 事件内部 .

**说明:** _这是为演示目的, 适配器的最终执行 仅类似于此_

## 主题依赖关系

### 字段

```typescript
templateSubject$: Subject<TTemplateEvent>;
fieldEventSubject$: Subject<TFieldEvent>;
dataSubject$: Subject<{ key: string; event: TEvents }>;
formValidNotification$: Subject<Pick<TFormValidationPayload, 'fieldTrigger'>>;
```

此主题需要作为字段构造参数来传递,而字段引用符需要将它们固定,它们也是形式实例的一部分 执行

#### 模板对象$

在任何字段突变时都需要引用这个主题,这将通知一个字段改变的表格,以及需要重算具有模板依赖性的任何其他字段,

实例: `field1` 标签道具取决于 `field2` 值,所以: `field1.props.label` 有模板 `${field2.props.value}`时,每次 `field2` 价值变化, 页:1 `templateSubject$` 发送,表格得到的通知和检查 `field2` 有一个 `field1` 依赖性和更新 `label` 包含值 联 合 国 `field2`

#### 字段事件对象$

每次从一个组件映射出的基本事件发生时 `onChange` 或者说 `onBlur` 字段以事件类型和字段名称发布此主题, 如果适配器引用 `subscribeFieldEvent` 在带有回调函数的即时形式上,此函数每次字段都会被调用 `emitEvents` 被引用,否则被忽略

#### 数据对象元

主题每次触发 `emitValue` 如果适配器引用 `subscribeData` 在即时表格上并传递回调函数,此函数将每次字段执行 `emitValue` 被引用

#### 表格

如果适配器引用, 此主题每次发生字段验证状态变化时都会触发 `subscribeFormValidation` 在即时形式上具有回调函数,此函数将执行,每次字段有效性变化,给予形式有效性状态

## 以计划构建字段

简略地解释如果一个计划作为参数通过, 如何用一个计划来构建字段, 窗体的构造方法会注意过程

### 字段

每个方案都用表单实例来解析 `serializeStructure` 方法,此选项将选择所有字段, 将地图上的所有窗体字段即时化, 并准备与构造器上传递的主题与窗体相互作用, 适配器负责选择此字段映射和构建组件树, 您可以检查反应适配器 `BuildTree` 方法

### 模板

以注册模板,窗体实例 `subscribeTemplates` 需要引用,这将创建一个依赖性列表,每次检查一次 `templateSubject$` ,请注意需要在所有字段被即时调用,否则所有模板可能不会相应注册

## 构建没有计划字段

如果您想要添加一个字段, 没有一个方案, 窗体实例有 `addField` 方法, 这将在窗体实例上添加一个字段, 并处理几个预先要求, 例如检查名称是否不存在并记录模板, 适配器有责任想出如何使这个字段打开

## 窗体组事件召回寄存器

`FormGroup` 实例提供了添加和删除窗体实例的方法,它们也允许您注册 `onData` 财务报告和审定财务报表 `onValid` 在形式组上的事件,焦点将是这两个可以被适配器使用的事件:

### 数据上的窗体组

窗体组 `onDataSubscription` 实例方法,让我们通过一个索引列表,以及每次引用任何形式实例的回调函数 `onData`,这对处理表格组很有用

### valid 上的窗体组

窗体组 `onValidSubscription` 实例方法 让您通过一个索引列表, 以及每次任何形式改变其有效性状态时都会引用的回调函数, 这对于处理表格组有用, 它会返回表格组有效性状态和每个个体形式有效性状态, 每次改变表格有效性状态时都会被触发

## 常见问题

### @bolttech/form-engine-core 是什么？

开发维护文件

### 如何安装 @bolttech/form-engine-core？

在项目目录运行 npm install @bolttech/form-engine-core，或使用 pnpm add / yarn add / bun add。

### @bolttech/form-engine-core 支持 TypeScript 吗？

支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。

### @bolttech/form-engine-core 支持 ESM 还是 CommonJS？

以 ES Module 形式发布，推荐使用 import 引入。在 CommonJS 项目中，Node\.js 20\.19\+ / 22\.12\+ 可以直接 require\(\) 不含顶层 await 的 ES Module，更早的版本需要改用动态 import\(\)。

### @bolttech/form-engine-core 可以商用吗？

@bolttech/form-engine-core 使用 未声明 许可。package\.json 没有声明许可证。没有许可证的代码默认保留全部权利，商用前请联系作者或查看仓库中的 LICENSE 文件。以上为概括，不构成法律意见，请以许可原文为准。

### @bolttech/form-engine-core 的下载量有多少？

根据 npm 官方下载统计，@bolttech/form-engine-core 在 2026/10/09 – 2026/11/07 这 30 天内被下载 1,731 次，日均约 58 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。

### @bolttech/form-engine-core 还在维护吗？

最新版本 1\.2\.3 发布于 2026/10/02（1 个月前）；至今共发布 110 个版本，其中过去 12 个月发布了 13 个；首次发布于 2024/06/13。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。