Angular 如何防止在下拉菜单中手动输入？

Question

如何防止在 angular 下拉菜单中手动输入？

例如我的搜索下拉值就像 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>

Answer 1

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

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

然后在您的提交函数中只需检查：


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!);

  }
}

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

displayFn(e_id){
 return e_id.id;
}

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

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

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

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

并在您的 html 中向用户显示错误：

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

Answer 2

试试这个方法，它解决了你的问题也简单和轻量级。

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

安装：https://github.com/ng-select/ng-select

示例：https://stackblitz.com/edit/ng-select

Angular 如何防止在下拉菜单中手动输入？

Angular How to prevent manual entry in dropdown?

javascript

angular

autocomplete

angular-material

angular8