Question

是否有办法全局关闭材料MatInput字段上的自动完成行为？我想摆脱在整个地方重复的样板代码：

<input matInput formControlName="myCtrl" autocomplete="off" />

例如类似于通过在应用程序模块的提供程序数组中使用注入令牌全局定义表单字段的外观和标签选项的方式：

// Default appearance of material form fields
{ provide: MAT_FORM_FIELD_DEFAULT_OPTIONS, useValue: { appearance: 'fill' } },
// Globally disable label of material form fields
{ provide: MAT_LABEL_GLOBAL_OPTIONS, useValue: { float: 'never' } }

我扫描了文档和源代码，找不到任何东西。

Answer 1

正如我在评论中所说，如果没有更好的解决方案，则可以添加一个全局脚本，该脚本将autocomplete="off"设置为所有matInput元素。

例如，您可以在polyfills.ts文件中添加以下代码段：

document.addEventListener('DOMContentLoaded', () => {

  Array.from(document.querySelectorAll('input[matInput]'))
    .forEach(element => {
      element.setAttribute('autocomplete', 'off');
    });

});

注意：考虑将箭头函数转换为普通函数，以便也支持IE11

Answer 2

有点晚了，但也许会有所帮助。

您可以添加以下简单指令：

import { Directive, HostBinding, Attribute } from '@angular/core';

@Directive({
  selector: '[matInput]',
})
export class AutocompleteOffDirective {

  @HostBinding('attr.autocomplete') auto;
  constructor(@Attribute('autocomplete') autocomplete: string) {
    this.auto = autocomplete || 'off'
  }

}

如果您选择覆盖自动填充属性，它将从元素中获取文本。

全局关闭材料的matInput

2 个答案: