Javascript 如何防止在下拉列表中手动输入？

如何防止在角度下拉列表中手动输入

比如说 我的搜索下拉列表值类似于RAM、RAJ、KIRI、GURU。。。。。等等 它的id值为1，2，3，4。。。。。等等

我的问题是，如果我键入搜索的输入值。如果单击“提交”，则不能接受手动类型搜索条目值。怎么做？帮我解决这个问题

<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> 

加载。。。
{{e.name}}

一种简单的方法是将对象作为值传递给

mat选项

{{e.name}

然后在提交功能中，只需检查：

公共onSubmit（）{
if（typeof this.form.value.e_id=='object'）{
//它是一个对象，手动输入将是字符串
}否则{
警报（'从列表中选择选项，不允许手动输入！）；
}
}

在

显示器fn

中，您可以处理来自对象的值，即

displayFn（e_id）{
返回e_id.id；
}

第二种方法
您还可以创建自定义验证器，然后将其传递给您的输入，这样您的表单将无效，除非选择值：

private ceListSelectionValidator（fc:FormControl）{
如果（fc.value的类型=='string'）{
返回{incorrectValue:`Selected value'${fc.value}'不是列表`}
}
返回null；
}

在表单创建期间将此验证器传递给您的输入：

this.form=this.formBuilder.group（{
e_id:[''，此.ceListSelectionValidator]
});

在html中，向用户显示错误：

{{form.control.e_id.errors？.incorrectValue}}

试试这种方法，它可以解决您的问题也简单和轻便

      <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> 

安装：

---

示例：

您可以检查在文本框中输入的输入是否存在于数组

ceList

中，并基于此启用/禁用“提交”按钮？是的，我尝试使用这些方法，但我使用了更多行来解决此问题。我认为不会。如果你能在stackblitz中复制这个问题，我可以看一看。是的，当然。。请等一会儿谢谢你的建议。。它是有用的和有效的