Angular中Clarity Combobox删除已选实体前如何添加确认弹窗？

Clarity Combobox本身没有内置删除前确认的弹窗功能，但可以通过监听表单控件变化+Clarity Modal组件来实现需求，具体步骤如下：

1. 核心思路 #

监听多选Combobox绑定的FormControl值变化，对比前后值找出被删除的实体；检查该实体是否在关联字段（如Field2）中被选中，若存在则弹出确认弹窗，根据用户选择决定是否执行删除操作。

2. 代码实现 #

步骤1：确保引入Clarity Modal模块 #

在你的Angular模块中导入Clarity模块（若未添加）：

import { ClarityModule } from '@clr/angular';

@NgModule({
  imports: [
    // ...其他依赖模块
    ClarityModule
  ]
})
export class YourModule { }

步骤2：修改component.ts代码 #

import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup } from '@angular/forms';
import { ClrModalService } from '@clr/angular';

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html',
  styleUrls: ['./your-component.component.css']
})
export class YourComponent implements OnInit {
  form: FormGroup;
  selectedField2: any = null;
  private previousField1Values: any[] = []; // 保存上一次的选中值快照

  constructor(
    private fb: FormBuilder,
    private modalService: ClrModalService
  ) {}

  ngOnInit(): void {
    this.form = this.fb.group({
      field1: [[]],
      field2: [null]
    });

    // 监听field1的选中值变化
    this.form.get('field1')?.valueChanges.subscribe(currentValues => {
      // 找出被删除的实体：仅存在于上一次快照中的项
      const removedItems = this.previousField1Values.filter(item => 
        !currentValues.some(currentItem => currentItem.id === item.id) // 用实体唯一ID做对比，按需调整
      );

      if (removedItems.length > 0) {
        const targetItem = removedItems[0];
        // 检查被删实体是否在Field2中被选中
        if (this.selectedField2 && this.selectedField2.id === targetItem.id) {
          // 先回滚值，阻止默认删除
          this.form.get('field1')?.setValue(this.previousField1Values, { emitEvent: false });
          // 弹出确认弹窗
          this.showConfirmModal(targetItem);
        }
      }
      // 更新快照为当前值
      this.previousField1Values = [...currentValues];
    });
  }

  showConfirmModal(removedItem: any): void {
    const confirmModal = this.modalService.create({
      title: '确认删除',
      content: `实体 "${removedItem.name}" 正在Field2中被使用，确定要删除吗？`,
      buttons: [
        {
          label: '取消',
          action: () => confirmModal.close()
        },
        {
          label: '确定删除',
          action: () => {
            // 用户确认后执行删除，并清空关联的Field2
            const updatedField1 = this.previousField1Values.filter(item => item.id !== removedItem.id);
            this.form.get('field1')?.setValue(updatedField1, { emitEvent: false });
            this.selectedField2 = null;
            confirmModal.close();
          }
        }
      ]
    });
    confirmModal.open();
  }

  onField2Selected(): void {
    // 保留原有的Field2选中逻辑
  }
}

步骤3：component.html保持原样 #

原有的Combobox和Select代码无需修改，依赖FormControl的变化监听即可触发逻辑。

3. 关键说明 #

• 实体对比逻辑：示例用id作为唯一标识，需根据你的实体结构调整对比字段。
• 多删除场景：若一次删除多个实体，可遍历removedItems逐个检查关联关系，示例简化为单实体处理。
• 弹窗样式：Clarity Modal自动适配框架样式，无需额外自定义。

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