在编辑表单上以编程方式选择自动完成设置值 ngModel

Posted 2023-03-13

【中文标题】在编辑表单上以编程方式选择自动完成设置值 ngModel

【英文标题】：select autocomplete set value ngModel programmatically on edit form

【发布时间】：2020-09-13 19:34:30

【问题描述】：

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

创建表单工作正常，值提交正常，

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;

【参考方案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

ps：在变量名中使用接口一词可能会造成混淆。就个人而言，我更喜欢避免它。如果适用，也在接口名称本身中。

【讨论】：

这没有回答我的问题，我询问了如何将数据输入到输入中。我已经用来自 API 的数据填充接口。但是来自 angular-material 的输入会产生问题。

【参考方案2】：

所以我做了什么我只是改变了 ngModel [ngModel]="customer" 然后

  private getContractDetails(id: number) 

    this.contractService.loadContractDetails(id)
      .subscribe( (rez: Contract) => 
        // add value to customer input
        this.customer.name = rez.customerName; // <-- this

它起来了..

--- 奖金 ---

对于选择输入，这有效

HTML：

 <mat-form-field>
        <mat-label i18n="@@typeInput">Type</mat-label>
        <mat-select
          name="typeId"
          [ngModel]="typesVal" // <--- this
          (ngModelChange)="setContractType($event)"
          #item="ngModel">
          <mat-option *ngIf="isLoadingTypes"><span [ngTemplateOutlet]="loading"></span></mat-option>
          <ng-container *ngIf="!isLoadingTypes">
            <mat-option>None</mat-option>
            <mat-option *ngFor="let item of contractTypeList" [value]="item"> item.name </mat-option>
          </ng-container>
        </mat-select>
      </mat-form-field>

代码

this.typesVal = this.contractTypeList.find(x => x.id === rez.typeId);