Mat Autocomplete не устанавливает значение ввода при использовании в качестве formControl

Question

У меня есть собственный компонент автозаполнения, который реализует ControlValueAccessor. Из родительского компонента привязываю установить значение с помощью form.get('productName').setValue('Product 1');. Это устанавливает значение в форме, но оно не отражается во вводе, связанном с автозаполнением.

У меня есть пример stackblitz, который показывает, что ввод не отображает значение. Как только я удаляю атрибут [matAutocomplete]="auto" из ввода, значение отображается в пользовательском интерфейсе.

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

Я пробовал то, что упомянуто здесь но тоже безуспешно - { ссылка }

Answer 1

Начальное значение не отражается во входных данных, потому что вы используете преобразователь displayFn, который работает со значением как объект, где пытается найти свойство obj.name в строке.

Поскольку вы устанавливаете значение mat-autocompelte в качестве product.name вам вообще не нужно использовать displayFn.

Хорошо, вы можете заполнить вводимый текст. Теперь вам нужно завершить sh реализацию ControlValueAccessor.

Существует специальный метод onChange, который следует вызывать, если вы хотите распространить значение на значение элемента управления хоста.

Это означает вам нужно вызвать метод onChange, если вы хотите обновить значение элемента управления хостом. В случае mat-autocomplete вы можете прослушать optionSelected:

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

Forked Stackblitz