Angular Material AutoComplete, choisir automatiquement l'élément distinct dans la liste

Question

Nous avons une liste distincte et unique de numéros de documents, où aucun numéro de document n'apparaît deux fois dans la liste.

J'essaie de faire en sorte qu'Angular Material sélectionne automatiquement le matériel distinct, s'il est entré avec le copier-coller.

Actuellement, après avoir copié et collé avec Ctrl-C/V , nous utilisons trois choses : OptionSelected pour la sélection par la souris, OptionActivated pour la sélection par le clavier et OnBlur pour qu'en cliquant hors de la zone de texte, l'option soit sélectionnée.

Je suis juste curieux de savoir si Angular Material a une option plus propre, ou si c'est probablement la meilleure façon de faire avec trois lignes de code ?

<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)"
  >

Answer 1

Peut-être qu'un meilleur moyen est d'écouter le FormControl valueChanges propriété :

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

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

StackBlitz