Автозаполнение углового коврика не отображается, если вводится значение setValue

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

<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
}

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


angular angular-material angular-forms mat-autocomplete
person user5155835    schedule 29.03.2020    source источник
comment
пожалуйста, добавьте также функцию filterGroups   -  person M A Salman    schedule 29.03.2020
comment
@Очень круто. Код этого метода filterGroups слишком длинный. Это работает, проблема не в коде filterGroups.   -  person user5155835    schedule 29.03.2020
comment
Я просто хотел посмотреть, как вы фильтруете ... если он слишком длинный, то нормально   -  person M A Salman    schedule 29.03.2020
comment
и используете ли вы реактивные формы в приведенном выше коде?   -  person M A Salman    schedule 29.03.2020
comment
@Очень круто. да   -  person user5155835    schedule 29.03.2020

Ответы (1)


arrow_upward
1
arrow_downward

Я предполагаю, что вы хотите показать панель, как только установите значение. Для этого

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

person M A Salman    schedule 29.03.2020