角度选择2的Angular Material 2浏览器自动填充无法正常工作

Question

我有一个代表地址的表格，并且正在使用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。

Answer 1

默认情况下，材质/角度材质不支持垫选择的浏览器自动填充。

mat-select 不是标准输入类型，它不能与自动填充一起使用。

该问题已开放 https://github.com/angular/components/issues/19083我们正在等待官方解决方案。

同时，我定制并修复了该问题，请验证以下工作示例

1. 视觉上隐藏的输入

    <input class="hide-text-for-autofill" type="text" name="country"  [formControl]="autoFillCountry">
   

.hide-text-for-autofill {
  position: absolute;
  z-index: -1;
  right: 1000%;
}

2. 将隐藏输入值更新为 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 浏览器中进行了测试，它按预期工作

Answer 2

请在您的输入标签中添加以下属性，例如

autocomplete="name"
autocomplete="email"
autocomplete="tel" 

等等....在你的html代码中。

请参阅此文档了解更多详细信息：

https://developers.google.com/web/updates/2015/06/checkout-faster-with-autofill

本文档将帮助您解决该问题。