如何使用ngx-formly为2个字段组制作自定义包装？

Question

我很困惑如何使用ngx-formly为字段设置表单布局。例如，我有两个字段组：常规和动态。

如何指定一般将在一个div中并在另一个dropdiv（div）内在另一个div中动态？

官方示例如下： 包装器：

 <div class="card">
      <h3 class="card-header">{{ to.label }}</h3>
      <div class="card-body">
        <ng-container #fieldComponent></ng-container>
      </div>
    </div>

组件：

fields: FormlyFieldConfig[] = [
    {
      key: 'firstName',
      type: 'input',
      templateOptions: {
        required: true,
        type: 'text',
        label: 'First Name',
      },
    },
    {
      key: 'address',
      wrappers: ['panel'],
      templateOptions: { label: 'Address' },
      fieldGroup: [{
        key: 'town',
        type: 'input',
        templateOptions: {
          required: true,
          type: 'text',
          label: 'Town',
        },
      }],
    },
  ];

这里<ng-container #fieldComponent></ng-container>并没有指定确切的字段

Answer 1

只需将它们放在fieldGroup内，然后使用自定义包装器或自定义类型来呈现dropdown-dev：

1. 使用自定义类型：https://stackblitz.com/edit/angular-u4hep4
2. 使用自定义包装器：https://stackblitz.com/edit/angular-gjleoz

注释：如果您想控制指定的字段，则可以使用自定义类型。