Angular Formly响应式表单：多选框行内Logo点击加载组件的实现

当然可以实现！在响应式Formly表单里，我们可以通过自定义选项模板+事件绑定的方式，轻松实现点击多选下拉框内Logo触发弹窗加载Calendar组件的需求，下面是具体的实现步骤和示例代码：

1. 自定义多选选项模板 #

首先，我们需要创建一个自定义的模板来替换Formly默认的多选选项布局，在模板中加入Logo元素并绑定点击事件。注意要阻止事件冒泡，避免点击Logo时同时触发选项的选中/取消操作：

<!-- 在组件模板中定义自定义选项模板 -->
<ng-template #customMultiSelectOption let-option="option">
  <div class="flex items-center gap-2">
    <!-- Logo元素，绑定点击事件 -->
    <img 
      [src]="option.logoUrl" 
      alt="{{ option.label }} Logo" 
      class="w-6 h-6 cursor-pointer"
      (click)="handleLogoClick(option, $event)"
    >
    <!-- 选项文本 -->
    <span>{{ option.label }}</span>
  </div>
</ng-template>

2. 在Formly字段配置中关联自定义模板 #

接下来，在Formly的字段配置里，指定我们的自定义选项模板，同时给每个选项添加Logo的URL信息：

import { FormlyFieldConfig } from '@ngx-formly/core';

// 组件类中的字段配置
fields: FormlyFieldConfig[] = [
  {
    key: 'logoMultiSelect',
    type: 'multicheckbox', // 如果你用的是下拉式多选，可换成对应类型如'ng-select'
    templateOptions: {
      label: '带Logo的多选选项',
      options: [
        { label: '项目A', value: 'projectA', logoUrl: '/assets/logos/project-a.png' },
        { label: '项目B', value: 'projectB', logoUrl: '/assets/logos/project-b.png' },
        { label: '项目C', value: 'projectC', logoUrl: '/assets/logos/project-c.png' },
      ],
      // 关联自定义选项模板
      optionTemplate: this.customMultiSelectOption,
    },
  },
];

3. 实现Logo点击逻辑，加载Calendar弹窗 #

在组件类中，我们注入模态框服务（以Angular Material的MatDialog为例），实现点击Logo时打开弹窗并加载Calendar组件的逻辑：

import { Component, TemplateRef, ViewChild } from '@angular/core';
import { MatDialog } from '@angular/material/dialog';
import { CalendarComponent } from './calendar-component';

@Component({
  // 组件元数据
})
export class YourFormComponent {
  @ViewChild('customMultiSelectOption') customMultiSelectOption!: TemplateRef<any>;

  constructor(private dialog: MatDialog) {}

  handleLogoClick(option: any, event: MouseEvent) {
    // 阻止事件冒泡，避免触发选项的选中操作
    event.stopPropagation();

    // 打开弹窗，加载Calendar组件
    const dialogRef = this.dialog.open(CalendarComponent, {
      width: '600px',
      // 可选：传递当前点击的选项数据给Calendar组件
      data: { selectedOption: option },
    });

    // 监听弹窗关闭事件，处理返回结果
    dialogRef.afterClosed().subscribe((result) => {
      if (result) {
        console.log('Calendar组件返回结果:', result);
        // 这里可以根据结果做后续处理
      }
    });
  }
}

4. 准备Calendar弹窗组件 #

确保你的CalendarComponent已经正确创建，并且可以接收弹窗传递的数据（如果需要）：

// calendar-component.ts
import { Component, Inject } from '@angular/core';
import { MAT_DIALOG_DATA } from '@angular/material/dialog';

@Component({
  templateUrl: './calendar-component.html',
})
export class CalendarComponent {
  // 接收弹窗传递的选项数据
  constructor(@Inject(MAT_DIALOG_DATA) public data: { selectedOption: any }) {}
}

关键注意事项 #

• 事件冒泡处理：一定要调用event.stopPropagation()，否则点击Logo会同时触发选项的选中/取消状态切换，影响用户体验。
• 自定义模板适配：如果你使用的是第三方UI库的Formly适配器（比如NgSelect、PrimeNG等），自定义选项模板的方式可能略有不同，请参考对应库的Formly文档调整。
• 弹窗替代方案：如果不用Angular Material的MatDialog，也可以使用其他模态框库，或者自己实现一个弹窗组件，通过ViewChild获取实例并控制显示/隐藏。

内容的提问来源于stack exchange，提问作者Shashank S Chandel