什么会触发 Chrome 使用 Angular Material 地址自动填充弹出窗口

Question

在 Chrome 中，如果我们导航到“设置”并选择“地址和更多”

然后我们可以设置地址，浏览器可以在某些表单上建议地址。

我想了解，使用 Angular Material.

究竟是什么触发了地址建议弹出窗口的显示

在我的拳头方法中，我尝试了以下代码：

<mat-form-field>
  <mat-label [attr.aria-label]="'First Name'">First Name</mat-label>
  <input matInput type="text" />
</mat-form-field>
<mat-form-field>
  <mat-label [attr.aria-label]="'Last Name'">Last Name</mat-label>
  <input matInput type="text" />
</mat-form-field>
<mat-form-field>
  <mat-label [attr.aria-label]="'City'">City</mat-label>
  <input matInput type="text" />
</mat-form-field>
<mat-form-field>
  <mat-label [attr.aria-label]="'Street'">Street</mat-label>
  <input matInput type="text" />
</mat-form-field>
<mat-form-field>
  <mat-label [attr.aria-label]="'Postal Code'">Postal Code</mat-label>
  <input matInput type="text" />
</mat-form-field>

StackBlitz：https://stackblitz.com/edit/angularmaterialautofill?file=src%2Fapp%2Fapp.component.html

请注意，我不是在寻找自动完成功能，它看起来像这样：

问题与此弹出窗口有关：

究竟是什么从 DOM 触发了这个弹出窗口？什么可以使用 Angular Material 触发它？

---编辑---

在 Google 开发人员 Post 中，我发现以下内容：

“过去，许多开发人员会在他们的表单字段中添加 autocomplete="off" 以防止浏览器执行任何类型的自动完成功能。虽然 Chrome 仍然会尊重自动完成数据的此标记，它不会尊重自动填充数据。"

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

所以除了 autocomplete 属性之外，肯定还有其他东西触发了地址自动填充。

例如，如果我们单击 City，此表单会触发地址自动填充： https://developers.google.com/maps/documentation/javascript/examples/places-autocomplete-addressform

而如果我们查看DOM中的City元素，它的形式有autocomplete="off"而City元素本身没有autocomplete属性。

Answer 1

您可以将 'name' 属性添加到您的输入中。 See this link for usable values. 浏览器基本上会根据您添加的 'name' 属性猜测为自动完成提供的值。

什么会触发 Chrome 使用 Angular Material 地址自动填充弹出窗口

What does trigger Chrome Address Autofill Popup using Angular Material

forms

google-chrome

autofill

angular-material

angular