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

Question

在新的行方案中，我要显示一个输入，在其中可以键入3个字符，并且自动完成功能将命中db并返回所有其他剩余字段。

但是在查看模式下，我需要使用相同的输入形式来使用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>