Angular V15中旧版Angular-Material的mat-select disabled属性失效

针对升级到Angular 15后使用legacy Angular Material组件时，mat-select的disabled属性失效、mat-form-field-disabled类消失的问题，以下是常见原因和解决办法：

• 确认Legacy模块导入正确
  Angular 15中Material组件默认使用新的MDC-based版本，若要继续使用legacy组件，必须导入对应的Legacy模块而非原模块。比如mat-select需要替换为：

  // 替换前
  import { MatSelectModule } from '@angular/material/select';
  // 替换后
  import { MatLegacySelectModule } from '@angular/material/legacy-select';
  

  未切换到Legacy模块会导致组件属性和样式逻辑与旧版不兼容，进而引发disabled状态无法正确渲染。

• 检查mat-form-field包裹结构
  mat-select的disabled样式依赖父级mat-form-field的mat-form-field-disabled类，Angular 15对该关联的校验更严格。确保mat-select正确包裹在mat-form-field中：

  <mat-form-field>
    <mat-select 
      panelClass="lazyloadselector" 
      [formControl]="appselect" 
      [disabled]="disabled"
      <!-- 其他属性 -->
    >
      <!-- mat-option内容 -->
    </mat-select>
  </mat-form-field>
  

  若已有包裹结构但类未生成，可手动绑定类到mat-form-field：

  <mat-form-field [class.mat-form-field-disabled]="disabled">
    <!-- mat-select内容 -->
  </mat-form-field>
  

• 排查FormControl状态冲突
  由于mat-select绑定了[formControl]="appselect"，FormControl的disabled状态会优先于模板中的[disabled]属性。检查组件代码中是否对appselect调用过enable()方法，或通过表单组设置了控件状态，导致模板的disabled属性被覆盖。建议统一通过FormControl的API管理状态：

  // 禁用控件
  this.appselect.disable();
  // 启用控件
  this.appselect.enable();
  

不少开发者在升级Angular 15并保留legacy Material组件时都遇到过类似问题，大多是模块切换不彻底、结构校验变化或表单状态管理不一致导致的。

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