# @cleo/ngx-json-schema-form 中文文档 规范地址：https://npmcn.com/package/%40cleo/ngx-json-schema-form/ 版本：7\.0\.6 npm 元数据更新时间：2026-07-20T20:42:32.239Z 中文译文更新时间：2026-11-10T01:09:05.663Z 软件包许可：未声明 本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。 原始 npm 页面：https://www.npmjs.com/package/%40cleo/ngx-json-schema-form 原文对照：https://npmcn.com/package/%40cleo/ngx-json-schema-form/?lang=original 项目主页：https://github.com/cleo/ngx-json-schema-form#readme 源码仓库：https://github.com/cleo/ngx-json-schema-form ## 关键信息（来自 npm 元数据） - 包体积（解压后）：529 kB，5 个文件 - 模块格式：ES Module - TypeScript 类型：包内自带 - 运行依赖：2 个 - peer 依赖：@angular/common ^20\.0\.0，@angular/core ^20\.0\.0，@angular/forms ^20\.0\.0，bootstrap-sass ^3\.4\.3，rxjs ^7\.8\.0，ag-grid-community \>=28\.0\.0，ag-grid-angular \>=28\.0\.0 - 首次发布：2020-07-27T20:57:02.604Z - 最新版本发布：2026-07-20T20:42:31.977Z - 近 30 天下载量：5482（2026-10-10 至 2026-11-08，npm 官方下载统计） - 已发布版本数：45（近 12 个月 10 个） ## 中文简介 这个项目是 [杰森·斯克马 7](http://json-schema.org/) angular 20+ 的窗体构建器。 这个工程包含消费JSON Schema的前端代码,并生成一个用户友好的形式,可以在网页界面中使用. ## 安装 ```sh npm install @cleo/ngx-json-schema-form ``` 也可以使用：`pnpm add @cleo/ngx-json-schema-form`、`yarn add @cleo/ngx-json-schema-form`、`bun add @cleo/ngx-json-schema-form` ## README # JSON 舍马表 这个项目是 [杰森·斯克马 7](http://json-schema.org/) angular 20+ 的窗体构建器。 此工程包含消费 JSON Schema 前端代码 并生成一个可以在网络界面中使用的用户友好表单. 这个代码需要与后端同步工作 [JSON Schema 表格验证](https://www.npmjs.com/package/@cleo/ngx-json-schema-form-validation) 软件包. ### 开始 (1) 在您的工程中安装库 ``` npm install @cleo/ngx-json-schema-form ``` (2) 进口 `JSFComponent` 直接输入您的独立组件 . ```typescript import { Component, ViewChild, signal } from '@angular/core'; @Component({ selector: 'example', standalone: true, imports: [JSFComponent], templateUrl: 'example.component.html', styleUrls: ['./example.component.scss'] }) export class ExampleComponent { } ``` (3) 配置您的角组件以使用 JSON Schema 表格。 参阅以下实例以及下列关于必要步骤的详细清单. - 创建一个 `JSFConfig` 对象以控制常用配置项目 : - 如果区域相撞 - 如果各节之间有分隔 - 如果默认扩展外段 - 创建一个 `JSFSchemaData` 对象通过您的 JSON Schema 7 对象和一个相应的值对象。 该部分将在内部将这些模型转化为其数据模型. - 在组件中创建提交按钮 。 听着 `disableSubmit` 从 JSON Schema 表格中释放出的事件,并禁用您的提交按钮. - 创建一个 `ViewChild` 属性以引用 `JSFComponent`。使用它通过调用来获取已提交的窗体值 `this.schemaFormComponent.getFormValues()`。 。 。 . - \[可选 倾听 `formHeightChange` 从 JSON Schema 表格中释放出的事件. - \[可选 倾听 `buttonEvent` 用于处理按钮的事件,单击计划中定义的按钮。 事件发出a `JSFEventButton` 有按钮的钥匙和目标. - \[可选 倾听 `templateEvent` 从自定义模板处理事件的事件。 事件发出a `JSFTemplateEvent` 带有模板的密钥和目标路径. - \[可选 倾听 `tabChange` 当活动标签更改时,需要通知的事件。 事件从 JSON schema 中释放出标签的属性密钥 . - \[可选 倾听 `formReady` 当窗体的内部结构(FormGroup、控件和数据项)从当前结构中构建出来后,将会通知的事件 `schemaData`。这是了解表格准备阅读的可靠方式(例如通过 `getFormValues()` 或者说 `formGroup.get(...)`),它即使形式产生无值(例如,一个全隐藏或只使用模板的图案)也会发出. 每当它再次发出 `schemaData` 更改和窗体重建. ```typescript import { Component, ViewChild, signal } from '@angular/core'; import { JSFComponent, JSFConfig, JSFSchemaData, JSFEventButton, JSFTemplateEvent } from '@cleo/ngx-json-schema-form'; @Component({ selector: 'example', standalone: true, imports: [JSFComponent], templateUrl: 'example.component.html', styleUrls: ['./example.component.scss'] }) export class ExampleComponent { @ViewChild(JSFComponent, { static: false }) schemaFormComponent!: JSFComponent; readonly config: JSFConfig = { enableCollapsibleSections: false, showSectionDivider: true, expandOuterSectionsByDefault: true, }; readonly isSubmitDisabled = signal(true); readonly schemaData = signal(new JSFSchemaData(schema, values)); // this event allows you to enable/disable the submit button in the parent container onDisableSubmit(disableSubmit: boolean): void { this.isSubmitDisabled.set(disableSubmit); } // this event allows you to modify parent container height to match the height of the form onFormHeightChange(formHeight: number): void { } // this event is emitted when a schema-defined button is clicked onButtonEvent(event: JSFEventButton): void { } // this event is emitted when a custom template triggers an event onTemplateEvent(event: JSFTemplateEvent): void { } // this event emits the key of the active tab whenever it changes onTabChange(tabKey: string): void { } // this event is emitted once the form structure has been built from the schemaData, // and again whenever a new schema is provided and the form is rebuilt onFormReady(): void { } getJSFFormValues(): void { const jsonData = this.schemaFormComponent.getFormValues(); } } ``` (4) 将 JSF 组件导入您的模板。 见下文实例. ```HTML ``` _注意: 确保只通过有效的 JSON 计划对象 。 如果你还没有自己的计划, 你可以使用预配置的计划 `projects/jsf-launcher/src/app/schemaV2.json` 用来测试._ ## 常见问题 ### @cleo/ngx-json-schema-form 是什么？ 这个项目是 杰森·斯克马 7 angular 20\+ 的窗体构建器。 这个工程包含消费JSON Schema的前端代码,并生成一个用户友好的形式,可以在网页界面中使用\. ### 如何安装 @cleo/ngx-json-schema-form？ 在项目目录运行 npm install @cleo/ngx-json-schema-form，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：@angular/common（^20\.0\.0）、@angular/core（^20\.0\.0）、@angular/forms（^20\.0\.0）、bootstrap-sass（^3\.4\.3）、rxjs（^7\.8\.0）、ag-grid-community（\>=28\.0\.0）、ag-grid-angular（\>=28\.0\.0）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。 ### @cleo/ngx-json-schema-form 支持 TypeScript 吗？ 支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。 ### @cleo/ngx-json-schema-form 支持 ESM 还是 CommonJS？ 以 ES Module 形式发布，推荐使用 import 引入。在 CommonJS 项目中，Node\.js 20\.19\+ / 22\.12\+ 可以直接 require\(\) 不含顶层 await 的 ES Module，更早的版本需要改用动态 import\(\)。 ### @cleo/ngx-json-schema-form 可以商用吗？ @cleo/ngx-json-schema-form 使用 未声明 许可。package\.json 没有声明许可证。没有许可证的代码默认保留全部权利，商用前请联系作者或查看仓库中的 LICENSE 文件。以上为概括，不构成法律意见，请以许可原文为准。 ### @cleo/ngx-json-schema-form 的下载量有多少？ 根据 npm 官方下载统计，@cleo/ngx-json-schema-form 在 2026/10/10 – 2026/11/08 这 30 天内被下载 5,482 次，日均约 183 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。 ### @cleo/ngx-json-schema-form 还在维护吗？ 最新版本 7\.0\.6 发布于 2026/07/21（3 个月前）；至今共发布 45 个版本，其中过去 12 个月发布了 10 个；首次发布于 2020/07/28。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。