Angular Mat-Autocomplete Sending Entire Object on Post Request

I have an autocomplete field that behaves correctly on the frontend, but it's sending the entire object to the backend due to [value]="option". When I change it to [value]="option.id" the form submits correctly, however this breaks the [displayWith] function once an option is selected. The input is blank due to the fact displayWith uses the object to update the input.

What Can I modify to send the correct id to the backend while preserving the display function? I tried sending the expenseCategory through displayWith as a parameter, but it's not in the for block, therefore I don't have access to the option object. One thing to note, these are dynamically created inputs as part of a formArray.

Heres the autocomplete field:

<mat-form-field appearance="outline" class="full-width-input">
  <mat-label>Expense Category</mat-label>
  <input type="text" aria-label="Assignee" matInput formControlName = "expense_category_id" [matAutocomplete]="auto">
  <mat-autocomplete #auto="matAutocomplete" [displayWith]="displayExpenseCategoryFn">
    <mat-option *ngFor="let option of filteredExpenseCategories[i] | async" [value]="option">
      {{option.category}}
    </mat-option>
  </mat-autocomplete>
</mat-form-field>

Here's the displayWith function:

displayExpenseCategoryFn(expenseCategory?: ExpenseCategory): string | undefined {
  return expenseCategory ? expenseCategory.category : undefined;
}

First, I'm sure this is a typo, but what is i, in:

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

let option of filteredExpenseCategories[i]

<!-- end snippet -->

Secondly, you don't need a displayWith function if you also are defining a template, which you are with the binding {{option.category}}.

So you could just go back to [value]="option.id", which is the easiest way IMHO.

If you are submitting your form via code, then you can always massage the data before it goes off to the gods.

You could also make use of the (optionSelected) event of the MatAutoComplete (https://material.angular.io/components/autocomplete/api):

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

public selectOption(e: MatAutocompleteSelectedEvent): void {
  const myRealObject = e.option.value as MyRealObject;
  // do anything else you need here, such as tweak the data or clearout the typeahead control
}

<!-- language: lang-html -->

<mat-autocomplete #myAutoComplete (optionSelected)="selectOption($event)">
  <mat-option *ngFor="let option of options" [value]="option.id">
    {{option.name}}
  </mat-option>
</mat-autocomplete>

<!-- end snippet -->

Hope this helps.

Ok. I figured it out from a previous project I did a couple years ago (thought I solved this before.)

So what I did was bind displayExpenseCategoryFn to the controller, so I could search through the expenseCategories array to extract the category name and display that in the input field.

<mat-autocomplete #auto="matAutocomplete" [displayWith]="displayExpenseCategoryFn.bind(this)">
    <mat-option *ngFor="let option of filteredExpenseCategories[i] | async" [value]="option.id">
        {{option.category}}
    </mat-option>
</mat-autocomplete>

I then made the following changes to the displayWith function.

displayExpenseCategoryFn(expenseCategoryId?: number): string | undefined {
    const index = this.expenseCategories.findIndex(expenseCategoryIndex => expenseCategoryIndex.id === expenseCategoryId);
    return expenseCategoryId ? this.expenseCategories[index].category : undefined;
}