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

【问题标题】：Angular mat-form-filed input disable autocompleteAngular mat-form-field 输入禁用自动完成
【发布时间】：2021-11-06 04:56:42
【问题描述】：

我的所有控件都使用有角度的材质。我们需要禁用自动完成功能，这样之前输入的任何值都不会显示。我的代码如下。我尝试了自动完成“关闭”“禁用”以及我在网上找到的其他建议。但似乎没有任何效果。

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

【问题讨论】：

你试过autocomplete="new-password"吗？因为它似乎工作得很好。如果它对你有用，我会写一个解释。
@Mohamed.Karkotly 它有时有效，有时无效。
autocomplete="off" 似乎对我有用，另一种选择是检查您是否实际上已通过 import {MatAutocompleteModule} from '@angular/material/autocomplete'; 将 MatAutocompleteModule 导入到您的 Angular 项目中并将其列在您的 @NgModule 中 - 最后到查看自动填充/自动完成下的浏览器设置并将其关闭。你能提供你导入的代码吗？
自动完成并非特定于 Angular。此问题可能与stackoverflow.com/questions/2530/… 重复

标签： html forms autocomplete autofill angular-input

【解决方案1】：

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

一种解决方法是在自动完成中放置一个未知值，

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

在测试它时，它大部分时间都对我有用，但对于某些人来说之后原因不再起作用。

我的建议是不要与它作斗争，而是通过正确使用自动完成属性来利用它的潜力，如 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'
    }

}

【讨论】：

【解决方案2】：

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

<form autocomplete="off">

【讨论】：

【解决方案3】：

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

经典浏览器：

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

现代浏览器：

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

【讨论】：

谷歌搜索似乎表明使用随机字符串（例如“nope”）将不再适用于 Chrome 等现代浏览器。

【解决方案4】：

浏览器的自动完成行为与控件的name 属性相关联。这个问题其实和 Angular 无关，更多的是浏览器问题，谷歌浏览器在这个问题上特别难处理。

解决方案 1：

以下解决方案可能有效，但是at least once谷歌浏览器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 阅读更多关于该问题的信息。

谷歌浏览器专用：

2021 年 9 月：最近他们的错误报告对 related bugs 更加活跃，因为这似乎是一个回归问题。实际上是the most ranked bug to solve at Chrome bugs tracker 之一。您可以看到与忽略 autocomplete="off" 的 Chrome 相关的问题仍然打开 here。所以，目前第二种方案似乎是解决它的唯一方法。

【讨论】：