用途 本技能面向需要使用 Syncfusion Essential JS 2 Form Builder 的 TypeScript 或 JavaScript 项目，帮助开发者创建、排查或扩展可视化表单设计器。Form Builder 是一个可视化设计器，会生成由 schema 驱动的表单定义：用户可以把字段拖到画布上，在属性面板中配置字段，预览结果，并导出 schema 供 Form Renderer 使用。当主要任务是设计或编辑表单时，使用本技能；当主要任务是渲染已完成的 schema、处理提交值，或配置渲染器表单操作时，应改用 JavaScript Form Renderer 技能。
主要能力 通过 schema 属性加载初始表单。字段定义放在 properties 中，布局顺序由 layout 中的 propertyId 引用决定。字段既可以从 Basic、Advanced、Layout 工具箱分类中选择，也可以通过 toolboxCategories 或 toolboxItems 控制工具箱中出现的字段，并使用自定义模板。属性面板支持配置显示、校验、条件、布局和数据等设置，可以用 setProperty 和 getProperty 操作属性，并用 refresh() 刷新面板。组件还提供导出、预览、持久化、RTL、模式、模板和工具箱等配置项，支持关闭预览（enablePreview）和关闭导出（allowExport）。事件方面，支持字段拖拽开始、拖拽经过、放下以及属性变更事件。schema 可以审查、复制、导入或导出；其中，导入可以把已有 schema 重新载入设计器，导出则用于生成供 Form Renderer 复用的 schema。
使用方式 安装依赖：
npm install @syncfusion/ej2-form-builder @syncfusion/ej2-material3-theme
初始化 TypeScript 控件并绑定初始 schema：
import { FormBuilder } from '@syncfusion/ej2-form-builder';
const formBuilder: FormBuilder = new FormBuilder({ schema: { version: '0.1.0', properties: { emailAddress: { id: 'textbox_1785491685456_167', name: 'emailAddress', type: 'string', label: 'Email Address', textboxType: 'email', required: true, placeholder: 'Enter your email', widget: 'textbox' } }, layout: [{ type: 'field', propertyId: 'emailAddress' }], settings: { name: 'Untitled Form' } } });
formBuilder.appendTo('#formbuilder');
通过 npm run start 运行 TypeScript 应用后，就可以使用工具箱和属性面板编辑表单。完整 Webpack 配置、主题注册和 HTML 容器设置请参考入门文档。
常见模式 控制工具箱可用字段：
import { ComponentCategory, FormBuilder, FormWidgetType } from '@syncfusion/ej2-form-builder';
const formBuilder: FormBuilder = new FormBuilder({ toolboxCategories: [ { category: ComponentCategory.Basic, items: [FormWidgetType.Textbox, FormWidgetType.Textarea] }, { category: ComponentCategory.Advanced, items: [FormWidgetType.Date, FormWidgetType.DateRange] } ] }); formBuilder.appendTo('#formbuilder');
动态添加属性：
formBuilder.setProperty(FormWidgetType.Textarea, { key: 'enableRtl', label: 'Enable RTL', type: 'boolean', default: false });
注册自定义模板：
const formBuilder: FormBuilder = new FormBuilder({ toolboxItems: [{ type: FormWidgetType.Textbox, template: inputTemplate }] }); formBuilder.appendTo('#formbuilder');
模板值变化时，需要调用 setFieldValue 同步状态。对于可复用的完整 schema，使用 formTemplates；对于第三方控件，则使用自定义工具箱模板。
适用场景 适合构建可视化表单设计器、导入并二次编辑已有 schema、按需裁剪工具箱字段、扩展自定义字段属性，以及生成包含校验、条件、表达式、依赖下拉、动态范围、远程数据或 Data Grid 字段的 schema。在把设计器产物交给 Form Renderer 渲染之前，建议先在预览中验证布局和交互，再在 JSON 页签中检查并导出 schema。
限制与注意事项 本技能针对设计和编辑表单，不覆盖终端用户的运行时渲染、提交值处理和渲染器表单操作。schema 需满足以下约束：字段应具有唯一 name、稳定 id 以及受支持的 widget 与 type；layout 中每个字段节点必须引用有效的 propertyId；布局容器留在 layout 中，子字段放在 properties 中；校验、条件、表达式、范围和远程数据源需使用文档规定的 schema 结构。本技能资料未提供具体收费、价格、平台支持范围或性能数据，这些信息暂未提供。