Install & Compatibility
Where this runs
No compatibility data collected yet for this library.
Code
Verified usage
Verified import paths — ran on the pinned version, not inferred.
NzSchemaComponent
✓ import { NzSchemaComponent } from 'nz-json-schema-form'
✗ import NzSchemaComponent from 'nz-json-schema-form'
The component is a named export, not a default export. This is an Angular standalone component.
NzSchema
✓ import { NzSchema } from 'nz-json-schema-form'
✗ import { Schema } from 'nz-json-schema-form'
The type is named NzSchema, not Schema. It corresponds to the JSON Schema object.
BaseField
✓ import { BaseField } from 'nz-json-schema-form'
✗ import BaseField from 'nz-json-schema-form'
BaseField is a named export used for creating custom widget components.
SchemaWidgetRegistryService
✓ import { SchemaWidgetRegistryService } from 'nz-json-schema-form'
✗ import { SchemaWidgetRegistry } from 'nz-json-schema-form'
The service name includes 'Service'. It is used to register custom widgets.
JSONSchemaTypes
✓ import { JSONSchemaTypes } from 'nz-json-schema-form'
✗ import { JSONSchemaType } from 'nz-json-schema-form'
The enum is plural: JSONSchemaTypes. It provides values like 'string', 'number', etc.
This code demonstrates how to create an Angular component that uses NzSchemaComponent to render a form from a JSON Schema definition.
import { Component } from '@angular/core';
import { NzSchemaComponent, NzSchema } 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']
};
}
Errors
Common errors & fixes
Cannot find module 'nz-json-schema-form' or its corresponding type declarations.
Missing dependency or not installed in node_modules.
fixRun 'npm install nz-json-schema-form' and ensure it's listed in package.json dependencies.
Property 'nzSchema' does not exist on type 'NzSchemaComponent'.
Using wrong input name. The input is named 'nzSchema', not 'schema' or 'NzSchema'.
fixUse [nzSchema]="schema" in the template.
SchemaWidgetRegistryService is not provided. Did you forget to add it to providers?
SchemaWidgetRegistryService must be provided at component or module level to use custom widgets.
fixAdd SchemaWidgetRegistryService to the providers array of your component or module.
Type 'undefined' is not assignable to type 'NzSchema'.
Initializing schema property as undefined without proper type handling.
fixInitialize schema with a valid NzSchema object or use the non-null assertion operator.
Audit
Dependencies
@angular/commonrequiredPeer dependency required for Angular components. Must match version ^20.0.0.
@angular/corerequiredPeer dependency required for Angular core functionality. Must match version ^20.0.0.
ng-zorro-antdrequiredPeer dependency for UI components. Must match version ^20.0.0.