css - 如何使用 Angular json 模式表单创建多个表单选项卡？

Question

我已经成功地使用了这个很棒的库和称为 json 模式形式的概念。

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

现在使用给定的模式模式，我能够基于从数据库动态创建的模式生成表单。我想在多个选项卡中转换单个表单。 I.E 我想在一个面板中对某些类型的字段进行分组。

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

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

Answer 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"
      ]
    }
  ]
}