以编程方式在编辑表单上选择自动完成设置值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

    1. When you click the "Edit Form" Button you have to gather the persisted 
information for the form inputs fields. this might be from localstorage or from 
http request via angular service ([Angular Tutorial Http Server][1]) like in 
section --> "app/config/config.service.ts (getConfig v.1)".


    2. then create an empty "contractInterface" property in your component and 
update it after you got the infos from localstorage or http request


    like ...
    contractInterface: any = {};

    or ...
    contractInterface: BlaInterface = new BlaInterface();

    later...

    loadMyFormValues() {
      this.myFormService.myGetFormValuesFn()
        .subscribe((contractInterface: any) 
        => this.contractInterface = contractInterface);
    }


      [1]: https://angular.io/guide/http#requesting-data-from-a-server