基本的な使い方

6個の入力データ

ng2-jsformは、6個の入力データを使ってformを生成します。

データ名 内容 備考
page ページの定義データ 複数ページを識別するためのページIDを定義します。
schema JSON Schema draft4 またはdraft6形式のJSON Schema
layout formのレイアウトの定義  
message 項目名やメッセージの定義 この定義を入れ替えることで言語を変更します
master マスタデータ select/radioで使用するコードとキーの定義
data 規定値または更新時の値  

注釈

JSON Schemaには、defaultで項目の規定値を定義できますが、 登録・更新やリセット(クリア)を統一して処理するために、 dataを指定してください。

特にArray要素は、dataを指定しないと初期表示されないので注意してください。

コードサンプル

設定例:

<js-form
  [page]="yourPage"
  [schema]="yourJsonSchema"
  [layout]="yourLayout"
  [message]="yourMessage"
  [master]="yourMaster"
  [data]="yourData"
  (onClick)="submit($event)">
</js-form>

入力を1つのオブジェクトにまとめることもできます:

combine = {
  page: {
    pageID: yourPageId
  },
  schema: yourJsonSchema,
  layout: yourLayout,
  message: yourMessage,
  master: yourMaster,
  data: yourData
};

シングルinputモードの例:

<js-form
  [combine]="combine",
  (onClick)="submit($event)">
</js-form>

submitボタンのクリックでformの入力データをJSON Schemaで定義した構造で受け取ることができます。

submitクリック時の処理コード例:

submit(event: any) {
  // evebt.kindはクリックされたボタン種別
  switch (event.kind) {
    case 'submit':
      console.log(event.obj); // event.obj : 入力された値(JSON形式)
      break;
    case 'user_button_kind':
      // kindに応じた処理
      break;
  }
}