Angular 如何防止在下拉菜单中手动输入?
Angular How to prevent manual entry in dropdown?
如何防止在 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>
一种简单的方法是将对象作为值传递给 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>
试试这个方法,它解决了你的问题也简单和轻量级。
<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>
如何防止在 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>
一种简单的方法是将对象作为值传递给 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>
试试这个方法,它解决了你的问题也简单和轻量级。
<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>