基本的な使い方¶
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;
}
}