时间戳

首页 > 解决方案 > 如何在相同的输入表单中使用 mat-autocomplete 和 ng-model

angular - 如何在相同的输入表单中使用 mat-autocomplete 和 ng-model

问题描述

在一个新的行场景中，我想显示一个输入，我们可以在其中键入 3 个字符，自动完成将命中数据库并返回所有其他剩余字段。

但是在查看模式下，我需要使用相同的输入表单来使用 ng-model..绑定我们已经保存的值

代码片段如下

<mat-form-field class="three">
              <input matInput autofocus="true" [formControl]="mcodeSearchControl" #MaterialCode name="MaterialCode" [readonly]="!row.editing"
                [(ngModel)]="row.currentData.materialCode" required maxlength="10" [matAutocomplete]="auto">
              <mat-autocomplete #auto="matAutocomplete" [style.display]="isNew ? 'auto': 'none'" [displayWith]="mCodeDisplay"
                (optionSelected)='selectionChanged($event, row)'>
                <mat-option *ngFor="let option of mCode$ | async" [value]="option">
                  {{option.materialCode}}
                </mat-option>
              </mat-autocomplete>
            </mat-form-field>

标签： angulartypescriptangular6

解决方案

推荐阅读