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-autocomplete而不是mat-select 这是一个样本

<mat-form-field>
  <input type="text" placeholder="Address" matInput [(ngModel)]="state"
  [matAutocomplete]="auto">
    <mat-autocomplete #auto="matAutocomplete">
      <mat-option *ngFor="let s of states" [value]="s"> {{s}} </mat-option>
    </mat-autocomplete>
</mat-form-field>

这是一个stackblitz demo

Answer 2

因为mat-select不会在引擎盖下使用真正的选择。

唯一的解决方法是创建一个具有相同name属性的输入，以从浏览器中捕获自动填充值并将其提供给mat-select。

此输入不能隐藏或显示：无。将postition: absolute与z-index: -1或right: 1000%一起使用以“隐藏”它。

Answer 3

解决了！！！不得不这样破解：

// name ('state', 'country', etc..) is an input
<input class="clip or visually-hidden" type="text" name="{{name}}" [formControl]="control">

<mat-form-field>
  <mat-select [placeholder]="placeholder" [formControl]="control"
  [(value)]="control.value">
    <mat-option *ngFor="let option of options" [value]="option.value">
      {{ option.label }}
    </mat-option>
  </mat-select>
</mat-form-field>

希望这会有所帮助！

Answer 4

请在输入标记中添加以下属性，如

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

你的HTML代码中的

等 ....

请参阅此文档了解更多详情：

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

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

Answer 5

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

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);

 });

stackblitz网址：

https://stackblitz.com/edit/mat-select-angular-material-autofill

我已经在chrome和Edge浏览器中进行了测试，可以正常工作

Angular Material 2浏览器自动填充，用于mat-select无法正常工作

5 个答案: