禁用 Angular 墊選擇字段后重新啟用它

Question

我在用於 2 個目的的表單上有一個 mat-select 字段。 首先，它可以用於 select 在搜索記錄時在數據元素中包含特定值。 其次，一旦找到記錄，就會以只讀模式顯示數據元素的值。

首次打開表單時，它處於查詢模式，並運行 function 以啟用/禁用基於的字段。 此 function 在表單首次顯示時運行正確。 用戶提交查詢后，調用相同的 function 以禁用該字段，這也可以正常運行。 然后，用戶可以將表單設置回其初始 state 以輸入不同的查詢參數，調用相同的 function。 這一次，當 mat-input 字段全部重新啟用時，mat-select 保持禁用狀態。

這是用於 mat-select 字段和一個 mat-input 字段的 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>

這是啟用/禁用字段的 .ts 文件的部分片段：

  updateQueryFields(){
    console.log("Qmode:", this.qmode)
    if(this.qmode === true){
      console.log("inside qmode === true")
      {...}
      //this.eclForm.controls.status.enable();
      this.eclForm.controls["status"].enable();  
      this.eclForm.controls.fltCrit.disable(); 
      {...}
    } else { 
      console.log("Getting ready to display data")
      {...}
      this.eclForm.controls.status.disable(); 
      this.eclForm.controls.fltCrit.disable(); 
      {...}
    }
  }

我問過我團隊的另一位成員，他和我一樣被這件事難住了。

他建議將 select 轉換為 ngModel，但是當我厭倦了收到此錯誤時：

無法將值“$event”分配給模板變量“status”。 模板變量是只讀的。

有沒有辦法可以始終啟用/禁用此墊選擇？

Answer 1

我懷疑您需要在禁用和啟用字段后強制更新表單。 您可以通過在禁用和啟用字段后手動調用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();
}