Angular 14中Mat Select搭配Chip List触发框时溢出问题排查

问题现象 #

多选选中项较多时，芯片列表无法在表单域内自动换行，出现溢出边界的情况。

核心原因及解决方法 #

1. 缺失适配Angular 14的CSS样式 #

你参考的Angular Material 9示例样式在Angular 14中已不适用，需添加以下样式解除单行限制并允许换行：

/* 让选择器触发区域支持换行 */
.mat-select-trigger {
  display: block;
  white-space: normal;
  min-height: 48px; /* 保持表单域基础高度 */
}

/* 芯片列表自动换行 */
mat-chip-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 4px 0;
}

/* 表单域容器适配多行高度 */
.mat-form-field-flex {
  flex-wrap: wrap;
  align-items: center;
}

.mat-form-field-outline {
  height: auto;
}

2. 选中值与视图数据不同步 #

检查selectedDays是否和表单控件值完全同步，修正selectionChange事件处理逻辑：

selectedDay(event: MatSelectChange) {
  this.selectedDays = event.value.map(val => 
    this.daysOfWeek.find(day => day.value === val)
  );
}

同时添加芯片移除逻辑，确保数据一致性：

removeDay(day: any) {
  const control = this.yourFormGroup.get('ManufacturingDays');
  if (control) {
    const newValue = control.value.filter(val => val !== day.value);
    control.setValue(newValue);
    this.selectedDays = newValue.map(val => this.daysOfWeek.find(d => d.value === val));
  }
}

3. 样式优先级问题 #

若组件样式未生效，可将样式添加到全局style.css或使用::ng-deep穿透组件样式：

::ng-deep .mat-select-trigger {
  display: block;
  white-space: normal;
}

调整后的完整代码 #

<mat-form-field class="multi-select-chip">
  <mat-label>Manufacturing Days</mat-label>
  <mat-select
    (selectionChange)="selectedDay($event)"
    formControlName="ManufacturingDays"
    multiple>
    <mat-select-trigger>
      <mat-chip-list>
        <mat-chip 
          *ngFor="let day of selectedDays" 
          (removed)="removeDay(day)">
          {{ day.name }}
          <mat-icon matChipRemove>cancel</mat-icon>
        </mat-chip>
      </mat-chip-list>
    </mat-select-trigger>

    <mat-option
      *ngFor="let day of daysOfWeek"
      [value]="day.value">
      {{ day.name | translate }}
    </mat-option>
  </mat-select>
</mat-form-field>

全局CSS：

.multi-select-chip {
  width: 100%;
}

.multi-select-chip .mat-select-trigger {
  display: block;
  white-space: normal;
  min-height: 48px;
}

.multi-select-chip mat-chip-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 4px 0;
}

.multi-select-chip .mat-form-field-flex {
  flex-wrap: wrap;
  align-items: center;
}

.multi-select-chip .mat-form-field-outline {
  height: auto;
}

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