我有一个代表地址的表单,并且我正在使用 mat-select 来表示州/省。不幸的是,它不会自动填充州/省(我假设是因为它不是本地选择)。这是我的标记:
<mat-form-field>
<mat-select placeholder="State"
[(ngModel)]="state"
autocomplete="billing address-level1">
<mat-option *ngFor="let s of states" [value]="s.abbreviation">{{ s.name }}</mat-option>
</mat-select>
</mat-form-field>
我不确定我是否遗漏了某些内容,或者浏览器自动填充是否无法正常工作,因为 mat-select 不是本机控件。任何人都知道如何在这种情况下使自动填充工作?我唯一能想到的是创建一个本机选择,将其绑定到同一模型字段并将其样式设置为display: none
.
默认情况下,材质/角度材质不支持垫选择的浏览器自动填充。
mat-select 不是标准输入类型,它不能与自动填充一起使用。
问题已经打开了https://github.com/angular/components/issues/19083我们正在等待官方的解决方案。
同时,我定制并修复了该问题,请验证以下工作示例
-
视觉上隐藏的输入
<input class="hide-text-for-autofill" type="text" name="country" [formControl]="autoFillCountry">
.hide-text-for-autofill {
position: absolute;
z-index: -1;
right: 1000%;
}
-
将隐藏输入值更新为 mat select
autoFillCountry = new FormControl();
................
................
................
this.autoFillCountry.valueChanges.subscribe((selectedValue) => {
this.formGroup.controls.country.setValue(selectedValue);
});
堆栈闪电战网址:
https://stackblitz.com/edit/mat-select-angular-material-autofill
我已经在 Chrome 和 Edge 浏览器中进行了测试,它按预期工作
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)