nz-json-schema-form

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

Usage

$3

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

$3

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

@Component({
selector: 'app-form',
imports: [NzSchemaComponent],
template: ''
})
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']
};
}
`

$3

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: ''
})
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'
}
// ...
}
// ...
};
}
``