# @bpmn-io/form-js 中文文档

规范地址：https://npmcn.com/package/%40bpmn-io/form-js/

版本：2\.2\.0
npm 元数据更新时间：2026-11-06T12:25:34.439Z
中文译文更新时间：2026-11-08T13:08:24.989Z
软件包许可：SEE LICENSE IN LICENSE

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

原始 npm 页面：https://www.npmjs.com/package/%40bpmn-io/form-js
原文对照：https://npmcn.com/package/%40bpmn-io/form-js/?lang=original
项目主页：https://github.com/bpmn-io/form-js#readme
源码仓库：https://github.com/bpmn-io/form-js

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

- 包体积（解压后）：8.6 MB，22 个文件
- 模块格式：ESM + CJS
- TypeScript 类型：包内自带
- 运行依赖：3 个
- 首次发布：2021-02-24T14:56:28.937Z
- 最新版本发布：2026-11-06T12:25:34.260Z
- 近 30 天下载量：57197（2026-10-09 至 2026-11-07，npm 官方下载统计）
- 已发布版本数：146（近 12 个月 23 个）

## 中文简介

查看和编辑表单 - 由 bpmn.io 提供动力

## 安装

```sh
npm install @bpmn-io/form-js
```

也可以使用：`pnpm add @bpmn-io/form-js`、`yarn add @bpmn-io/form-js`、`bun add @bpmn-io/form-js`

## README

# @bpmn-io/form-js (英语)

[![CI](https://github.com/bpmn-io/form-js/workflows/CI/badge.svg)](https://github.com/bpmn-io/form-js/actions?query=workflow%3ACI)

[视图](https://npmcn.com/package/%40bpmn-io/form-js-viewer), (中文(简体) ), [编辑](https://npmcn.com/package/%40bpmn-io/form-js-editor) 财务报告和审定财务报表 [模拟](https://npmcn.com/package/%40bpmn-io/form-js-playground/) 基于JSON的表格.

## 使用量

此库输出 a [窗体查看器](https://npmcn.com/package/%40bpmn-io/form-js-viewer), (中文(简体) ), [编辑器](https://npmcn.com/package/%40bpmn-io/form-js-editor) 财务报告和审定财务报表 [游乐场](https://npmcn.com/package/%40bpmn-io/form-js-playground)。 。 。 .

### 显示窗体

以 [窗体计划](https://npmcn.com/package/%40bpmn-io/form-js/docs/FORM_SCHEMA.md) 和现有数据:

```javascript
import { Form } from '@bpmn-io/form-js';

const schema = {
  type: 'default',
  components: [
    {
      key: 'creditor',
      label: 'Creditor',
      type: 'textfield',
      validate: {
        required: true,
      },
    },
  ],
};

const data = {
  creditor: 'John Doe Company',
};

const form = new Form({
  container: document.querySelector('#form'),
});

await form.importSchema(schema, data);

form.on('submit', (event) => {
  console.log(event.data, event.errors);
});
```

见 [查看器文档](https://npmcn.com/package/%40bpmn-io/form-js/packages/form-js-viewer) 详细情况.

### 创建和编辑窗体

创建新窗体或编辑出局窗体 :

```javascript
import { FormEditor } from '@bpmn-io/form-js';

const formEditor = new FormEditor({
  container: document.querySelector('#form-editor'),
});

await formEditor.importSchema(schema);
```

见 [编辑文档](https://npmcn.com/package/%40bpmn-io/form-js/packages/form-js-editor) 详细情况.

### 用输入和输出数据创建和模拟窗体

以输入和输出数据创建和模拟窗体 :

```javascript
import { FormPlayground } from '@bpmn-io/form-js';

const schema = {
  type: 'default',
  components: [
    {
      key: 'creditor',
      label: 'Creditor',
      type: 'textfield',
      validate: {
        required: true,
      },
    },
  ],
};

const data = {
  creditor: 'John Doe Company',
};

const formPlayground = new FormPlayground({
  container: document.querySelector('#form-playground'),
  schema,
  data,
});
```

见 [游乐场文档](https://npmcn.com/package/%40bpmn-io/form-js/packages/form-js-playground) 详细情况.

### 从窗体获取计划变量

使用 `getSchemaVariables` 用于检索在表单图中定义的变量。 这有助于收集以某种形式消耗和生成的数据.

```javascript
import { getSchemaVariables } from '@bpmn-io/form-js';

const variables = getSchemaVariables(schema);

console.log('Schema variables', variables);
```

还可以区分投入变量和产出变量:

```javascript
import { getSchemaVariables } from '@bpmn-io/form-js';

const outputVariables = getSchemaVariables(schema, { inputs: false });
const inputVariables = getSchemaVariables(schema, { outputs: false });
```

## 资源

-   [演示](https://demo.bpmn.io/form)
-   [问题](https://github.com/bpmn-io/form-js/issues)
-   [更改日志](https://npmcn.com/package/%40bpmn-io/form-js/CHANGELOG.md)
-   [窗体图](https://npmcn.com/package/docs/FORM_SCHEMA.md)

## 许可证

B. 《公约》条款之下的使用 [bpmn.io 许可证](http://bpmn.io/license)。 。 。 .

## 常见问题

### @bpmn-io/form-js 是什么？

查看和编辑表单 - 由 bpmn\.io 提供动力

### 如何安装 @bpmn-io/form-js？

在项目目录运行 npm install @bpmn-io/form-js，或使用 pnpm add / yarn add / bun add。

### @bpmn-io/form-js 支持 TypeScript 吗？

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

### @bpmn-io/form-js 支持 ESM 还是 CommonJS？

同时提供 ES Module 与 CommonJS 入口，import 和 require\(\) 都可以使用，打包工具会自动选择合适的版本。

### @bpmn-io/form-js 可以商用吗？

@bpmn-io/form-js 使用 SEE LICENSE IN LICENSE 许可。许可条款写在包内的独立文件中，请阅读该文件确认可否商用。以上为概括，不构成法律意见，请以许可原文为准。

### @bpmn-io/form-js 的下载量有多少？

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

### @bpmn-io/form-js 还在维护吗？

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