Question

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

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

<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错误：多个自定义值访问器与表单控件匹配具有未指定名称属性的

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

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

Here is a stackblitz解决该问题。错误显示在控制台中，可以从页面的右下角打开。

Answer 1

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

我可以通过在input标记中使用以下类名称来将自动完成功能从TrimValueAccessorModule中排除，以便在不完全删除TrimValueAccessorModule的情况下解决此问题。

class="ng-trim-ignore"

无法将ngModel指令添加到角材料自动完成

1 个答案: