Javascript 禁用角垫选择字段后重新启用该字段

我在表单上有一个mat select字段，用于两个目的。首先，它可以用于选择在搜索记录时在数据元素中包含特定值。第二，一旦找到记录，将以只读模式显示数据元素的值

当表单第一次打开时，它处于查询模式，并运行一个函数以基于查询启用/禁用字段。首次显示表单时，此函数将正确运行。用户提交查询后，将调用相同的函数来禁用该字段，这也会正确运行。然后，用户可以将表单设置回初始状态，以输入不同的查询参数，并调用相同的函数。这一次，当mat输入字段全部重新启用时，mat select保持禁用状态

以下是mat选择字段和一个mat输入字段的HTML：

<td class="dataLabel" style="width: 40px;">
    Status:
</td>
<td style="width: 100px;" colspan="2">
    <mat-form-field appearance="fill" style="width: 95px;">
        <!-- <input matInput type="text" formControlName="status"/> -->
        <mat-select #status 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>
    </mat-form-field>
</td>
<td class="dataLabel" style="width: 100px;">
    Flight Critical:
</td>
<td style="width: 65px;">
    <mat-form-field appearance="fill" style="width: 60px;">
        <input matInput type="text" formControlName="fltCrit"/>
    </mat-form-field>
</td>

我问过我团队的另一位成员，他和我一样被这件事难住了

他建议将select转换为ngModel，但当我厌倦时，我收到了这个错误：

无法将值“$event”分配给模板变量“status”。模板变量是只读的

---

是否有一种方法可以始终如一地启用/禁用此mat select？

我怀疑您需要在禁用和启用字段后强制更新表单。您可以在禁用和启用字段后手动调用

updateValueAndValidity

。顺便说一句，我喜欢在访问表单控件时使用

get

，我认为这样看起来更干净。因此，请尝试：

updateQueryFields(){
  if (this.qmode === true) {
    // ...
    this.eclForm.get('status').enable();
    this.eclForm.get('fltCrit').disable();
  } else { 
    this.eclForm.get('status').disable();
    this.eclForm.get('fltCrit').enable();
    // ...
  }
  this.eclForm.get('status').updateValueAndValidity();
  this.eclForm.get('fltCrit').updateValueAndValidity();
}

请提供一个，没有足够的代码来重现该问题。我正在尝试创建一个，但从更大的应用程序中删除它需要一些时间。

updateQueryFields(){
  if (this.qmode === true) {
    // ...
    this.eclForm.get('status').enable();
    this.eclForm.get('fltCrit').disable();
  } else { 
    this.eclForm.get('status').disable();
    this.eclForm.get('fltCrit').enable();
    // ...
  }
  this.eclForm.get('status').updateValueAndValidity();
  this.eclForm.get('fltCrit').updateValueAndValidity();
}