Angular mat-autocomplete FormControl.disable()禁用输入失效

你在ngOnInit中调用禁用方法失效，核心是两个时序问题：

• ngOnInit生命周期执行时，模板中通过[formControl]="optionCtrl"绑定的输入框、MatFormField相关的表单关联逻辑还未完成初始化，你提前设置的禁用状态会被后续表单初始化流程覆盖。
• 你后续为了监听输入值设置的valueChanges管道中使用了startWith('')，该操作符会在订阅初始化时主动给控件推送空值，会在部分场景下重置控件的禁用状态。

任选一种方案即可解决问题：

• 延后禁用逻辑执行时机
  等视图和表单绑定全部完成后再设置禁用状态，把逻辑移到ngAfterViewInit中，加微任务避免变更检测冲突：

  import { AfterViewInit } from '@angular/core';
  export class FormAutocompleteMultiConditionsComponent implements Field, OnInit, AfterViewInit {
    // 原有属性声明保持不变
    ngAfterViewInit(): void {
      if (this.config.disabled) {
        setTimeout(() => this.optionCtrl.disable());
      }
    }
  
    // 原有ngOnInit逻辑保持不变
  }
  

• 初始化FormControl时直接传入禁用配置
  不要先实例化控件再调用disable()，在控件初始化阶段就把禁用状态写入配置，从根源避免时序覆盖问题：

  ngOnInit(): void {
    // 初始化控件时直接传入状态配置
    this.optionCtrl = new FormControl({
      value: '',
      disabled: !!this.config.disabled
    });
  
    // 原有options赋值、filteredOptions订阅逻辑保持不变
  }
  

• 模板直接绑定disabled输入属性（快速修复）
  直接在模板的input标签上绑定禁用状态，不需要写额外ts逻辑：

  <input
    #optionInput
    matInput
    type="text"
    [placeholder]="config.placeholder ? (config.placeholder | translate) : ''"
    [formControl]="optionCtrl"
    [matAutocomplete]="auto"
    [matChipInputFor]="chipList"
    [matChipInputSeparatorKeyCodes]="separatorKeysCodes"
    [disabled]="config.disabled"
    (matChipInputTokenEnd)="add($event)"
  />
  

  注意：该方案在响应式表单中使用时Angular会抛出警告，提示建议通过FormControl控制状态，适合临时快速修复场景。

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