Reputation: 452
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
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
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