Angular Material 2浏览器自动填充垫选择不起作用答案

【问题标题】：Angular Material 2 browser autofill for mat-select not workingAngular Material 2浏览器自动填充垫选择不起作用
【发布时间】：2018-05-23 08:42:43
【问题描述】：

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

【问题讨论】：

嗨，来自 [(ngModel)]="state" 的状态是否等同于 state.abbreviation？我还建议在您的 *ngFor 中使用其他变量名称，以免重复您的“状态”变量（例如：*ngFor="let s of states"）。
您想在加载时显示自动填充的值吗？或者您想在单击 mat-select 选项时显示自动填充？你能告诉我吗
@GeoAstronaute 我已将其更改为使用 s 作为变量而不是状态。虽然我知道这可能是模棱两可的，但它并不能解决问题。
@Rutvij07 我不希望自动填充显示加载。我希望自动填充能够像对任何其他网站一样工作，即如果我开始在地址 1 输入字段中输入，浏览器会建议地址选项。当我选择建议的选项之一时，我希望其余的地址字段自动填充。目前，除了状态下拉列表之外，所有其他地址字段都按照我的描述工作。
不幸的是，我认为这是不可能的。我不得不使用一些不太完美的 css 切换到原生选择，以使其与材质控件融为一体。

标签： angular angular-material2 autofill

【解决方案1】：

因为 mat-select 在底层不使用真正的选择。

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

此输入无法隐藏或显示：无。使用postition: absolute 和z-index: -1 或right: 1000% 来“隐藏”它。

【讨论】：

是的，你可以做这样的事情并将其绑定到同一个字段。

【解决方案2】：

材质/角度材质默认不支持mat-select的浏览器自动填充。

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 浏览器中进行了测试，它按预期工作

【讨论】：

【解决方案3】：

如果您想要自动完成，请使用 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>

这是一个堆栈闪电战demo

【讨论】：

是的，我想到了这一点，但只是希望有人能回答这个选择。谢谢。
我相信 OP 正在寻找使用原生 HTML autocomplete 标签而不是 mat-autocomplete 组件。 developers.google.com/web/updates/2015/06/…
@DanilF 这也是可能的。只是OP正在寻找使用角度材料的解决方案

【解决方案4】：

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

// 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>

希望这会有所帮助！

【讨论】：

是的，这确实有效。我们必须在页面上隐藏本机控件并将两者绑定到同一个源，但至少它可以工作。 ?

【解决方案5】：

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

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

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

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

【讨论】：

我在发布问题之前尝试过这个，但它不起作用。