带有对象数组的反应式表格垫自动完成

Question

我有一个 Multiselect 并从 DB 返回一个对象数组我需要 [displayWith]="" 来显示所选对象的名称但要存储所选对象的 ID。这是 HTML 代码


      <mat-form-field class="example-full-width">
        <input type="text"
               placeholder="Customers"
               i18n-placeholder="customerInput"
               aria-label="customers"
               matInput
               [formControl]="customerControl"
               formControlName="customerId"
               (focus)="getCustomers(searchedCustomer)"
               (change)="customerOnChange($event)"
               [matAutocomplete]="autoCustomer">
        <mat-autocomplete #autoCustomer="matAutocomplete" [displayWith]="displayCustomerName">

          <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>

在这种情况下，客户列表是一个对象数组，如

0: {id: 94, name: "Abata", abbreviation: "Npath", active: 0, number: 54, …}
1: {id: 443, name: "Abata", abbreviation: "Wikido", active: 0, number: 36, …}
2: {id: 226, name: "Abata", abbreviation: "Tazz", active: 0, number: 90, …}

在输入上需要 name 但在 formGroup > value 上需要只是 id 而不是整个对象或名称。

使用上面的方法，值结果显示整个对象。像这样：

value:
customerId: {id: 226, name: "Abata", abbreviation: "Tazz", active: 0, number: 90, …}

需要什么 ID：

value:
customerId: 226

我尝试了什么：

我试图改变 <mat-option *ngFor="let customer of customerList" [value]="customer"> 到 [value]="customer.id' but then I don't get the name of from[displayWith]=""`

我也尝试在 customer.id 到 FormControll 而不是空字符串

  this.contractForm = new FormGroup({
      customerId: new FormControl(customer.id, [Validators.required]),
...

Answer 1

您应该在 component.ts 文件中使用以下函数 displayCustomerName b

collectionDisplayFn = (id: number) =>
    Object.values(this.customerList).find(customer=> customer.id === id)?.name;
}

带有对象数组的反应式表格垫自动完成

Reactive forms mat-autocomplete with array of objects

angular

angular-reactive-forms

formgroups

angular9