用于垫选择的 Angular Material 2 浏览器自动填充不起作用 [英] Angular Material 2 browser autofill for mat-select not working

问题描述

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

<mat-select placeholder="State"[(ngModel)]="状态"自动完成=帐单地址级别1"><mat-option *ngFor="let s of states" [value]="s.abbreviation">{{ s.name }}</mat-option></mat-select></mat-form-field>

我不确定我是否遗漏了某些东西，或者浏览器的自动填充功能是否不起作用，因为 mat-select 不是本机控件.任何人都知道如何在这种情况下使自动填充工作?我唯一能想到的是创建一个本机选择，将其绑定到相同的模型字段并将其样式设置为 display: none.

解决方案

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

mat-select 不是标准的输入类型，它不适用于自动填充.

问题已经打开https://github.com/angular/components/issues/19083等待官方解决.

与此同时，我自定义并修复了问题，请验证以下工作示例

1. 视觉隐藏输入

<块引用>

.hide-text-for-autofill {位置:绝对；z-索引:-1；正确:1000%；}

2. 将隐藏的输入值更新为 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 浏览器中进行了测试，它按预期工作

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>

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.

解决方案

The material/angular-material does not support browser autofill by default for the mat-select.

mat-select is not the standard type of input it will not work with autofill.

The issue has already opened https://github.com/angular/components/issues/19083 We' are waiting for the official solution.

Meanwhile, I customized and fixed the issue, please verify the below working example

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 URL:

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

I have tested in chrome and edge browsers, It's working as expected

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