# nz-json-schema-form

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

## Peer Dependencies

- `"@angular/common": "^19.0.0"`,
- `"@angular/core": "^19.0.0"`,
- `"ng-zorro-antd": "^19.0.0"`

## 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 { JSONSchemaTypes, SchemaWidgetRegistryService } from 'nz-json-schema-form';

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