Angular响应式表单mat-select禁用后无法重新启用问题问询

• 触发所有问题的直接导火索是模板变量命名冲突：给mat-select加的模板引用#status，和当前表单控件的name="status"、formControlName="status"完全重名。Angular模板解析时，会把mat-select选中事件回传的$event尝试绑定到这个只读的模板引用变量上，这就是尝试切ngModel时报Cannot assign value "$event" to template variable "status". Template variables are read-only.的原因——模板引用变量本身是只读的，根本不支持赋值操作。
• 重置后mat-select无法重新启用的核心原因有两个：
  1. 表单重置的执行顺序错位：多数重置逻辑的默认顺序是先调用form.reset()，再切换qmode的值，最后调用状态更新函数。但reactive form的reset操作会把所有控件的状态拉回初始化时的状态，如果初始化阶段曾经给status控件设置过disabled状态，reset后会直接回到禁用态。同表单的matInput因为是直接单向绑定FormControl的状态，只要状态变更就同步更新，所以不会出现异常；但mat-select的禁用逻辑是多层嵌套的组件绑定（覆盖触发按钮、下拉浮层、选项选择拦截三层），状态更新时机更靠后，就会出现FormControl已经调用了enable，但页面渲染依旧是禁用态的延迟问题。
  2. 状态切换时的变更检测不同步：如果enable调用的时机早于mat-select的组件初始化完成，组件内部的状态缓存就不会更新，哪怕外层FormControl状态变了，视图还是保持之前的禁用状态。

1. 先解决命名冲突问题
   把模板上和字段重名的模板引用改名，避免Angular解析混淆：

   <!-- 原来的 #status 改成不冲突的名字，比如 #statusSelect -->
   <mat-select #statusSelect name="status" formControlName="status">
       <mat-option value="MANUAL">MANUAL</mat-option>
       <mat-option value="UPDATE">UPDATE</mat-option>
       <mat-option value="DELETE">DELETE</mat-option>
       <mat-option value="NEW">NEW</mat-option>
       <mat-option value="TEST">TEST</mat-option>
   </mat-select>
   

   改完之后再尝试切ngModel就不会触发只读变量赋值的报错，不过不建议把现有reactive form改成ngModel绑定，双绑定反而会增加状态同步的复杂度。
2. 调整重置逻辑的执行顺序
   所有重置相关的操作严格按照顺序执行：
   • 第一步：先把查询模式标志qmode切回true
   • 第二步：调用表单reset方法，显式指定status控件的初始状态为启用，比如：

     this.eclForm.reset({
         status: { value: null, disabled: false },
         fltCrit: null
     }, { emitEvent: true })
     

   • 第三步：再调用updateQueryFields()方法同步全表单的字段状态
3. 解决mat-select的状态同步延迟
   在调用enable()方法之后，手动触发一次变更检测，把FormControl的状态同步到mat-select的组件视图上：
   • 先在构造函数里注入ChangeDetectorRef：

     constructor(private cdr: ChangeDetectorRef) {}
     

   • 在enable调用完成后手动触发检测：

     // updateQueryFields 方法内，enable status控件后补充对应逻辑
     this.eclForm.controls["status"].enable({ emitEvent: true });
     this.cdr.detectChanges();
     

4. 额外排查点
   删掉模板里残留的、同formControlName="status"的被注释代码，避免Angular在解析的时候把多个同名字段绑定到同一个FormControl上，引发状态冲突。

在每次调用enable/disable之后，打印对应控件的状态：

console.log('status控件状态：', this.eclForm.controls['status'].status)

如果控制台显示状态已经从DISABLED变成ENABLED，但页面上还是灰选状态，加上上面的cdr.detectChanges()同步操作，基本就能解决重置后mat-select卡禁用的问题。

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