Question

我在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上键入内容，以使用户不会违反下拉菜单的目的？现在，用户只需键入某些内容即可代替选择选项，甚至在选择后也可以对其进行编辑。

Answer 1

是的

这是禁用自动完成输入的文档

我需要在选择后禁用输入，并且我不能使用mat-select，因为我有600多个选项...因此需要自动完成/提前输入。也不能使用垫式芯片，因为一次只能选择一个选项。

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

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

Answer 2

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

Answer 3

如果您想一直禁用输入字段，请使用常规选择下拉菜单
如果您要使用自动完成功能，但又不想让用户在输入字段中编辑所选选项，则可能要使用芯片自动完成功能-https://material.angular.io/components/chips/examples

有没有一种方法可以禁止键入自动完成功能？ -角材料

3 个答案: