Angular How to prevent manual entry in dropdown?

Question

How to prevent manual entry in angular dropdown?

For example my search dropdown value is like RAM, RAJ, KIRI, GURU..... and so on and it has the id value of 1, 2, 3, 4..... and so on

my problem is if I type in input value for search. It must be not to accept the manual type search entry value if I click submit. How to do that? help me to solve it

<mat-form-field>
  <input placeholder="Select type" matInput formControlName="e_id"
    [matAutocomplete]="cotype">
      <mat-autocomplete #cotype="matAutocomplete" [displayWith]="displayFn">
        <mat-option *ngIf="isLoading" class="is-loading">Loading...</mat-option>
         <ng-container *ngIf="!isLoading">
          <mat-option *ngFor="let e of ceList" [value]="e.id">{{e.name}}</mat-option>
        </ng-container>
      </mat-autocomplete>
    </mat-form-field> 

Answer 1

Try this way, It solves your problem also simple and lightweight.

      <ng-select [items]="ceList" 
                      placeholder="Select type"
                      class="form-control"
                      notFoundText="No  Found" 
                      bindLabel="name" 
                      bindValue="id" name="e_id"
                      [(ngModel)]="e_id">
       </ng-select> 

Install: https://github.com/ng-select/ng-select

Example:https://stackblitz.com/edit/ng-select