如何在FormBuilder中禁用mat-autocomplete组件？

你的核心问题是模板中绑定[disabled]与响应式表单的状态管理冲突，同时没有正确监听第一个下拉框的变化来动态控制第三个输入框的禁用状态。以下是具体修复步骤：

1. 移除模板中的[disabled]绑定 #

直接删除输入框上的[disabled] = "isFilterValueSelected"属性。响应式表单要求通过表单控件的API（enable()/disable()）来控制禁用状态，模板绑定会触发"changed after checked"警告，还会覆盖代码中设置的控件状态。

修改后的输入框代码：

<input type="text"
  matInput
  #filterValueInput
  formControlName="filterValueCtrl"
  [matAutocomplete]="autoTo"
  [matChipInputFor]="toChipList"
  [matChipInputSeparatorKeyCodes]="separatorKeysCodes"
  [matChipInputAddOnBlur]="addOnBlur"
  (matChipInputTokenEnd)="add($event)">

2. 通过表单控件API动态控制禁用状态 #

在组件中监听第一个下拉框filterSelectCtrl的值变化，根据是否有选中值来启用/禁用filterValueCtrl，同时可以在这里加载对应的自动完成选项。

修改后的TS代码：

ngOnInit() {
  this.filterValueForm = this.fb.group({
    filterSelectCtrl: [null, Validators.required],
    filterConditionCtrl: [null, Validators.required],
    filterValueCtrl: [{value: '', disabled: true}, Validators.required],
  });

  // 监听第一个下拉框的选择变化
  this.filterValueForm.get('filterSelectCtrl').valueChanges.subscribe(selectedCode => {
    const valueCtrl = this.filterValueForm.get('filterValueCtrl');
    if (selectedCode) {
      // 选中值后启用输入框，并加载自动完成选项
      valueCtrl.enable();
      this.onFilterChange({ value: selectedCode }); // 调用你原有的加载选项逻辑
    } else {
      // 清空选中值时禁用输入框，同时清空已选 chips 和选项列表
      valueCtrl.disable();
      this.selectedFiltersValue = [];
      this.filteredValues = [];
    }
  });
}

// 保留你原有的onFilterChange方法，用于加载自动完成选项
onFilterChange(event: any) {
  // 这里写加载filteredValues的逻辑，比如根据selectedCode获取对应选项
  // ...
}

为什么原来的初始化设置无效？ #

你在初始化filterValueCtrl时设置了disabled: true，但这只是初始状态。当第一个下拉框选中值后，你没有主动调用enable()来更新控件状态；同时模板中的[disabled]绑定会干扰响应式表单的状态管理，导致代码中的设置无法生效，还触发了控制台警告。

额外优化 #

如果filterConditionCtrl也需要在第一个下拉框选中后才启用，同样可以用上述监听逻辑处理：在valueChanges的回调中，根据selectedCode的存在来启用/禁用filterConditionCtrl。

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