如何使用角度json架构表单创建多个表单选项卡?

时间:2018-02-08 13:27:26

标签: css angular angular-schema-form

我已成功使用这个令人敬畏的库和名为json schema form的概念。

https://www.npmjs.com/package/angular2-json-schema-form

现在使用给定的模式模式,我能够根据数据库中动态创建的模式生成表单。我想在多个标签中转换单个表单。我想在一个小组中将某些领域分组。

对此功能是否有任何支持?这样我就可以根据布局分配css类了。

https://angular2-json-schema-form.firebaseapp.com/?set=ng-jsf&example=ng-jsf-flex-layout&framework=material-design&language=en

1 个答案:

答案 0 :(得分:1)

您可以使用 fieldsets 属性将字段组拆分为单独的标签。 请参阅README.md中的以下示例:

{
  "properties": {
    "firstName": {
      "type": "string",
      "description": "First name"
    },
    "lastName": {
      "type": "string",
      "description": "Last name"
    },
    "email": {
      "type": "string",
      "description": "Email"
    },
    "notificationsFrequency": {
      "type": "string",
      "description": "Notifications frequency",
      "widget": "select",
      "oneOf": [
        {
          "description": "Daily",
          "enum": [
            "daily"
          ]
        },
        {
          "description": "Weekly",
          "enum": [
            "weekly"
          ]
        },
        {
          "description": "Monthly",
          "enum": [
            "monthly"
          ]
        }
      ],
      "default": "daily"
    }
  },
  "fieldsets": [
    {
      "title": "Personal information",
      "fields": [
        "firstName",
        "lastName",
        "email"
      ]
    },
    {
      "title": "Account settings",
      "fields": [
        "notificationsFrequency"
      ]
    }
  ]
}