在角度中选择mat自动完成中的值后禁用输入字段？

Question

大家好，我想在下拉列表中选择值后禁用输入字段，并且我想使用重置按钮重置选定的值。

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

例如：- 如果我们在输入字段中选择了任何值，则在单击重置按钮后应该禁用字段，它应该启用以选择值，请检查并帮助我们。

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

您可以通过以下方法做到这一点

添加选择事件以禁用表单控件，并在执行重置事件时清除表单控件。

在视图中：

  <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('');
  }

  ...

编码愉快.. :)