CODEWITHSUNDEEP
angularjsangular-formly
Holt
Holt

Reputation: 452

Add a wrapper around a fieldGroup

I have create the following jsbin

Notice how the fieldGroup does not display because of the wrapper setting. If you remove/comment out the wrapper then the fields properly display.

Ultimately, I am pushing objects into this fieldGroup from a service call. I want each of these items within the group to be a <li> to the overall <ul>. So I wrapped each individual field with the <li> wrapper and I was planning on wrapping the entire fieldGroup with the <ul> wrapper. But Formly doesn't seem to like this approach.

What am I doing wrong? Or is there a better way of making this list?

Upvotes: 0

Views: 1877

Answers (2)

SoftEngJason
SoftEngJason

Reputation: 11

I could be mistaken, but are you trying to dynamically create a list based on data that is pulled in from a service?

If you are...

Create a custom formly type, that has a template with an ng-repeat on the li, within the ul. You can then put a controller on the type and pass in your service to iterate on.

Here is an example of what I am thinking:

 formlyConfig.setType({

     name: 'myList',
     templateUrl: 'myList.view.html',
     controller: ['ListService', function(ListService) {
         var vm = this;
         ListService.getList().then(function(list) {
             vm.list = list.data
             vm.specific = list.data.specificItems
         } 
      }]
  });



<div type="text/ng-template", id="myList.view.html">

    <ul>
        <li ng-repeat="item for item in vm.list">{{item.name}}</li>
    </ul>

    <ul>
        <li ng-repeat="item for item in vm.specific">{{item.name}}</li>
    </ul>`
</div>`

Upvotes: 1

Ben Orozco
Ben Orozco

Reputation: 4381

Unfortunately fieldGroup doesn't support wrappers, and adding them would mean adding complexity to angular-formly.

Fortunately there's a simple way to accomplish the same results using custom templates:

  app.config(function (formlyConfigProvider) {

    // set templates here
    formlyConfigProvider.setType({
      name: 'nested',
      template: '<formly-form model="model[options.key]" fields="options.data.fields"></formly-form>'
    });

    formlyConfigProvider.setWrapper({
      name: 'panel',
      types: ['nested'],
      templateUrl: 'panel.html'
    });

  });

See full example: http://angular-formly.com/#/example/other/nested-formly-forms

Upvotes: 2

Related Questions