Angular Material 15：如何通过ngx-formly为<mat-select>设置panelClass？

1. 修正字段配置 #

将panelClass从attributes移到props根层级，因为panelClass是mat-select的组件输入属性，而非原生HTML属性，Formly会自动将props中的对应属性绑定到底层的mat-select组件：

form: new FormGroup({}),
options: {} as FormlyFormOptions,
fields: [
  {
    key: 'actionSelect',
    type: 'select',
    props: {
      panelClass: 'example-panel-class', // 直接放在props中
      translate: true,
      required: true,
      options: [
        { value: 'exampleValue-1', label: 'exampleLabel-1' },
        { value: 'exampleValue-2', label: 'exampleLabel-2' },
        { value: 'exampleValue-3', label: 'exampleLabel-3' },
      ],
    },
  },
]

2. 添加自定义宽度样式 #

根据项目样式封装策略添加CSS：

• 如果在组件内样式文件中设置，需要穿透Angular视图封装（使用::ng-deep）：

::ng-deep .example-panel-class {
  width: 350px; // 自定义宽度
  min-width: unset; // 可选：覆盖默认最小宽度限制
}

• 如果在全局样式文件（如styles.scss）中设置，无需::ng-deep：

.example-panel-class {
  width: 350px;
  min-width: 250px;
}

为什么之前的方法无效？ #

Formly的attributes属性用于配置原生HTML元素的属性（如id、placeholder），而panelClass是Angular Material mat-select组件的专属输入属性，不属于原生属性范畴，因此无法通过attributes传递，必须直接在props中配置才能被Formly正确绑定到组件上。

内容的提问来源于stack exchange，提问作者asti.v