Angular Json Schema のlayout属性の仕様

イシュー

"layout": [
    { "type": "flex", "flex-flow": "row wrap", "items": [ "first_name", "last_name" ] },
 ]

In addition to a large number of user-settable options, Angular JSON Schema Form also has the ability to load custom form control widgets and layout frameworks. All forms are constructed from these basic components. The default widget library includes all standard HTML 5 form controls, as well as several common layout patterns, such as multiple checkboxes and tab sets. The default framework library includes templates to style forms using Material Design, Bootstrap 3, or Bootstrap 4 (or plain HTML with no formatting, which is not useful in production, but can be helpful for development and debugging).

訳:ユーザー設定可能な多数のオプションに加えて、Angular JSON Schema Formにはカスタムフォームコントロールウィジェットやレイアウトフレームワークを読み込む機能もあります。すべてのフォームはこれらの基本コンポーネントから構成されています。デフォルトのウィジェットライブラリには、すべての標準HTML 5フォームコントロール、および複数のチェックボックスやタブセットなどのいくつかの一般的なレイアウトパターンが含まれています。デフォルトのフレームワークライブラリには、Material Design、Bootstrap 3、またはBootstrap 4を使用してフォームをスタイル設定するためのテンプレートが含まれています。

Understanding JSON Schema

Object

object — Understanding JSON Schema 7.0 documentation

Angular Schema Form の仕様はこれか?

{
  key: "address.street"、//ドットはモデル上の属性を表す
  type: "text"、//フィールドの種類
  title: "Street"、//利用可能であればスキーマから取得したフィールドのタイトル
  notitle:false、//タイトルを隠すにはtrueに設定
  description: "Street name"、//可能であればスキーマから取得した説明はHTMLにすることができます
  validationMessage:"Oh noes, please write a proper address"、//カスタム検証エラーメッセージ
  onChange: "valueChanged(form.key、modelValue)"、// onChangeイベントハンドラ、式または関数
  feedback:false、//インラインフィードバックアイコン
  disableSuccessState:false、//検証が成功したフィールドに 'has-success'クラスを適用しない場合はtrueに設定します
  disableErrorState:false、//検証に失敗したフィールドに 'has-error'クラスを適用しないようにするにはtrueを設定します
  placeholder: "Input ..."、//入力とテキストエリアのプレースホルダ
  ngModelOptions:{...}、// ng-model-optionsに渡されます
  readonly:true、//スキーマ内のreadOnlyと同じ効果。フィールドセットまたは配列を置く
                               //そしてそれらのアイテムはそれを継承します。
  htmlClass: "street foobar"、//コンテナdivに追加されるCSSクラス
  fieldHtmlClass: "street" //フィールド入力に追加されるCSSクラス
  labelHtmlClass: "street" //フィールドのラベルに追加されるCSSクラス
  copyValueTo:["address.street"]、//これらのスキーマキーに値をコピーします。
  condition: "person.age <18" //Angularの表現に応じてフィールドを表示または非表示にする
  destroyStrategy: "remove" // "null"、 "empty"、 "remove"、または "retain"のいずれか。 $ destroyイベントのモデルを変更しました。デフォルトは "remove"です。
}

typeの種類

# title 内容
1 fieldset
2 section
3 actions
4 text
5 textarea
6 number
7 password
8 checkbox
9 checkboxes
10 select
11 submit
12 button
13 radios
14 radios-inline
15 radiobuttons
16 help
17 template
18 tab
19 array
20 tabarray

特殊なタイプ

# title 内容
1 input group addons
2 select and checkboxes
3 actions
4 button
5 radios and radiobuttons
6 help
7 template
8 tabs
9 array
10 tabarray

レイアウトフレームワークは、MaterialDesignFrameworkModule

flexは、@angular/flex-layout を使用

# title 内容
1 row
2 row-reverse
3 column
4 column
5 row wrap