Angular mat-form-field 输入禁用自动完成

Question

我的所有控件都使用 angular material。我们需要禁用自动完成功能，以便不会显示任何先前键入的值。我的代码如下。我尝试了自动完成“关闭”“禁用”和我在网上找到的其他建议。但似乎没有任何效果。

<mat-form-field
  [ngClass]="{ 'invalid-uinque-id': (form.errors.locatorId || form.errors.locatorIdInvalidBadge) }"
  id="sta_BadgeFormField"
>
  <input
    formControlName="locatorId"
    (blur)="onBlurLocatorVendorMethod(selectedVendor.id)"
    matInput
    i18n-placeholder="Locator Badge ID|Placeholder for locator badge id label in add staff dialog@@addstaffLocatorBadgeId"
    placeholder="Locator Badge ID"
    name="locatorId"
    maxlength="20"
    [errorStateMatcher]="esMatcher"
    autocomplete="disabled"
  /> 
</mat-form-field>

Answer 1

过去，许多开发人员会在他们的表单字段中添加 autocomplete="off" 以防止浏览器执行任何类型的自动完成功能。虽然 Chrome 仍会尊重自动完成数据的此标签，但不会尊重自动填充数据。

One workaround is to put an unknown value in the autocomplete,

<input type="text" name="somethingAutofillDoesntKnow" autocomplete="doNotAutoComplete" />.

When testing this it worked for me most of the time, but for some reason didn't work anymore afterwards.

我的建议是不要反对它并通过正确使用自动完成属性来发挥它的潜力 here。

<fieldset>
   <legend>Ship the blue gift to...</legend>
   <p> <label> Address:     <textarea name=ba autocomplete="section-blue shipping street-address"></textarea> </label>
   <p> <label> City:        <input name=bc autocomplete="section-blue shipping address-level2"> </label>
   <p> <label> Postal Code: <input name=bp autocomplete="section-blue shipping postal-code"> </label>
</fieldset>

但是（指令）

如果您仍想继续专注于禁用部分，here is最接近于您通过指令实现此目的的解决方案。

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

}

Answer 2

对于经典浏览器，您可以使用 autocomplete="off"，而对于现代浏览器，您可以使用 autocomplete="nope"，如下所示：

经典浏览器：

<input name="name" ng-model="name" autocomplete="off"/>

现代浏览器：

<input name="name" ng-model="name" autocomplete="nope"/>

Answer 3

浏览器的自动完成行为与控件的 name 属性有关。这个问题其实和Angular没有关系，更多的是浏览器问题，GoogleChrome这个问题特别难处理。

解决方案 1：

以下解决方案可能有效，但是 at least once Google Chrome stopped supporting it，应该有效的值为 autocomplete="off"，如果无效，请尝试第二个解决方案：

<!-- removed everything but the changes for the sake of simplicity -->
<mat-form-field ...>
  <input
    ...
    autocomplete="off"
  /> 
</mat-form-field>

解决方案 2：

这是我最终在我的项目中使用的那个，因为它适用于所有场景，您可以通过删除原始 name 属性的任何痕迹来欺骗浏览器认为没有什么可以自动完成的：

// typescript
untraceableFieldName: string;
fixChromeAutocomplete(): void {
    this.untraceableFieldName = 'locatorId' + new Date().getTime().toString();
}

<!-- removed everything but the changes for the sake of simplicity -->
<mat-form-field ...>
  <input
    ...
    [name]="untraceableFieldName"
    (keydown)="fixChromeAutocomplete()"
    (change)="fixChromeAutocomplete()"
  /> 
</mat-form-field>

最后一个解决方案当然有一个问题，现在您将无法再将 name 属性用于您的任何逻辑，此解决方案 is not elegant，但确实有效。

您可以在 this other question 阅读更多关于该问题的信息。

专为Google Chrome:

Sept/2021：最近 related bugs as it seems that it is a regression issue. Is actually one of the most ranked bug to solve at Chrome bugs tracker. You can see that issues related to Chrome ignoring the autocomplete="off" still open here 他们的错误报告更加活跃。所以，目前看来只有第二种方案可以解决。

Answer 4

您可以试试这个来禁用所有控件的自动完成功能。对我有用。

<form autocomplete="off">

Angular mat-form-field 输入禁用自动完成

Angular mat-form-filed input disable autocomplete

html

forms

autocomplete

autofill

angular-input

解决方案 1：

解决方案 2：

专为Google Chrome: