How to stop mat-autocomplete to take custom user input values apart from given options?

Question

I am using mat-auto complete component from material.angular.io. The default behavior is user can input any value as well as it gives options to choose from. Also you can add yo

Answer 1

You can do something like this

Markup:

<md-input-container class="full-width">
<input mdInput [mdAutocomplete]="autoData"
       #searchMyData
       formControlName="myControl"
       (keyup)="changeMyControl()">
</md-input-container>
<md-autocomplete #autoData="mdAutocomplete">
<md-option
    *ngFor="let option of options"
    [value]="option.name"
    (onSelectionChange)="onSelectedOption($event.source.selected, option.id);">
    {{ option.name }}
</md-option>
</md-autocomplete>

Component:

selectedOption;
changeMyControl(): void {
    if (isUndefined(this.selectedOption) {
        // also check selected item and entered text are not same
        this.myForm.get('myControl').setErrors({'incorrect': true});
    }
}

onSelectedOption(isSelected: boolean, id: number): void {
    if (isSelected) {
        setTimeout(() => {
            const option = this.options.filter(bt => bt.id === id);
            if (option.length > 0) {
                this.selectedOption= option[0];
               // patch formcontrol value here
            }
        }, 200);
    }
}

Answer 2

Found this solution on github it may provide a simple alternative to those who end up here.

Create a custom validator:

private requireMatch(control: FormControl): ValidationErrors | null {
  const selection: any = control.value;
  if (this.options && this.options.indexOf(selection) < 0) {
    return { requireMatch: true };
  }
  return null;
}

Attach it to your control (we need to bind it to this so that our validator can access our options in our component's scope)

  myControl = new FormControl(undefined, [Validators.required, this.requireMatch.bind(this)]);

Optionally show error:

  <mat-error *ngIf="myControl.errors?.requireMatch">Value need match available options</mat-error>

Example here -----------> https://stackblitz.com/edit/angular-hph5yz

Answer 3

I think there is a UI/UX question here - in what way do we prevent the user from typing something that is not in the list of options, but still allow them to filter by a string?

I see a couple of potential options. First one is to just display an error "Invalid entry" when the option isn't in the list adjacent to the input. The second option would be to actually prevent the entry of characters that no longer match any options. So if there is a single option "foo" and a user types "for", only "fo" would be accepted, and the 'r' gets thrown out.

The PrimeNg solution is not quite the same as a text field that allows a user to start typing on focus. The user needs to first click to open a search, and there appears to be no keyboard accessibility. I don't really see why they haven't implemented it such that display and the search are the same, except they've got logos displayed.

Answer 4

The Material demo for chips autocomplete shows bindings on both the input and to the mat-autocomplete:

<input (matChipInputTokenEnd)="add($event)">
<mat-autocomplete (optionSelected)="selected($event)"></mat-autocomplete>

If you only want to allow options from the autocomplete, just omit the add function from the input.

Answer 5

As already suggested in comment by @trichetriche this is a use case for select.

You can use material version of select, like this

<mat-form-field>
  <mat-select placeholder="Favorite food">
    <mat-option *ngFor="let food of foods" [value]="food.value">
      {{ food.viewValue }}
    </mat-option>
  </mat-select>
</mat-form-field>

If you need filter above the select, than I suggest to you PrimeNg Dropdown https://www.primefaces.org/primeng/#/dropdown