# ng2-jsform > JSON schema form on Angular4+ Latest version **0.0.0-bata.3** (published 2018-01-03) · MIT license · 0 weekly downloads ## Install ```sh npm install ng2-jsform pnpm add ng2-jsform yarn add ng2-jsform bun add ng2-jsform ``` ## Health **Score 15/100 (F)** — status: abandoned. Positive: no vulnerabilities. Warnings: low downloads; no types; no esm support; pre 1.0. Negative: abandoned; low maintenance score. ## Facts | | | |---|---| | Version | 0.0.0-bata.3 | | Published | 2018-01-03 | | First published | 2018-01-03 | | Weekly downloads | 0 | | License | MIT | | TypeScript types | none | | Module format | CommonJS | | Dependencies | 24 | | Known vulnerabilities | 0 (+24 in 4 direct dependencies) | | Install scripts | no | | GitHub stars | 0 | | Author | Tatsuyoshi Tokumura | | Maintainers | tokumura | | Keywords | angular2, json schema, i18n, material, schema form | ## Links - npm: https://www.npmjs.com/package/ng2-jsform - Repository: https://github.com/milkeyway/ng2-jsform - Homepage: https://github.com/milkeyway/ng2-jsform#readme - Issues: https://github.com/milkeyway/ng2-jsform/issues - npm.io page: https://npm.io/package/ng2-jsform ## Dependencies (24) - [linq](https://npm.io/package/linq.md) ^3.0.8 - [rxjs](https://npm.io/package/rxjs.md) 5.5.2 - [jquery](https://npm.io/package/jquery.md) ^3.2.1 - [core-js](https://npm.io/package/core-js.md) ^2.4.1 - [methods](https://npm.io/package/methods.md) ^1.1.2 - [zone.js](https://npm.io/package/zone.js.md) ^0.8.4 - [hammerjs](https://npm.io/package/hammerjs.md) ^2.0.8 - [z-schema](https://npm.io/package/z-schema.md) ^3.17.0 - [raw-loader](https://npm.io/package/raw-loader.md) 0.5.1 - [typescript](https://npm.io/package/typescript.md) ^2.2.2 - [body-parser](https://npm.io/package/body-parser.md) ^1.17.2 - [@angular/cdk](https://npm.io/package/@angular/cdk.md) ^5.0.0-rc.2 - [@angular/core](https://npm.io/package/@angular/core.md) ^5.0.0 - [@angular/http](https://npm.io/package/@angular/http.md) ^5.0.0 - [@angular/forms](https://npm.io/package/@angular/forms.md) ^5.0.0 - [@angular/common](https://npm.io/package/@angular/common.md) ^5.0.0 - [@angular/router](https://npm.io/package/@angular/router.md) ^5.0.0 - [@angular/compiler](https://npm.io/package/@angular/compiler.md) ^5.0.0 - [@angular/material](https://npm.io/package/@angular/material.md) ^5.0.0-rc.2 - [@angular/animations](https://npm.io/package/@angular/animations.md) ^5.0.5 - [@angular/flex-layout](https://npm.io/package/@angular/flex-layout.md) 2.0.0-beta.10 - [json-schema-ref-parser](https://npm.io/package/json-schema-ref-parser.md) ^4.0.4 - [@angular/platform-browser](https://npm.io/package/@angular/platform-browser.md) ^5.0.0 - [@angular/platform-browser-dynamic](https://npm.io/package/@angular/platform-browser-dynamic.md) ^5.0.0 ## Alternatives - [@mapbox/jsonlint-lines-primitives](https://npm.io/package/@mapbox/jsonlint-lines-primitives.md) — 5.3M weekly downloads - [reftools](https://npm.io/package/reftools.md) — 3.5M weekly downloads - [@hey-api/openapi-ts](https://npm.io/package/@hey-api/openapi-ts.md) — 3.5M weekly downloads - [@mapbox/geojson-rewind](https://npm.io/package/@mapbox/geojson-rewind.md) — 2.4M weekly downloads - [turbo-stream](https://npm.io/package/turbo-stream.md) — 1.7M weekly downloads ## Recent versions - 0.0.0-bata.3 (latest) — 2018-01-03 - 0.0.0-bata.2 — 2018-01-03 - 0.0.0-bata.1 — 2018-01-03 ## README # Angular JSON Schema form + material + i18n ng2-jsform is a library that generates a form that operates on Angular 4 (over) from a JSON Schema format definition. [このページは機械翻訳です。日本語が読める方はこちらを参照してください。](./README.ja.md) ## feature ng2-jsform is compatible with internationalization. Dynamic display switching is possible if message data of each language is prepared. List the main functions. * material design * flex layout support * Internationalization * Custom widgets And, by linking widgets, you can generate various forms. * Function to dynamically switch display / non-display according to the value of form element * Function to dynamically switch input hints for each select item * The ability to set the parent-child relationship of two select * The ability to dynamically switch display / non-display of widgets grouped by selected items * Function to group selected items * The function to select the grouped items in the popup dialog * Function to select and deselect all selected items at once ## demos http://chotto-ii.com/ng2-jsform/demo/ ## docs Detail is, Http://chotto-ii.com/ng2-jsform/manual/ Please refer to. (Note: Japanese.) ## quick start If you want to check the operation, please follow the steps below. Note: Please set up node.js and yarn in advance. ``` git clone https://github.com/milkeyway/ng2-jsform-sample.git ng2-jsform-sample cd ng2-jsform-sample yarn install yarn start ``` ## Installation To build a development environment, please follow the procedure below. ### step1 Create a project of angular cli ``` npm i -g angular-cli ng new sample --style=scss --routing=true ``` ### step2 Set up Angular Material Please set up Angular Matetial with reference to the following. https://material.angular.io/guide/getting-started ``` yarn add @angular/material @angular/cdk @angular/animations hammerjs ``` #### Edit styles.cssEdit styles.css ``` @import "~@angular/material/prebuilt-themes/indigo-pink.css"; ``` #### Edit src/main.tsの編集 ``` import 'hammerjs'; ``` #### Edit index.html ``` ``` ### step3 Set up Angular Material ng2-jsform ``` cd sample yarn add ng2-jsform jquery @angular/flex-layout json-schema-ref-parser ``` #### Edit .angular-cli.json ``` "scripts": [ "../node_modules/jquery/dist/jquery.min.js", "../node_modules/json-schema-ref-parser/dist/ref-parser.min.js" ], ``` #### Edit app.module.ts ``` import { FormsModule } from '@angular/forms'; import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; import { FlexLayoutModule } from '@angular/flex-layout'; import { CustomMaterialModule } from './material.module'; import { JsFormModule, I18nService } from 'ng2-jsform'; import { TopComponent } from './top/top.component'; … @NgModule({ … declarations: [ … TopComponent ], imports: [ … FormsModule, BrowserAnimationsModule, FlexLayoutModule, CustomMaterialModule, JsFormModule ], providers: [ I18nService ], … }) ``` #### Edit app-routing.module.ts ``` import { TopComponent } from './top/top.component'; const routes: Routes = [ { path: '', component: TopComponent, pathMatch: 'full' }, { path: 'top', component: TopComponent, pathMatch: 'full' } ]; ``` ### step4 Writing an application I will create a simple application that can switch between Japanese and English. Please download the top component and definition from below and overwrite it in the app folder. http://chotto-ii.com/ng2-jsform/data/app.zip Rewrite app.component.html, app.component.ts, app.component.scss as follows. ```
日本語 English
footer
``` ``` import { Component, OnInit } from '@angular/core'; import { I18nService } from 'ng2-jsform'; import { DateAdapter, NativeDateAdapter } from '@angular/material'; import { messageJa, messageEn } from './defs'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.scss'] }) export class AppComponent implements OnInit { title = 'app'; pageView = true; lang = 'ja'; constructor( private dateAdapter: DateAdapter, private i18n: I18nService ) { } ngOnInit() { this.dateAdapter.setLocale('ja-JP'); this.i18n.setDictionary(messageJa); } changeLang() { this.pageView = false; if ( this.lang === 'ja') { this.dateAdapter.setLocale('ja-JP'); this.i18n.setDictionary(messageJa); } else { this.dateAdapter.setLocale('en-US'); this.i18n.setDictionary(messageEn); } setTimeout(() => { this.pageView = true; }, 100); } } ``` ``` .fill-remaining-space { flex: 1 1 auto; } mat-button-toggle { color: #fff!important; } ``` ### step4 Start-up It is useful to add --open to ng serve so that the browser opens automatically at run time. #### Edit package.json ``` "scripts": { … "start": "ng serve --open", … }, ``` #### Start-up ``` yarn start ``` Please access http: // localhost: 4200 / from the browser. ## Dependencies ng2-jsformは、以下に依存します。 * Angular 4 or over * Angular Material * Angular flex-layout * jQuery * json-schema-ref-parser ## TODO * Draft 6 automatic conversion of JSON Schema's Draft 4 * Custom validator * textarea * file * WAI-ARIA compatible ## License This software is released under the MIT License, see LICENSE.txt. --- _Source: https://npm.io/package/ng2-jsform · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._