如何使用ngx-formly为2个字段组创建自定义包装? [英] How to make custom wrapper for 2 field groups with ngx-formly?

问题描述

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

I'm quite confused how to make a layout for my form with fields using ngx-formly. For example, I've got 2 field groups: General and Dynamic.

如何指定General将在一个div中，而动态地在一个dropdown(div)中的另一个div中?

How to specify that general will be in one div, and dynamic in another div inside one dropdown(div)?

官方示例如下所示:包装器:

Official example looks like: 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> 并没有指定确切的字段是

And here <ng-container #fieldComponent></ng-container> which doesn't specify which exactly field it is

推荐答案

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

just put them inside a fieldGroup and either use a custom wrapper or custom type to render the dropdown-dev:

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

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

note: if you want to control a specified field you may use a custom type.

这篇关于如何使用ngx-formly为2个字段组创建自定义包装?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！