ng2-jsformの概要

著者:T.Tokumura
出版:http://chotto-ii.com/

ng2-jsformは、JSON Schema [1] 形式の定義体からAngular4(over) [2] 上で 動作するformを生成するライブラリです。

特徴

ng2-jsformは、国際化に対応しています。 各言語のメッセージデータを用意すれば、動的な表示切替が可能です。

  • materialデザイン
  • flexレイアウト対応
  • 国際化対応
  • カスタムwidgets

widgets(表示部品)間の連携機能で多彩なformを自動生成できます。

  • form要素の値に応じて、表示・非表示を動的に切り替える機能
  • select項目毎にinputヒントを動的に切り替える機能
  • 2つのselectの親子関係を設定する機能
  • 選択した項目でグループ化されたwidgetsの表示・非表示を動的に切り替える機能
  • 選択項目をグルーピングする機能
  • グルーピングした項目をポップアップダイアログで選択する機能
  • 選択項目を一括して選択・非選択する機能

依存関係

ng2-jsformは、以下に依存します。

  • Angular 4 or over
  • Angular Material
  • Angular flex-layout
  • jQuery
  • json-schema-ref-parser

制限事項

ng2-jsformは、以下の制限があります。

  • sectionのネスト (wrapperを使ってください。)
  • 1つのスキーマ要素に複数の入力フォームの割当(最後に入力されたものが採用されます。)
  • Arrayの追加時の既定値は第1要素で指定したものになります。

課題

  • JSON SchemaのDraft4 のDraft6自動変換
  • カスタムバリデータ
  • textarea
  • file
  • WAI-ARIA対応

脚注

[1]JSON Schemaとは、オブジェクトのデータ構造、構造の正当性(バリデーション)、およびオブジェクトを操作するためのAPI仕様の定義体のことです。
[2]Angularとは、グーグル(Google)とコミュニティによって開発が進められているSingle Page Applicationを開発するためのフルスタックJavaScriptフレームワークです。