Angular14中如何向ngx-formly自定义类型字段注入数据？

我正在开发Angular 14项目，使用ngx-formly创建表单，已在appModule中通过如下代码注册了名为risorseAutocomplete的自定义类型组件：

FormlyModule.forRoot({
        types: [
            {
                "name": 'risorseAutocomplete',
                "component": AutocompleteTypeComponent,
                "wrappers": ['form-field'],
            },
        ]
    })

现在我希望在配置FormlyFieldConfig数组时，向该自定义类型字段传入下拉选项数据，示例配置如下：

fields: FormlyFieldConfig[] = [
    {
        "fieldGroupClassName": 'display-flex-2',
        "fieldGroup": [
            {
                "key": 'Autocomplete',
                "type": 'risorseAutocomplete',
                "props": {
                    "required": true,
                    "label": 'Autocomplete',
                    "placeholder": 'Placeholder'
                }
            },
            {
                "key": 'Datepicker',
                "type": 'datepicker',
                "className": 'width-20',
                "props": {
                    "label": 'Datepicker',
                    "placeholder": 'Placeholder',
                    "description": 'Description datepicker',
                    "required": true,
                },
                "parsers": [toDateParser]
            }
        ]
    }
];

请问是否可以实现这种数据注入？如果可以，如何在AutocompleteTypeComponent中使用传入的数据？

完全可以实现这种数据注入，具体步骤如下：

1. 在Formly字段配置中传入选项数据 #

直接在risorseAutocomplete字段的props里添加自定义的选项字段，比如命名为options，把下拉数据传入：

fields: FormlyFieldConfig[] = [
    {
        "fieldGroupClassName": 'display-flex-2',
        "fieldGroup": [
            {
                "key": 'Autocomplete',
                "type": 'risorseAutocomplete',
                "props": {
                    "required": true,
                    "label": 'Autocomplete',
                    "placeholder": 'Placeholder',
                    // 新增选项数据
                    "options": [
                        { label: '选项1', value: 'opt1' },
                        { label: '选项2', value: 'opt2' },
                        { label: '选项3', value: 'opt3' }
                    ]
                }
            },
            // 其他字段配置...
        ]
    }
];

2. 在自定义组件中接收并使用数据 #

在AutocompleteTypeComponent中，通过@Input()接收FormlyFieldConfig实例，然后从props中取出传入的选项数据：

组件类代码 #

import { Component, Input } from '@angular/core';
import { FormlyFieldConfig } from '@ngx-formly/core';

@Component({
  selector: 'app-autocomplete-type',
  templateUrl: './autocomplete-type.component.html',
  styleUrls: ['./autocomplete-type.component.css']
})
export class AutocompleteTypeComponent {
  // 接收Formly字段配置
  @Input() field!: FormlyFieldConfig;

  // 直接从props中获取选项
  get options() {
    return this.field.props?.options || [];
  }
}

组件模板代码（以Angular Material Autocomplete为例） #

<input type="text"
       [formControl]="field.formControl"
       [matAutocomplete]="auto"
       [placeholder]="field.props?.placeholder">

<mat-autocomplete #auto="matAutocomplete">
  <mat-option *ngFor="let option of options" [value]="option.value">
    {{ option.label }}
  </mat-option>
</mat-autocomplete>

如果你的自定义组件不是基于Angular Material，只需要把模板部分换成对应UI库的下拉渲染逻辑即可，核心都是通过field.props.options获取传入的数据。

内容的提问来源于stack exchange，提问作者Raul