在 angular 中的墊子自動完成值 select 之后禁用輸入字段？

Question

大家好，我想在下拉列表中選擇值后禁用輸入字段，並且我想使用重置按鈕重置選定的值。

供參考 Stackblitz： https://stackblitz.com/edit/mat-autocomplete-1uelcd?file=app%2Fautocomplete-display-example.html

例如：- 如果我們在輸入字段中選擇了任何值，那么在單擊重置按鈕后應該禁用字段，它應該啟用 select 該值請檢查並幫助我們。

Html：

    <div class="example-form">
      
      <form>
        <mat-form-field class="example-full-width">
          <input type="text" placeholder="Assignee" aria-label="Assignee" matInput [formControl]="myControl" [matAutocomplete]="auto2">
          <mat-autocomplete #auto2="matAutocomplete" [displayWith]="displayFn">
            <mat-option *ngFor="let option of filteredOptions | async" [value]="option">
              {{ option.name }}
            </mat-option>
          </mat-autocomplete>
        </mat-form-field>
         <button  mat-raised-button (click)="onResetSelection()" color="primary">Reset Selection</button>
      </form>
     
    </div>

重置：

onResetSelection() {
    this.filteredOptions = [];
}

禁用：

[disabled]="filteredOptions =='option'"

Answer 1

你可以用下面的方法做到這一點

添加 select 事件以禁用表單控件，並在執行重置事件時清除表單控件。

在視圖中：

  <mat-autocomplete #auto2="matAutocomplete" (optionSelected)="onSelectionChanged($event)" [displayWith]="displayFn">
        <mat-option *ngFor="let option of filteredOptions | async" [value]="option">
           {{ option.name }}
        </mat-option>
   </mat-autocomplete>

在模板中：

  ...

  onSelectionChanged(event: any) {
     this.formGroupName.controls['myControl'].disable();
  }

  onResetSelection() {
    // you can enable the control with below line
    this.formGroupName.controls['myControl'].enable();
    this.formGroupName.controls['myControl'].setValue('');
  }

  ...

快樂編碼.. :)