JSON 舍马表

这个项目是 杰森·斯克马 7 angular 20+ 的窗体构建器。 此工程包含消费 JSON Schema 前端代码 并生成一个可以在网络界面中使用的用户友好表单.

这个代码需要与后端同步工作 JSON Schema 表格验证 软件包.

开始

(1) 在您的工程中安装库

npm install @cleo/ngx-json-schema-form

(2) 进口 JSFComponent 直接输入您的独立组件 .

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 更改和窗体重建.

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<boolean>(true);
  readonly schemaData = signal<JSFSchemaData>(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 组件导入您的模板。 见下文实例.

  <jsf-component
   [schemaData]="schemaData()"
   [config]="config"
   (disableSubmit)="onDisableSubmit($event)"
   (formHeightChange)="onFormHeightChange($event)"
   (buttonEvent)="onButtonEvent($event)"
   (templateEvent)="onTemplateEvent($event)"
   (tabChange)="onTabChange($event)"
   (formReady)="onFormReady()">
  </jsf-component>

注意: 确保只通过有效的 JSON 计划对象 。 如果你还没有自己的计划, 你可以使用预配置的计划 projects/jsf-launcher/src/app/schemaV2.json 用来测试.