Блог

У меня есть автозаполнение mat, которое запускает функцию на optionSelected()

 <mat-form-field fxLayout="column">
    <input  matInput
            [matAutocomplete]="auto"
            #trigger="matAutocompleteTrigger"
            formControlName="shop">
    <mat-autocomplete   #auto="matAutocomplete"
                        [displayWith]="displayFn" 
                        (optionSelected)="selectedShop($event, stepper)">
                        <mat-option>...</mat-option>
                        </mat-autocomplete>
</mat-form-field>
  

Приведенная выше форма находится внутри mat-stepper компонента. У optionSelected меня есть следующая функция

 selectedShop(event, stepper) {

    const shopData = event.option.value as Shop;

    if(shopData) {
      this.registerForm.patchValue({ secondaryMobile: shopData.secondaryMobile });
      stepper.next();
    }
}
  

когда кто-то выбирает автозаполнение, он устанавливает значение реактивной формы и переходит к следующему шаговому. и это работает нормально, но выпадающая панель автозаполнения по-прежнему остается сверху.

я устал

 @ViewChild(MatAutocompleteTrigger) autocompleteTrigger: MatAutocompleteTrigger;

if(shopData) {
      this.registerForm.patchValue({ secondaryMobile: shopData.secondaryMobile });
      stepper.next();
      this.autocompleteTrigger.closePanel();
}
  

также пробовал внутри ngAfterViewInit() , но не удалось. Панель никогда не закрывается. я использую angular версии 10.

Пожалуйста, помогите.