角度选择2的Angular Material 2浏览器自动填充无法正常工作 [英] Angular Material 2 browser autofill for mat-select not working

问题描述

我有一个代表地址的表格，并且我正在使用mat-select来表示州/省.不幸的是，它没有自动填充州/省(我假设是因为它不是本地选择项).这是我的标记:

I have a form that represents an address and I'm using mat-select for the state/province. Unfortunately it's not autofilling the state/province (I'm assuming because it's not a native select). Here is my markup:

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

I'm not sure if I'm missing something or if the browsers autofill isn't working because mat-select isn't a native control. Anyone have any idea how to make autofill work in this scenario? The only thing I can think of is creating a native select, binding it to the same model field and setting it's style to display: none.

推荐答案

因为mat-select并未在幕后使用真正的选择.

Because mat-select doesn't use a real select under the hood.

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

The only workaround is creating an input with the same name property to catch autofill value from the browser and feed it to mat-select.

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

This input can't be hidden or display:none. Use postition: absolute with z-index: -1 or right: 1000% to "hide" it.

这篇关于角度选择2的Angular Material 2浏览器自动填充无法正常工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！