nz-json-schema-form

Generate ng-zorro-antd form based on JSON Schema.

Peer Dependencies

• "@angular/common": "^18.0.0",
• "@angular/core": "^18.0.0",
• "ng-zorro-antd": "^18.0.0"

Usage

Install

npm install nz-json-schema-form

Basic

import { NzSchema, NzSchemaComponent } from 'nz-json-schema-form';

@Component({
  selector: 'app-form',
  standalone: true,
  imports: [NzSchemaComponent],
  template: '<nz-schema [nzSchema]="schema"></nz-schema>'
})
export class FormComponent {
  schema: NzSchema = {
    $schema: 'https://json-schema.org/draft/2020-12/schema',
    $id: 'https://example.com/product.schema.json',
    title: 'Product',
    description: "A product from Acme's catalog",
    type: 'object',
    properties: {
      productId: {
        description: 'The unique identifier for a product',
        type: 'number',
        title: 'Product Name'
      },
      productName: {
        description: 'Name of the product',
        type: 'string',
        title: 'Product Name'
      },
      tags: {
        description: 'Tags for the product',
        type: 'array',
        items: {
          type: 'string'
        },
        minItems: 1,
        uniqueItems: true,
        title: 'Tags'
      }
    },
    required: ['productId', 'productName']
  };
}

Customize Widget

Define a custom widget component and register it with SchemaWidgetRegistryService.

1. Define a custom widget component.

import { BaseField } from 'nz-json-schema-form';

@Component({
  //...
})
export class CustomInputComponent extends BaseField {
  //...
}

2. Register the custom widget component and use it in the schema.

import { JSONSchemaTypes, SchemaWidgetRegistryService } from 'nz-json-schema-form';

@Component({
  selector: 'app-form',
  standalone: true,
  imports: [NzSchemaComponent],
  providers: [SchemaWidgetRegistryService],
  template: '<nz-schema [nzSchema]="schema"></nz-schema>'
})
export class FormComponent {
  constructor(private schemaWidgetRegistry: SchemaWidgetRegistryService) {
    this.schemaWidgetRegistry.setWidget(
      JSONSchemaTypes.STRING,
      'custom-input',
      CustomInputComponent
    );
  }

  schema: NzSchema = {
    $schema: 'https://json-schema.org/draft/2020-12/schema',
    $id: 'https://example.com/product.schema.json',
    title: 'Product',
    description: "A product from Acme's catalog",
    type: 'object',
    properties: {
      productId: {
        description: 'The unique identifier for a product',
        type: 'string',
        widget: 'custom-input',
        title: 'Product Name'
      }
      // ...
    }
    // ...
  };
}