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

Question

我很困惑如何使用 ngx-formly 为我的表单进行布局。例如，我有 2 个字段组：General 和 Dynamic。

如何指定一般将在一个 div 中，并在一个下拉（div）内的另一个 div 中动态？

官方示例如下： Wrapper：

 <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

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

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

注意：如果你想控制一个指定的字段，你可以使用自定义类型。