ng-zorro-form-design

面向 Angular 17 + ng-zorro-antd 的可视化表单设计器：拖拽搭建、JSON 导入导出、代码生成、嵌入模式。

npm 包名： @jinmutech/ng-zorro-form-design（与 @jinmutech/ngx-monaco-editor 同属 JinmuTech scope）。
本项目为基于 ng-zorro-antd 的表单设计器，非 ng-zorro 官方包。

English: A drag-and-drop form designer for Angular 17 and ng-zorro-antd with JSON/code export and embed mode.

特性

• 拖拽设计表单（栅格、表格、标签页、卡片等布局）
• JSON 导入 / 导出 / 在线编辑（Monaco）
• 生成 HTML / TypeScript / CSS 代码
• 嵌入模式（embedded）与保存事件
• 中英文 i18n
• 164 单元测试

在线体验

克隆仓库后本地运行 Demo（见下方「快速开始」）。
部署静态 Demo：npm run build:demo，将 dist/ng-zorro-form-design 发布到 Gitee Pages / GitHub Pages。

版本与兼容

| 项 | 版本 | |----|------| | Angular | 17.x（peerDependencies） | | ng-zorro-antd | 17.x | | TypeScript | ~5.4.x（Angular 17.3 要求 <5.5） | | Node | 18+ 或 20 LTS（推荐，见 .nvmrc） | | RxJS | 7.8+ |

历史版本：Angular 14 快照 tag v0.0.142-ng14（不再维护）。

快速开始（Demo）

git clone https://gitee.com/jzwsoft/ng-zorro-form-design.git
cd ng-zorro-form-design
npm install
npm start

浏览器打开 http://localhost:4200/designer

作为库安装

npm install @jinmutech/ng-zorro-form-design ng-zorro-antd ngx-monaco-editor-v2 monaco-editor @ngx-translate/core @ngx-translate/http-loader

1. 引入模块

import { DesignerModule } from '@jinmutech/ng-zorro-form-design';

@NgModule({
  imports: [
    DesignerModule,
    // 宿主应用需已配置 BrowserAnimationsModule、HttpClientModule、ng-zorro、TranslateModule
  ]
})
export class AppModule {}

2. 模板使用

独立设计器页面：

<app-designer></app-designer>

嵌入模式（隐藏顶栏 Logo，导入 JSON 走 Modal，显示保存按钮）：

<app-designer
  [embedded]="true"
  [initialFormModel]="formJson"
  (formSave)="onSave($event)"
  (formChange)="onChange($event)">
</app-designer>

3. Monaco 静态资源

在宿主 angular.json 的 assets 中加入：

{
  "glob": "**/*",
  "input": "node_modules/monaco-editor",
  "output": "assets/monaco"
}

库内 Monaco 懒加载模块默认 baseUrl: './assets'，宿主需将 monaco-editor 复制到 assets/monaco/（见上方 angular.json 示例）。

4. i18n 资源

将库内 assets/i18n/ 合并到宿主，或配置 TranslateHttpLoader 指向相同路径。

构建与测试

npm run build          # Demo 应用
npm run test:ci        # 单元测试（Headless Chrome）
npm run packagr        # 库产物 → dist/

导出 API

import {
  DesignerModule,
  DesignerComponent,
  PlayModule,
  PlayComponent,
  FormModel
} from '@jinmutech/ng-zorro-form-design';

企业支持

• 官网：jinmutech.cn
• 定制实施、私有化部署、行业模板与后端表单引擎集成
• Issue：Gitee Issues

参与贡献

见 CONTRIBUTING.md。升级记录见 docs/upgrade-angular-17.md。

License

MIT © JinmuTech