nz-json-schema-form/README.md

Schema form for JSON schema

# nz-json-schema-form

Generate [ng-zorro-antd](https://github.com/NG-ZORRO/ng-zorro-antd) form based on JSON Schema.

## Usage

### Install

```bash
npm install nz-json-schema-form
```

### Basic

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

@Component({
  selector: 'app-form',
  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.

    ```typescript
    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.
  
    ```typescript
    import { inject } from '@angular/core';
    import { JSONSchemaTypes, SchemaWidgetRegistryService } from 'nz-json-schema-form';
    
    @Component({
      imports: [NzSchemaComponent],
      providers: [SchemaWidgetRegistryService],
      template: '<nz-schema [nzSchema]="schema"></nz-schema>'
    })
    export class FormComponent {
      constructor() {
        const schemaWidgetRegistry = inject(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'
          }
          // ...
        }
        // ...
      };
    }
    ```