angular - مقدار ورودی Mat Autocomplete هنگام استفاده به عنوان formControl تنظیم نمیشود

من یک کامپوننت تکمیل خودکار سفارشی دارم که ControlValueAccessor را پیادهسازی میکند. از کامپوننت والد، سعی میکنم مقدار را با استفاده از form.get('productName').setValue('Product 1'); تنظیم کنم. این مقدار را در فرم تنظیم میکند اما در ورودی مرتبط با تکمیل خودکار نمایش داده نمیشود.

من یک مثال در StackBlitz دارم که نشان میدهد مقدار در ورودی نمایش داده نمیشود. به محض اینکه ویژگی [matAutocomplete]="auto" را از ورودی حذف میکنم، مقدار در رابط کاربری قابل مشاهده است.

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

من آنچه را که در اینجا ذکر شده بود امتحان کردهام، اما هیچ موفقیتی نداشتهام - https://stackoverflow.com/a/56073917/4142653

پاسخ شماره ۱

مقدار اولیه در ورودی نشان داده نمیشود زیرا شما از تبدیلکننده displayFn استفاده میکنید که با مقدار به صورت یک شیء کار میکند و سعی میکند ویژگی obj.name را روی رشته پیدا کند.

از آنجایی که شما مقدار را به mat-autocomplete به عنوان product.name تنظیم میکنید، اصلاً نیازی به استفاده از displayFn ندارید.

باشه، شما قادر هستید متن ورودی را پر کنید. حالا، نیاز دارید پیادهسازی ControlValueAccessor خود را تکمیل کنید.

یک متد اختصاصی onChange وجود دارد که در صورت تمایل به انتقال مقدار به مقدار کنترل میزبان باید فراخوانی شود.

این بدان معناست که شما نیاز دارید متد onChange را زمانی که میخواهید مقدار کنترل میزبان را بهروزرسانی کنید، فراخوانی کنید. در مورد mat-autocomplete میتوانید به optionSelected گوش دهید:

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

استکبلیتز فورکشده