Angular Мат автозаполнения не отображается, если вход setValue

Question

Когда я щелкаю элемент ввода, отображаются параметры автозаполнения. Но когда я динамически изменяю значение элемента ввода, параметры автозаполнения не отображаются.

<mat-form-field>
    <input type="text"
        [formControl]="dialTextControl"
        [matAutocomplete]="auto">
    <mat-autocomplete #auto="matAutocomplete">
        <mat-optgroup *ngFor="let group of dialerUsersGroup" [label]="group.type">
            <mat-option *ngFor="let user of group.users" [value]="user.number">
              {{user.name}}
            </mat-option>
        </mat-optgroup>
    </mat-autocomplete>
</mat-form-field>


dialTextControl = new FormControl();
ngOnInit() {
    this.dialTextControl.valueChanges
      .subscribe(data => {
        this.filterGroups(data);
      });
}

filterGroups(value: string) {
    // my logic for updating dialerUsersGroup
}

setCustomValue() {
    this.dialTextControl.setValue('something'); // this does not make the autocomplete appear
}

Как сделать автозаполнение видимым при динамическом изменении значения ввода?

Answer 1

Полагаю, вы хотите отобразить панель сразу после установки значения. Чтобы это произошло

Html: использовать ссылку на шаблон для ввода тоже

<mat-form-field>
    <input type="text"
        [formControl]="dialTextControl"
       #autoCompleteInput  [matAutocomplete]="auto" >
    <mat-autocomplete #auto="matAutocomplete">
        <mat-optgroup *ngFor="let group of dialerUsersGroup" [label]="group.type">
            <mat-option *ngFor="let user of group.users" [value]="user.number">
              {{user.name}}
            </mat-option>
        </mat-optgroup>
    </mat-autocomplete>
</mat-form-field>

и в тс

@ViewChild(MatAutocompleteTrigger) autocomplete: MatAutocompleteTrigger;

setCustomValue() {
    this.dialTextControl.setValue('something'); // this does not make the autocomplete appear
    this.autocomplete.openPanel();
}

Stackblitz: https://stackblitz.com/edit/angular-o2itzp