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

2023-11-24

我有一个代表地址的表单,并且我正在使用 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.


默认情况下,材质/角度材质不支持垫选择的浏览器自动填充。

mat-select 不是标准输入类型,它不能与自动填充一起使用。

问题已经打开了https://github.com/angular/components/issues/19083我们正在等待官方的解决方案。

同时,我定制并修复了该问题,请验证以下工作示例

  1. 视觉上隐藏的输入

     <input class="hide-text-for-autofill" type="text" name="country"  [formControl]="autoFillCountry">
    
.hide-text-for-autofill {
  position: absolute;
  z-index: -1;
  right: 1000%;
}
  1. 将隐藏输入值更新为 mat select

      autoFillCountry = new FormControl();
      ................
      ................
      ................
    
     this.autoFillCountry.valueChanges.subscribe((selectedValue) => {
        this.formGroup.controls.country.setValue(selectedValue);
    
     });
    

堆栈闪电战网址:

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

我已经在 Chrome 和 Edge 浏览器中进行了测试,它按预期工作

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

Angular Material 2 浏览器自动填充垫选择不起作用 的相关文章

随机推荐

  • Microsoft Office 互操作程序集参考

    我有一个在 Visual Studio 2005 中开发的应用程序 我正在使用 ClickOnce 进行部署 我的解决方案包含两个项目 用 VB 编码的用户界面层和用 C 编码的类库 我的 C 类库有一些使用 Outlook 和 Excel
  • 我可以从 Firefox 缓存中删除特定文件吗?

    我正在开发一个 ASP net 应用程序 我必须经常更新我的 CSS 文件 我不想更新 from 中的文档频率设置about config在火狐浏览器中 我想让它默认 我使用 Firefox 作为理想的浏览器 如果我只是更新 CSS 文件
  • Mac OS X 10.8.4 上的 nc (netcat) 卡住

    我在 Mac OS X 上使用 nc 实用程序时遇到了一个小问题 我经常使用该实用程序作为快速但肮脏的解决方案来检查端口是否打开以及守护程序正在运行的版本 前几天我们部署了一组新计算机 我想验证它们正在运行什么版本的 sshd 而无需离开我
  • 创建变换以从一个矩形映射到另一个矩形?

    最简单的创建方法是什么AffineTransform它将坐标从一个矩形映射到另一个矩形 给出了浮点 双精度矩形 UPDATE 1 矩形可以完全不同 例如 0 0 1 1 和 150 14 1000 14 1 而且改造要统一改造 例如 矩形角
  • Google Cloud Pub/Sub 重试计数

    我们正在从不稳定的消息队列服务迁移到 Node JS 中的 Google Pub Sub 它似乎运行良好 但我们希望包括错误处理 我们希望限制特定消息的重试次数 例如在测试环境中重试 10 次 在生产环境中重试 100 次 现在 如果一条消
  • 如何在 Ember.js 中的控制器之间进行通信

    我想创建一个页面 其中左侧有固定视图 一些过滤器 这些视图应用于右侧的结果 例如 左侧是按流派 标题 创作年份过滤电影的过滤器 右侧是不同的图表和表格 它们根据所选的过滤器进行更新 所以我想在左边有一个固定的视图 然后在右边有一个会根据路线
  • 使用 node-mysql 中的 SSH 隧道连接到 MySQL

    当使用node mysqlnpm 包 是否可以使用 SSH 密钥而不是密码连接到 MySQL 服务器 您可以完全独立地完成 SSH 隧道组件 然后使用通过 SSH 建立隧道的 TCP 将 node mysql 或任何其他 sql 客户端 指
  • 我可以从堆栈中 POP 一个值,但将其放在 NASM Assembly 中的任何地方吗?

    NASM 程序集 Ubuntu 32 位程序 通常 当从堆栈中弹出一个值时 我会这样做 POP somewhere 进入寄存器或变量 但有时 我只是不想把它放在任何地方 我只想删除堆栈中的下一个元素 正在做 POP 就这样不行 我的一个解决
  • PHP:使用单词递增计数器函数(即第一、第二、第三等。)

    我一直在尝试找到一个使用单词递增计数器的函数 我知道可以使用带后缀的数字 即第一 第二 第三等 这是我得到的代码片段 function addOrdinalNumberSuffix num if in array num 100 array
  • JavaScript 以及为什么大写字母有时有效有时无效

    在 Notepad 中 我正在编写一个 JavaScript 文件 但有些东西不起作用 单击按钮时必须显示警报 但它不起作用 我使用了 Notepad 提供的自动完成插件 它为我提供了onClick 当我改变首都时C到一个小c 它确实有效
  • 如何保持后台运行的 iPhone 应用程序完全正常运行

    首先 我知道仅支持 voip 音频和位置应用程序在后台运行 并且它们只会在播放音频或使用位置服务等时运行 我想知道是否有一种方法可以让我的应用程序在后台完全运行 而不管对电池寿命的影响 这样 我的应用程序的用户就可以从设置中进行选择 以便在
  • 调用本机浏览器功能,即使它已被覆盖

    如果我有类似的东西 alert 0 在另一个脚本中 这是在另一个脚本中 我的代码无法在该脚本之前加载 怎么称呼原来的alert我的脚本中的方法 在覆盖原来的之前alert 保存 var origAlert alert alert 0 ori
  • HTML5 Canvas fillText 带有从右到左的字符串

    我试图在 HTML5 Canvas 的 2d 上下文上使用 fillText 方法来绘制用阿拉伯语编写的字符串 它工作得很好 直到我在字符串末尾添加了标点符号 然后标点符号出现在字符串的错误一侧 在开头 而不是结尾 就好像它是 ltr 而不
  • Safari History.db History_visits.visit_time 的格式是什么?

    从 Safari 查看 History db 时 有一个名为history visits其中有一列名为visit time 这是一个REAL价值 它具有诸如470799793 096987 那是什么格式 我希望以 12 08 2015 05
  • 在 Python 中使用 loadmat 加载 .mat 和 .m 文件

    我目前正在学习神经网络课程 并且我正在尝试加载 mat使用Python从文件scipy io loadmat filename 但我不断收到以下错误消息 ValueError 未知的 mat 文件类型 版本 101 58 当我尝试加载 m
  • 使用 Javascript 在 Parse.com 中获取多个相关对象的简单方法?

    我有一个 Player 类 玩家可以拥有 x 数量的奖杯 我有 Player objectId 需要获取他们所有奖杯的列表 在 Parse com 数据浏览器中 Player 对象有一列标记为 trophies Relation
  • C++ 模板:部分模板规范和友元类

    是否有可能以某种方式使部分模板规范成为友元类 IE 假设您有以下模板类 template
  • 是否允许复制/移动省略来使使用已删除函数的程序格式良好?

    考虑以下代码 include
  • GCE 区域的 IP 范围是多少?

    我需要向 CDN 提供创建 GCE 实例时可能使用的 IP 范围 按 GCE 位置划分的 IP 范围列表是否在任何地方发布 我们目前不发布哪些 IP 映射到哪些范围 我们可以并且确实根据需要移动区块以平衡容量 但是 此处列出了所有 Goog
  • Angular Material 2 浏览器自动填充垫选择不起作用

    我有一个代表地址的表单 并且我正在使用 mat select 来表示州 省 不幸的是 它不会自动填充州 省 我假设是因为它不是本地选择 这是我的标记