全局关闭材料 matInput 上的自动完成功能 [英] Globally turn off autocomplete on material's matInput

问题描述

有没有办法全局关闭材料的 MatInput 字段上的自动完成行为?我想摆脱到处重复的样板代码:

Is there any way for globally turning off the autocomplete behaviour on material's MatInput fields? I would like to get rid of this boiler plate code repeating all over the place:

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

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

E.g. in a similar way like globally defining the appearance and label options of the form fields with injection tokens in the app module's provider array:

// 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' } }

我浏览了文档和源代码，但没有找到任何东西.

I scanned through doc and source code and could not find anything.

推荐答案

有点晚了，但也许会有帮助.

A little bit late, but maybe will be helpful.

你可以添加这个简单的指令:

You can just add this simple directive:

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'
  }

}

如果您选择覆盖自动完成属性，它将从元素中获取文本.

If you choose to override the autocomplete attribute it will take the text from the element.

这篇关于全局关闭材料 matInput 上的自动完成功能的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！