以角形模型ngModel编程方式选择角材料自动完成

Question

当我进入编辑表单时，我需要将值预填到表单中。

创建表单可以正常工作，并且可以很好地提交值，

HTML：

  <!-- customers-->
<div class="col-md-6">
  <mat-form-field class="example-full-width">
    <input type="text"
           placeholder="Customers"
           i18n-placeholder="customerInput"
           aria-label="customers"
           matInput
           required
           [name]="'customerId'"
           (focus)="getCustomers(searchedCustomer)"
           [ngModel]="contractInterface.customerName"
           (ngModelChange)="customerOnChange($event)"
           [matAutocomplete]="autoCustomer">
    <mat-autocomplete #autoCustomer="matAutocomplete" [displayWith]="customerCollectionDisplayFn">

      <mat-option *ngIf="customerloading"><span [ngTemplateOutlet]="loading"></span></mat-option>

      <ng-container *ngIf="!customerloading">
        <mat-option *ngFor="let customer of customerList" [value]="customer">
          {{ customer.name }}
        </mat-option>
      </ng-container>
    </mat-autocomplete>
  </mat-form-field>
</div>

我用[displayWith]="customerCollectionDisplayFn"显示输入的值

TS：

  customerCollectionDisplayFn(customer?) {
return customer?.name;

}

Answer 1

您必须使用“框内香蕉”来进行两种方式的绑定。更改[ngModel]至[(ngModel)]。