Registry /
development / angular6-json-schema-form
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.
JsonSchemaFormModule
✓ import { JsonSchemaFormModule } from 'angular6-json-schema-form'
✗ import { Angular6JsonSchemaFormModule } from 'angular6-json-schema-form'
The module is named JsonSchemaFormModule, despite the package name.
JsonSchemaFormService
✓ import { JsonSchemaFormService } from 'angular6-json-schema-form'
✗ import { JsonSchemaFormService } from 'angular6-json-schema-form/src/lib/json-schema-form.service'
Use the barrel export, not the deep import.
Framework
✓ import { Framework } from 'angular6-json-schema-form'
✗ import { Framework } from 'angular6-json-schema-form/src/lib/framework-library/framework'
Framework is re-exported from the main package.
WidgetLibraryService
✓ import { WidgetLibraryService } from 'angular6-json-schema-form'
✗ import { WidgetLibraryService } from 'angular6-json-schema-form/src/lib/widget-library/widget-library.service'
Use the barrel export.
Shows import and usage of JsonSchemaFormModule, the component tag, and a basic schema/layout.
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { JsonSchemaFormModule } from 'angular6-json-schema-form';
import { AppComponent } from './app.component';
@NgModule({
declarations: [AppComponent],
imports: [
BrowserModule,
JsonSchemaFormModule.forRoot()
],
bootstrap: [AppComponent]
})
export class AppModule { }
// In your component:
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
template: `<json-schema-form [schema]="schema" [layout]="layout"></json-schema-form>`
})
export class AppComponent {
schema = {
"type": "object",
"title": "Example Schema",
"properties": {
"name": { "type": "string", "title": "Name" },
"age": { "type": "integer", "title": "Age" }
},
"required": ["name"]
};
layout = [{ "key": "name" }, { "key": "age" }];
}
Errors
Common errors & fixes
ERROR in node_modules/angular6-json-schema-form/lib/json-schema-form.module.d.ts:1:22 - error NG6002: Appears in the NgModule.imports of AppModule, but itself has errors.
Missing Angular peer dependencies or incompatible versions.
fixEnsure @angular/core, @angular/common, @angular/forms, @angular/flex-layout are installed and compatible.
NullInjectorError: No provider for JsonSchemaFormService!
JsonSchemaFormModule.forRoot() not called in root module.
fixImport JsonSchemaFormModule.forRoot() in AppModule.
TypeError: Cannot read property 'schema' of undefined
The component's schema input is undefined.
fixInitialize the schema property in the component: schema = {}; or provide a valid JSON Schema object. Can't bind to 'layout' since it isn't a known property of 'json-schema-form'.
JsonSchemaFormModule not imported or not in the imports array of the current module.
fixImport JsonSchemaFormModule in the module that declares the component.
Audit
Dependencies
@angular/commonrequiredCore Angular module
@angular/corerequiredCore Angular module
@angular/formsrequiredReactive forms support
@angular/platform-browserrequiredBrowser platform utilities
@angular/flex-layoutrequiredFlex layout for responsive forms
rxjsrequiredObservables and reactive streams
ajvrequiredJSON Schema validation
lodash-esrequiredUtility functions