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

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:

  Value need match available options

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