@cleo/ngx-json-schema-form

JSON Schema Form

This project is a JSON Schema 7 form builder for Angular 8+. This project contains the front end code that consumes JSON Schema and generates a user friendly form that can be used in a web interface.

This code needs to work in tandem with the back end JSON Schema Form Validation package.

Getting Started

(1) Install the library in your project

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

(2) Import the JSFModule into your project.

@NgModule({
  declarations: [],
  exports: [],
  imports: [
    JSFModule
  ],
  providers: []
})
export class ExampleModule { }

(3) Configure your Angular component to use the JSON Schema Form. Reference the example below as well as a detailed list below of the necessary steps.

• Create a JSFConfig object to control the commonly used confguration items:
  • If this is an edit case
  • If sections are collapsible
  • If there are dividers between sections
• Inject the JSFDataItemService into your constructor and use the getFormDataItems() method to transform the JSON 7 Schema and corresponding values into an array of FormDataItems. FormDataItems are the data model that the JSF understands and uses to generate the angular forms.
• Create a Submit button in your component. Listen to the disableSubmit event emitted from the JSON Schema Form and disable your submit button.
• Create a ViewChild property in your component to reference your JSFComponent. Use this property to get the submitted form values by calling this.schemaFormComponent.getFormValues();
• [Optional] Listen to the formHeightChange event emitted from the JSON Schema Form.

@Component({
  selector: 'example',
  templateUrl: 'example.component.html',
  styleUrls: ['./example.component.scss']
})
export class ExampleComponent {
  @ViewChild(JSFComponent, { static: false }) schemaFormComponent: JSFComponent;
  config = new JSFConfig(false, false, true);
  formDataItems: FormDataItem[];
  isSubmitDisabled = true;

  constructor(private jsfDataItemService: JSFDataItemService) {
    // grab schema and values from some service
    this.formDataItems = this.formDataItemService.getFormDataItems(schema, values, this.config.isEdit);
  }

  // this event allows you to enable/disable the submit button in the parent container
  onDisableSubmit(disableSubmit: boolean): void {
    this.isSubmitDisabled = disableSubmit;
  }

  // this event allows you to modify parent container height to match the height of the form
  onFormHeightChange(formHeight: number): void { }

  getJSFFormValues(): void {
    const jsonData = this.schemaFormComponent.getFormValues();
  }
}

(4) Import the JSFComponent into your template. See example below.

  <jsf-component
   [formDataItems]="formDataItems"
   [config]="config"
   (disableSubmit)="onDisableSubmit($event)"
   (formHeightChange)="onFormHeightChange($event)">
  </jsf-component>

Note: be sure to only pass in a valid JSON schema object. If you don't already have your own schemas, you can use a preconfigured schema projects/jsf-launcher/src/app/schemaV2.json to test with.

Changelog

[6.0.0] (2023-07-20)

Enhancement

• Update to Angular 15, TypeScript 4.9.5, and Node 18.12.0