文章内容

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 设置默认值

分享到:

发表评论

评论列表