Разрешить пользователю вводить только опции в mat-autocomplete in angular 6

Question

Я использую mat-autocomplete.

<form class="example-form">
  <mat-form-field class="example-full-width">
    <input type="text" placeholder="Pick one" aria-label="Number" matInput [formControl]="myControl" [matAutocomplete]="auto">
    <mat-autocomplete #auto="matAutocomplete">
      <mat-option *ngFor="let option of options" [value]="option">
        {{ option }}
      </mat-option>
    </mat-autocomplete>
  </mat-form-field>
</form>

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

 export class AutocompleteSimpleExample {
  myControl: FormControl = new FormControl();

  options = [
    'One',
    'Two',
    'Three'
   ];

}

Answer 1

Вы можете привязать событие размытия и проверить, равно ли значение ввода желаемому входу, как показано ниже.Я использовал аналогичный подход на моем собственном автокомплате.

<input type="text" placeholder="Pick one" aria-label="Number" matInput [formControl]="myControl" (blur)="InputControl($event)" [matAutocomplete]="auto">

в компоненте

InputControl(event) {
    setTimeout(() => {
        let isValueTrue = this.options.filter(myAlias =>
            myAlias  === event.target.value);
        if (isValueTrue.length === 0) {
            this.form.get(‘MyControl’).setValue(null);
        }
    }, 300);
}