Angular Material 2浏览器自动填充mat-select无法工作

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。

- Joseph Pisano

---

你好， [(ngModel)]="state" 是否等同于 state.abbreviation？ 我建议在 ngFor 中使用另一个变量名，以避免重复使用 "state" 变量（例如：ngFor="let s of states"）。 - GeoAstronaute

您想在加载时显示自动填充的值吗？还是您想在单击mat-select选项时显示自动填充？能否告诉我一下？ - Rutvij07

@GeoAstronaute 我已将其更改为使用变量 s 而不是 state。虽然我理解它可能会产生歧义，但这并不能解决问题。 - Joseph Pisano

@Rutvij07 我不想在加载时显示自动填充。我希望自动填充像其他网站一样工作，即如果我开始在地址1输入字段中键入，浏览器会建议地址选项。当我选择其中一个建议的选项时，我希望其余的地址字段自动填充。目前，除了州/省下拉菜单之外，所有其他地址字段都按照我描述的方式工作。 - Joseph Pisano

很遗憾，我认为这是不可能的。我不得不使用一些不太完美的CSS切换到本地选择器，以使其与材料控件有点融合。 - Simon_Weaver

Answer 1

material/angular-material 默认不支持 mat-select 元素的浏览器自动填充。

mat-select 不是标准类型的输入框，因此无法与自动填充一同使用。

该问题已经在以下链接中提出：https://github.com/angular/components/issues/19083，我们正在等待官方解决方案。

与此同时，我已对其进行了自定义和修复。请验证以下工作示例：

1. Visually hidden input

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

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

2. Update the hidden input value to 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浏览器中进行过测试，其按预期工作。

- Raja Rama Mohan Thavalam

Answer 2

因为mat-select在内部没有使用真正的select元素。

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

这个输入框不能被隐藏或display:none。可以使用position: absolute和z-index: -1或right: 1000%来“隐藏”它。

"最初的回答"

- maxisam

---

是的，你可以这样做，只需将其绑定到相同的字段即可。 - Joseph Pisano

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

这里有一个 StackBlitz demo。

- brijmcq

---

是的，我也想到了这一点，但只是希望有人能回答选择的问题。谢谢。 - Joseph Pisano

我认为OP想要使用原生的HTML autocomplete标签，而不是一个mat-autocomplete组件。https://developers.google.com/web/updates/2015/06/checkout-faster-with-autofill - DanilF

@DanilF 这也是可能的。只是 OP 正在寻找使用 Angular Material 的解决方案。 - brijmcq

感谢brijmcq，这是适用于Angular 13.x.x的可行解决方案。但DDL出现时没有下拉箭头。 请注意，导入“MatAutocompleteModule”是使用此解决方案所必需的。 - Anoj

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

希望这能帮到您！

- MilenaM

---

是的，这确实有效。很遗憾我们必须在页面上隐藏一个本地控件并将两者绑定到同一源，但至少它能够工作。 - Joseph Pisano

Answer 5

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

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

在您的HTML代码中使用等等...

请参考此文档以获取更多详细信息：

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

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

- Pankaj Rupapara

---

在发布问题之前，我尝试过这个方法，但它并没有起作用。 - Joseph Pisano