Registry /
testing / angular2-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 'angular2-json-schema-form';
✗ import { JsonSchemaFormModule } from '@angular2-json-schema-form';
Module for JSON Schema Form functionality, must be imported in your Angular module.
FrameworkModule
✓ import { FrameworkModule } from 'angular2-json-schema-form';
✗ import { MaterialDesignFrameworkModule } from 'angular2-json-schema-form';
Framework module for styling; you must import a specific framework (e.g., MaterialDesignFrameworkModule) separately.
MaterialDesignFrameworkModule
✓ import { MaterialDesignFrameworkModule } from 'angular2-json-schema-form';
✗ import { MaterialDesignFrameworkModule } from 'angular2-json-schema-form/material';
Provides Material Design styling for the form.
JsonSchemaFormComponent
✓ import { JsonSchemaFormComponent } from 'angular2-json-schema-form';
✗ import { JsonSchemaFormComponent } from 'angular2-json-schema-form/bundle';
Component class for the form; can be used in templates.
Shows how to import modules, configure Angular module, and use JsonSchemaFormComponent in a template with a form JSON object.
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { JsonSchemaFormModule, MaterialDesignFrameworkModule } from 'angular2-json-schema-form';
import { AppComponent } from './app.component';
@NgModule({
declarations: [AppComponent],
imports: [
BrowserModule,
JsonSchemaFormModule,
MaterialDesignFrameworkModule
],
bootstrap: [AppComponent]
})
export class AppModule { }
// In app.component.ts:
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
template: `
<json-schema-form
[form]="myForm"
[loadExternalAssets]="true"
(onChanges)="onChanges($event)">
</json-schema-form>
`
})
export class AppComponent {
myForm = {
"schema": {
"type": "object",
"title": "Example",
"properties": {
"name": { "type": "string" },
"age": { "type": "integer" }
}
},
"layout": []
};
onChanges(data: any) {
console.log('Form data changed:', data);
}
}
Errors
Common errors & fixes
ERROR in node_modules/angular2-json-schema-form/lib/src/shared/utility.class.d.ts:1:1 - error TS1436: Decorators are not valid here.
Angular version mismatch (probably Angular 6+).
fixUse an older version of the library or upgrade to a compatible Angular version.
Module not found: Error: Cannot resolve module '@angular/material'
@angular/material peer dependency missing.
fixInstall @angular/material: npm install @angular/material @angular/cdk
Can't bind to 'form' since it isn't a known property of 'json-schema-form'
JsonSchemaFormModule not imported in the module.
fixImport JsonSchemaFormModule in your NgModule.
No provider for JsonSchemaFormService!
Missing JsonSchemaFormModule or framework module import.
fixImport both JsonSchemaFormModule and a framework module (e.g., MaterialDesignFrameworkModule).
Upgrade
Version history
0.7.0-alpha.1latest on npm
Audit
Dependencies
@angular/cdkrequiredRequired for Angular Material components
@angular/commonrequiredAngular core module
@angular/corerequiredAngular core module
@angular/flex-layoutrequiredFor responsive layout
@angular/formsrequiredRequired for reactive forms
@angular/materialrequiredMaterial Design components
@angular/platform-browserrequiredAngular platform module
rxjsrequiredReactive extensions library