{"id":21184855,"url":"https://github.com/freest10/angular4-json-schema-view","last_synced_at":"2026-05-10T03:11:42.882Z","repository":{"id":57179813,"uuid":"94363809","full_name":"Freest10/angular4-json-schema-view","owner":"Freest10","description":"Angular4 json-web-app","archived":false,"fork":false,"pushed_at":"2017-08-09T07:12:18.000Z","size":72,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-05-19T01:48:47.240Z","etag":null,"topics":["anglar4","angular-material","angular2","json-schema","json-schema-form","json-schema-view"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Freest10.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-06-14T18:59:27.000Z","updated_at":"2018-02-19T21:50:40.000Z","dependencies_parsed_at":"2022-09-14T03:30:56.483Z","dependency_job_id":null,"html_url":"https://github.com/Freest10/angular4-json-schema-view","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/Freest10/angular4-json-schema-view","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Freest10%2Fangular4-json-schema-view","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Freest10%2Fangular4-json-schema-view/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Freest10%2Fangular4-json-schema-view/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Freest10%2Fangular4-json-schema-view/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Freest10","download_url":"https://codeload.github.com/Freest10/angular4-json-schema-view/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Freest10%2Fangular4-json-schema-view/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":260346884,"owners_count":22995153,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["anglar4","angular-material","angular2","json-schema","json-schema-form","json-schema-view"],"created_at":"2024-11-20T18:11:46.710Z","updated_at":"2026-05-10T03:11:42.830Z","avatar_url":"https://github.com/Freest10.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Angular4-json-schema-view for web app\n\n![json-web-app-logo](https://user-images.githubusercontent.com/20557044/28751960-eabb6b82-751c-11e7-8939-9e45b98e0560.png)\n\nThere are two similar modules besides my. The detailed instruction of my module as well as the explanation of it will be produced soon.\n\nTo install from NPM and use in your own project\n```\nnpm install angular4-json-schema-view --save-dev\n```\n\n### Demo\n\u003ca href=\"https://github.com/Freest10/demo-angular4-json-schema-view\"\u003edemo angular4-json-schema-view\u003c/a\u003e\n\n### Add to your module\n\n```\nimport { NgModule }             from '@angular/core';\nimport { BrowserModule }        from '@angular/platform-browser';\n\nimport {JsonSchemaViewModule} from 'angular4-json-schema-view'\n\nimport { AppComponent }         from './app.component';\n\n@NgModule({\n  imports:      [ BrowserModule, JsonSchemaViewModule ],\n  declarations: [ AppComponent ],\n  bootstrap:    [ AppComponent ]\n})\nexport class AppModule { }\n```\n\n### Add to your component\n```\nimport { Component, OnInit } from '@angular/core';\n\n@Component({\n  selector: 'app-root',\n  template: `\n       \u003cjson-schema-view\n       [form]='yourJsonSchema'\n       [model]='yourModel'\n       [frameWorkName]='yourFrameWorkName'\n       (inctanceOfWidgets)='yourIncstanceOfWidgetsFn($event)'\n       (onChanges)='yourChangeFn($event)'\n       (onSubmit)='yourOnSubmitFn($event)'\n       \u003e\n  \u003c/json-schema-view\u003e`\n})\n```\n\n### Description\n\nJson-schema-view is not only a form generator, but also a simple way to create app by json.\nIt’s compatible with \u003ca href=\"http://schemaform.io/\"\u003eAngularJs\u003c/a\u003e and \u003ca href=\"https://www.npmjs.com/package/angular2-json-schema-form\"\u003eAngular2-json-schema-form\u003c/a\u003e.\n\nThis project was created to improve the lack of \u003ca href=\"https://www.npmjs.com/package/angular2-json-schema-form\"\u003eangular2-json-schema-form\u003c/a\u003e, which I encountered on a real project.\nTo do this, I had to write my own Json schema, based on \u003ca href=\"https://www.npmjs.com/package/angular2-json-schema-form\"\u003eangular2-json-schema-form\u003c/a\u003e.\n\nDisadvantages of the \u003ca href=\"https://www.npmjs.com/package/angular2-json-schema-form\"\u003eangular2-json-schema-form\u003c/a\u003e, which I decided on in my project, are presented below:\u003cbr/\u003e\n1. Problem: if you want to track the events of the widget, you need to specify them in the json schema.\n\nExample (problem):\n```\nform:{\n sendMes:{\n   type: “button”,\n   onClick: function(){...}\n }\n}\n```\nIf we get json from the server, then we cannot pass to function.\nSolution: we can receive instances of the created widgets and subscribe to events or call the functions of the widget we need\n\n\nExample (decision):\n```\n@Component({\n    template: `\u003cjson-schema-view\n                  [form]=\"yourJsonSchema\"\n                  [model]=\"yourModel\"\n                  (onChange)=\"yourChangeFn($event)\"\n                  (instanceOfWidgets)=\"yourIncstanceOfWidgetsFn($event)\"\n                  (onSubmit)=\"yourOnSubmitFn($event)\"\n                \u003e\n                \u003c/json-schema-view\u003e’\n})\nexport class AppComponent implements OnInit {\n\tprivate inctanceOfWidgetsSchema: any;\n\n\tyourIncstanceOfWidgetsFn(widgets){\n\t\tthis.inctanceOfWidgetsSchema = widgets;\n\t\t    this.inctanceOfWidgetsSchema[\"send\"].widgetSubject.subscribe(\n            (type) =\u003e {\n                if('buttonClick') this.fnClikc()\n            })\n        \n        //function which update list data find in list widget\n        this.inctanceOfWidgetsSchema[\"tasks\"].getSelectListByReqest(“/api/books”)\n    }\n        \n    fnClikc(){\n        //yourfunctionClikc\n    }\n}\n```\n\n2. You can pass value types of arrays and objects to the widgets.\nAnd the same widget can receive and return several types of values ​​of an array or object, it is enough to change only the type of the widget in \"form\".\n\nExample:\n```\n\"schema\": {\n    \"type\": \"object\",\n    \"properties\": {\n      \"favorite\": {\n        \"title\": \"Favorite\",\n        \"type\": \"object\", // you can change on “string”\n        \"enum\": [\n          \"1\",\n          \"undefined\",\n          \"null\",\n          \"NaN\"\n        ]\n      }\n    }\n```\n\u003eif “object” then out data is {“value:”...”, “text”:”...”} \u003cbr/\u003e\n\u003eif “string” then out data is “...”\n\nYou can create your own widgets with the types string, number, boolean, array and object as well as get the output of the corresponding types (\u003ca href=\"https://github.com/Freest10/demo-angular4-json-schema-view\"\u003eshow demo\u003c/a\u003e) \n\n3. Error processing.\nYou can give each widget an error text message, if it is required, i.e. if there is an insufficient number of characters (minlength), the number of characters (maxlength) is exceeded or the value does not match the pattern.\nYou can also set styles to a block with errors by assigning it a class\n(errorClass: “myErrorClass”).\n\nExample:\n```\n{\n  \"schema\": {\n    \"type\": \"object\",\n    \"properties\": {\n      \"last_name\": {\n        \"title\": \"Phone\",\n        \"type\": \"string\"\n      }\n    },\n    \"required\": [\"last_name\"]\n  },\n  \"form\": [\n    {\n      \"type\": \"section\",\n      \"htmlClass\": \"row\",\n      \"items\": [\n        {\n          \"key\": \"last_name\",\n          \"type\": \"string\",\n          \"minLength\": 4,\n          \"maxLength\": 10,\n          \"pattern\": \"[0-9]+\",\n          \"validateMessages\":{\n            \"required\": \"It is reqired field!\",\n            \"minLength\": \"Minlength of this field is 4 symbols!\",\n            \"maxLength\": \"Maxlength of this field is 10 symbols!\",\n            \"pattern\": \"No pattern, just numbers symbols!\"\n          }\n        }\n      ]\n    }\n  ]\n}\n```\n\u003ca href=\"https://github.com/Freest10/demo-angular4-json-schema-view\"\u003eshow demo\u003c/a\u003e \n\n4. If the data has been changed to null values, the Json schema will return the values ​​of these widgets as null, if the widget values ​​were not specified in the \"model\" and the widgets did not have a default value, then these widgets will not participate in the object when sending or changing the form.\n\nExample:\n```\nimport { Component, OnInit } from '@angular/core';\n\n@Component({\n  selector: 'app-root',\n  template: '\u003cjson-schema-view\n  [form]=\"schema\"\n  [model]=\"model\"\n  (onSubmit)=\"submitFn($event)\"\n\u003e',\n  styleUrls: ['./app.component.css']\n})\nexport class AppComponent implements OnInit {\nform = {\n  \"schema\": {\n    \"type\": \"object\",\n    \"properties\": {\n      \"first_name\": {\n        \"title\": \"Name\",\n        \"type\": \"string\"\n      }\n    }\n  },\n  \"form\": [\n    {\n      \"key\": \"first_name\",\n      \"type\": \"string\"\n    },\n    {\n      \"key\": \"send\",\n      \"title\": \"Submit\",\n      \"type\": \"submit\"\n    }\n  ]\n}\nmodel: any = {\n     \"first_name\": \"Alex\"\n};\nsubmitFn(value){\n\n /* if we delete value in input in browser and click submit button your value must be {  \"first_name\": null }\n    If there was no model, it would be value {}\n */\n console.log(value)\n}\n}\n```\n\nI left only the required functionality in the json diagram, that were verified by the real project.\n\nIf the widget written in the json schema is not correct, then by default the widget type will be “string”.\n\n### Customizing\n\nYou can create your own widgets or redefine existing ones and connect them.\n\nExample of a custom widget:\n```\nimport { Component, Input, OnInit } from '@angular/core';\nimport { AbstractControl } from '@angular/forms';\nimport { JsonSchemaFormService } from 'angular4-json-schema-view';\n\n@Component({\n  selector: 'custom-input-widget',\n  template: `\n    \u003cdiv\u003e\n        \u003c!-- Your code --\u003e\n    \u003c/div\u003e\n  `,\n})\nexport class CustomInputComponent implements OnInit {\n  formControl: AbstractControl;\n  controlValue: any;\n  controlName: string;\n  options: Object;\n  @Input() layoutNode;\n\n\n  constructor(\n    private jsf: JsonSchemaFormService\n  ) { }\n\n  ngOnInit() {\n    this.options = this.layoutNode.options;\n    this.jsf.initializeControl(this);\n  }\n\n  updateValue(event) {\n    this.jsf.updateValue(this, event.target.value);\n  }\n\n}\n```\n\n#### Connecting a Custom Widget\n\n```\nimport { BrowserModule } from '@angular/platform-browser';\nimport { NgModule } from '@angular/core';\nimport {JsonSchemaViewModule} from \"angular4-json-schema-view\"\nimport { AppComponent } from './app.component';\nimport { WidgetsService } from 'angular4-json-schema-view';\nimport { CustomInputComponent } from './custom_widgets/custom-input.component';\nimport { FormsModule } from '@angular/forms';\n\n@NgModule({\n  declarations: [\n    AppComponent,\n    CustomInputComponent\n  ],\n  imports: [\n    BrowserModule,\n    JsonSchemaViewModule,\n  ],\n  providers: [],\n  bootstrap: [AppComponent],\n  entryComponents: [CustomInputComponent]\n})\nexport class AppModule {\n\n  constructor(private widgetService: WidgetsService) {\n// connect thr custom widget\n   this.widgetService.registerWidget('string', CustomInputComponent); \n  }\n\n}\n```\n\n### Setting json schema.\n\n#### Setting global settings\n\n```\nimport { BrowserModule } from '@angular/platform-browser';\nimport { NgModule } from '@angular/core';\nimport {JsonSchemaViewModule} from \"angular4-json-schema-view\"\nimport { JsonSchemaShareOptionsService } from 'angular4-json-schema-view';\nimport {  MdSelectModule, MdButtonModule, MdCheckboxModule} from '@angular/material';\n\n@NgModule({\n  declarations: [\n    AppComponent,\n  ],\n  imports: [\n    BrowserModule,\n    JsonSchemaViewModule\n  ],\n  providers: [],\n  bootstrap: [AppComponent],\n})\nexport class AppModule {\n\n  constructor(private schemaShareOptions: JsonSchemaShareOptionsService) {\n     let shareOptions = {\n       \"apiUrl\": \"api2\", // a string to be added to the beginning of the query in all widgets\n       \"frameWorkName\": 'material-design'\n     }\n    // set global options of json schema\n    this.schemaShareOptions.setShareOptions(shareOptions);\n  }\n\n}\n```\n\n#### Setting local settings\n\n```\nimport { Component, OnInit } from '@angular/core';\n\n@Component({\n  selector: 'app-root',\n  template: `\u003cjson-schema-view \n    [frameWorkName]=\"frameWorkName\" \n    [options]=”options”\n    (inctanceOfWidgets)=\"inctanceOfWidgets($event)\"\u003e\u003c/json-schema-view\u003e\n  `,\n  styleUrls: ['./app.component.css']\n})\nexport class AppComponent implements OnInit {\n    // you can specify the name of the framework directly or through options\n    frameWorkName = \"material-design\";\n    //local settings for json schema\n    options = {\n        \"apiUrl\": \"api\",\n        \"frameWorkName\": 'material-design'\n    }\n}\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffreest10%2Fangular4-json-schema-view","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ffreest10%2Fangular4-json-schema-view","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffreest10%2Fangular4-json-schema-view/lists"}