Stepper, headings, custom input types

[trullz]

Description

I´m sorry in advance if this isn´t inline with the main purpose with this package but..

I´ve been looking for a package that could create a more complex form, where it could have multiple pages (think steps, wizard)
, be decorated with headers (think sections) and I have a need to be able to create custom input types (think: opens up a modal and whatever is selected there will be brought into a value field.

This might be more like ngrx forms but I´ve would love to hear your thoughts

Describe the solution you'd like

This example json would create a stepper with 2 steps. with x amount of levels with heading, subheadings etc.

export const SERVER_DATA = [ { steps: [ { displayName: 'Step 1 - Personal information', // h1 in step subLevels: [ { displayName: 'Section 1 Name', // h2 control: [ { type: 'text', name: 'firstName', validators: { required: true, alpha: { allowWhiteSpace: true }, }, ui: { label: 'First Name', placeholder: 'Enter Your First Name', }, }, { type: 'text', name: 'lastName', validators: { required: true, alpha: { allowWhiteSpace: true }, }, ui: { label: 'Last Name', placeholder: 'Enter Your Last Name' }, }, ], subLevels: [] }, { displayName: 'Section 1 snn', control: [ { type: 'number', name: 'snn', validators: { required: true, }, ui: { label: 'snn', placeholder: 'Enter Your snn' }, }, ], subLevels: [ { displayName: 'some lower level heading', // h3 controls: [ { type: 'customModalInput', // own template in html to input/output values from modal or simular name: 'customValues', validators: { required: true, }, ui: { label: 'some custom thinks' }, }, ], }, ], }, ], controls: [], // be able to define controls without levels }, { displayName: "Step 2...", controls: [] } ], }, }