文章内容
2020/12/12 16:45:23,作 者: 黄兵
mat-autocomplete 设置默认值
最近在使用Angular Material的时候,mat-autocomplete的内容需要从后端数据库读取,如果在修改mat-autocomplete的时候,如何显示默认值呢?
首先需要设置formControl的值:
this.cityFormControl.setValue({city: res.city});
之后通过[displayWith]
设置显示值,这是一个:将选项的控制值映射到触发器中的显示值的函数。
这个函数定义方式如下:
displayFn(city?: IPField): string | undefined {
return city ? city.city : undefined;
}
最后mat-autocomplete的页面代码:
<mat-form-field appearance="fill" class="col-lg-4">
<mat-label>城市名称</mat-label>
<input type="text"
placeholder="请输入城市名称"
aria-label="城市名称"
matInput
[formControl]="cityFormControl"
[matAutocomplete]="auto" required>
<mat-autocomplete #auto="matAutocomplete" [displayWith]="displayFn">
<mat-option *ngFor="let option of filteredOptions | async" [value]="option.id">
{{option.cityEn}}
</mat-option>
</mat-autocomplete>
<mat-error *ngIf="regionId==null">
<mat-icon>info</mat-icon>请先选择地区
</mat-error>
</mat-form-field>
最后有一个在线Demo,地址:https://stackblitz.com/edit/angular-8r153h
参考资料:
1、To make default selection in autocomplete (material)
黄兵个人博客原创。
转载请注明出处:黄兵个人博客 - mat-autocomplete 设置默认值
评论列表