Mat Autocomplete not setting input value when used as a formControl

Question

I have a custom autocomplete component that implements ControlValueAccessor. From the parent component I am tying to set the value using form.get('productName').setValue('Product 1');. This sets the value in the form but it's not reflected in the input that is associated to the autocomplete.

I have a stackblitz example that shows the input not displaying the value. As soon as I remove the attribute [matAutocomplete]="auto" from the input, the value is visible in the UI.

https://stackblitz.com/edit/angular-autocomplete-form-control?file=src%2Fapp%2Fapp.component.ts

I have tried what the mentioned here but no success either - https://stackoverflow.com/a/56073917/4142653

Answer 1

Initial value is not reflected in the input because you use displayFn transformer that works with value as an object where tries to find obj.name property on string.

Since you're setting value to mat-autocompelte as product.name you don't need to use displayFn at all.

Ok, you're able to populate input text. Now, you need to finish your ControlValueAccessor implementation.

There is dedicated onChange method that should be called if you want to propagate value to the host control value.

It means you need to call onChange method when you want to update host control value. In case of mat-autocomplete you can listen to optionSelected:

<mat-autocomplete ... (optionSelected)="onChange($event.option.value)">

Forked Stackblitz