=========================
基本的な使い方
=========================

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

.. csv-table::
   :header: "データ名", "内容", "備考"
   :widths: 20, 40, 40

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

.. note::
   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>

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

  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;
    }
  }