Question

我创建了以下jsbin

请注意fieldGroup因wrapper设置而无法显示wrapper。如果删除/注释掉pushing，则会正确显示字段。

最终，我是fieldGroup来自服务电话的<li>对象。我希望群组中的每个项目都是整体<ul>的{{1}}。所以我用<li>包装器包装每个单独的字段，我计划用<ul>包装器包装整个fieldGroup。但是Formly似乎并不喜欢这种方法。

我做错了什么？或者有更好的方法来制作这个清单吗？

Answer 1

不幸的是 fieldGroup 不支持包装器，添加它们意味着增加了角度形式的复杂性。

幸运的是，有一种使用自定义模板完成相同结果的简单方法：

  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'
    });

  });

参见完整示例：http://angular-formly.com/#/example/other/nested-formly-forms

Answer 2

我可能会弄错，但您是否尝试根据从服务中提取的数据动态创建列表？

如果你......

在ul中创建一个自定义表单类型，其中包含一个带有ng-repeat的模板。然后，您可以在该类型上放置一个控制器并传入您的服务以进行迭代。

这是我想的一个例子：

 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>`

在fieldGroup周围添加一个包装器

2 个答案: