Реактивные формы mat-autocomplete с массивом объектов - PullRequest
Новая
       48

Реактивные формы mat-autocomplete с массивом объектов

0 голосов
/ 27 апреля 2020

У меня есть Multiselect, и я возвращаю массив объектов в результате из БД. Мне нужно [displayWith]="", чтобы показать имя выбранного объекта, но сохранить идентификатор выбора. вот код 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 должен быть просто идентификатором, а не целым объектом или именем.

при подходе выше значения результаты показывают весь объект. Примерно так: 

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]),
...

1 Ответ

1 голос
/ 27 апреля 2020

вы должны использовать следующую функцию в вашем component.ts файле displayCustomerName b 

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