Angular Material Autocomplete causing list of value to be null after selecting item

Question

I am trying to use Angular Material's Autocomplete form control with the DisplayWith function. I get a list of warehouses that is used for the select box. But once a warehouse is selected, my list of warehouses has been wiped out. The displayWithFn cannot find the name associated with the id that was selected because my warehouse list is null.

See StackBlitz: https://stackblitz.com/edit/angular-qqbxbt

Where am I wiping out my list of warehouses?

EDIT (Solution): I have updated the StackBlitz showing the error and the solution I ended up using. I could not use the Reactive form formControlName field with the Autocomplete. I had to create a separate formControl, watch for changes, and then move the data to the reactive form field. In the StackBlitz, the warehouse field shows the problem and the warehouse Stock field is the solution I ended up with for now.

Answer 1

The problem is with your [displayWith]="displayWarehouseFn"> binding. It will not bind this unless you write it as [displayWith]="displayWarehouseFn()">, causing this to be an MatAutocomplete object instead of your AppComponent.