How to create multiple tabs of forms using angular json schema form?

Question

I have been successfully using this awesome library and concept called json schema form.

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

Now using the schema patterns given I am able to generate a form based on a dynamically created schema from database. I want to convert the single form in multiple tabs. I.E I want to group certain kind of fields in one panel.

Is there any kind of support for this functionality? So that I can assign the css class according to the layout.

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

Answer 1

You can split group of fields into separate tabs using the fieldsets property. See the following example from 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"
      ]
    }
  ]
}