Angular Материал автозаполнения, автоматически выбрать отдельный элемент в списке - PullRequest
2 голосов
/ 02 мая 2020

У нас есть уникальный, уникальный список номеров документов, где в списке дважды не отображаются номера документов.

Я пытаюсь сделать так, чтобы Angular Материал автоматически выбирал отдельный, если он введен с копированием и вставкой.

enter image description here

В настоящее время, после копирования и вставки с помощью Ctrl-C / V, мы используем три вещи: OptionSelected для выбора мыши , OptionAcactive для выбора клавиатуры и OnBlur, так что при нажатии вне текстового поля будет выбран вариант.

Мне просто любопытно, если Angular Материал имеет какую-либо более чистую опцию, или это, вероятно, лучший способ с тремя строки кода?

<mat-form-field>
  <mat-label>Document Number</mat-label>
  <input type="text"
        matInput
        formControlName="documentNumber"
        (blur)="documentNumberChangeEvent($event)"
        [matAutocomplete]="auto"
  >
  <mat-autocomplete autoActiveFirstOption #auto="matAutocomplete" 
    (optionActivated) = "documentNumberChangeEvent($event)"
    (optionSelected)="documentNumberChangeEvent($event)"
  >

1 Ответ

1 голос
/ 02 мая 2020

Может быть лучше прослушать свойство FormControl valueChanges:

...
@Component(...)
export class AutocompleteSimpleExample {
  readonly documentNumber = new FormControl();
  readonly options: string[] = ['One', 'Two', 'Three'];

  constructor() {
    this.documentNumber.valueChanges.subscribe(value => {
      console.log(value);
    });
  }
}

StackBlitz

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...