Angular 13中mat-select开启multiple样式异常问题排查

核心问题1：FormControl初始值类型不匹配 #

你的两个mat-select共用了同一个FormControl，但单选和多选控件对值的类型要求不同：

• 单选mat-select的FormControl初始值应为单个值（字符串/对象）
• 多选mat-select的FormControl初始值必须是数组

你当前设置的toppings = new FormControl('');是字符串类型，绑定到多选控件时，会导致内部值容器渲染异常，出现多余的矩形边框。

核心问题2：Angular 13中Outline外观与多选控件的样式冲突 #

Angular 13版本的Angular Material中，outline外观的mat-form-field和带multiple属性的mat-select组合时，默认样式存在重叠问题，多选控件的内部容器会和form-field的outline边框产生视觉上的双重矩形。

修复步骤 #

1. 拆分FormControl（推荐） #

为单选和多选分别创建独立的FormControl，避免类型冲突：

// .ts文件
singleToppings = new FormControl('');
multipleToppings = new FormControl([]); // 多选初始值设为空数组
toppingList: string[] = ['Extra cheese', 'Mushroom', 'Onion', 'Pepperoni', 'Sausage', 'Tomato'];

对应模板修改：

<mat-form-field appearance="outline">
  <mat-label>Toppings single</mat-label>
  <mat-select [formControl]="singleToppings">
    <mat-option *ngFor="let topping of toppingList" [value]="topping">{{topping}}</mat-option>
  </mat-select>
</mat-form-field>

<mat-form-field appearance="outline">
  <mat-label>Toppings multiple</mat-label>
  <mat-select [formControl]="multipleToppings" multiple>
    <mat-option *ngFor="let topping of toppingList" [value]="topping">{{topping}}</mat-option>
  </mat-select>
</mat-form-field>

2. 覆盖冲突样式（若仍有视觉问题） #

如果修正FormControl后还存在内部矩形，添加自定义CSS调整多选控件的内边距和面板样式：

/* 在组件的styles.css或全局样式文件中添加 */
.mat-mdc-select-multiple .mat-mdc-select-value {
  padding: 0 10px; /* 调整多选值的内边距，避免和outline边框重叠 */
}
.mat-mdc-select-panel.mat-mdc-select-panel-multiple {
  padding-top: 0;
  padding-bottom: 0;
}

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