有没有办法禁用自动完成输入？ - 角材料答案

【问题标题】：Is there a way to disable typing for autocomplete? - Angular Material有没有办法禁用自动完成输入？ - 角材料
【发布时间】：2022-02-16 04:08:41
【问题描述】：

我在 Angular 材料中有以下 autocomplete：

 <!-- Drop Down menu -->
          <mat-form-field>
            <input placeholder="Select one" [matAutocomplete]="auto" matInput>

            <mat-autocomplete #auto="matAutocomplete">
              <mat-option value="Cars">Cars</mat-option>
              <mat-option value="Books">Books</mat-option>
            </mat-autocomplete>
          </mat-form-field>

有没有办法禁止在input 上输入，这样用户就不会破坏下拉菜单的目的？现在，用户可以直接输入内容而不是选择选项，甚至可以在选择时编辑选项。

【问题讨论】：

标签： angular autocomplete angular-material

【解决方案1】：

有

这是一个禁用自动完成输入示例的文档

https://material.angular.io/components/autocomplete/examples

我需要在选择后禁用输入，但我不能使用 mat-select，因为我有 600 多个选项......所以需要自动完成/预先输入。也不能使用 mat-chips，因为一次只能选择一个选项。

stackblitz = https://stackblitz.com/angular/kopovlnpxapb?file=src%2Fapp%2Fautocomplete-overview-example.ts

【讨论】：

stackblitz 不工作，一直在加载

【解决方案2】：

如果您不希望用户在输入中输入任何内容而只从列表中选择，为什么不使用 mat-select？用户还可以使用键盘进行选择，键入他需要的内容。文档：https://material.angular.io/components/select/overview

【讨论】：

【解决方案3】：

如果您希望输入字段一直禁用，请使用普通选择下拉菜单
如果您想使用自动完成但不希望用户在输入字段中编辑选定的选项，那么您可能想使用芯片自动完成 - https://material.angular.io/components/chips/examples

【讨论】：