无法将 ngModel 指令添加到 angular material 自动完成

Question

我想在我的 angular 应用程序的页面中添加一个自动完成字段。

我在模板中添加了以下内容。

<mat-form-field class="example-full-width">
    <input matInput placeholder="Pick one" [(ngModel)]="entity.type" [matAutocomplete]="auto">
    <mat-autocomplete #auto="matAutocomplete">
        <mat-option *ngFor="let option of options" [value]="option">
            {{option}}
        </mat-option>
    </mat-autocomplete>
</mat-form-field>

但是，当我导航到该页面时出现以下错误。

ERROR Error: More than one custom value accessor matches form control with unspecified name attribute

如果我从模板中删除 [(ngModel)]="entity.type" 指令，错误就会消失。

这个错误的原因是什么？有什么办法可以解决吗？

Here is a stackblitz 问题。控制台显示错误，可从页面右下角打开。

Answer 1

发现问题。这是由我在应用程序中使用的 TrimValueAccessorModule 引起的。当我移除模块时，问题得到解决。

我可以通过在 input 标签中使用以下 class 名称来从 TrimValueAccessorModule 中排除自动完成功能，这样我就可以在不完全删除 TrimValueAccessorModule 的情况下解决问题。

class="ng-trim-ignore"

无法将 ngModel 指令添加到 angular material 自动完成

Unable to add ngModel directive to angular material autocomplete

angular-material2

angular