Angular How to prevent manual entry in dropdown?

One simple approach is to pass object as value to mat-option

<mat-option *ngFor="let e of ceList" [value]="e">{{e.name}}</mat-option>

then in your submit function simply check:

public onSubmit(){
  if(typeof  this.form.value.e_id === 'object') {
  //it's an object, manual entry will be string 

  } else {
   alert('Choose option from the list, manual entry not allowed!);

  }
}

In your displayFn, you can then process the value from object i.e

displayFn(e_id){
 return e_id.id;
}

Second Approach
You can also create a custom validator and then pass it to your input, that way your form will not be valid unless value is selected:

 private ceListSelectionValidator(fc: FormControl) {
    if (typeof fc.value === 'string') {
      return { incorrectValue: `Selected value '${fc.value}' is not from list` }
    }
    return null;
  }

Pass this validator to your input during form creation:

 this.form = this.formBuilder.group({ 
      e_id: ['', this.ceListSelectionValidator]
    });

and in your html, display the error to user:

<span *ngIf="form.control.e_id.errors?.incorrectValue">
    {{form.control.e_id.errors?.incorrectValue}}
</span>

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