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

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