Using Bootstrap Tabs with Angular Formally

Is there a way to include a "tab" structure in the form of a json structure to quickly build bootstrap-ui tabs? For example, something like this:

{
  Tabs: [
    {
      heading: 'Tab 1',
      fields: [
               ....
              ]
    },
    {
      heading: 'Tab 2',
      fields: [
               ....
              ]
    },
  ]
}

      

Is it easy to build this type of structure? Or should I do ng-repeat on a tabs array with ng-repeat formally inside? Or are their performance issues in this or other issues?

+3


source to share


1 answer


I would recommend not placing tabs on the form. Rather, put them in tabs. If you are using angular-ui-bootstrap it will be structured something like this:

<tabset>
  <tab>
    <formly-form></formly-form>
  </tab>
  <tab>
    <formly-form></formly-form>
  </tab>
</tabset>

      



They may even use the same model. And you can do ng-repeat

on tabs with an array of arrays of formal field configurations. If you like you can request an actual example of this on the site repositories

+5


source







All Articles