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

Question

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

<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 仍然会尊重此标签来自动完成数据，但不会尊重它来自动填充数据。

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

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

但是（指令）

如果您仍然想继续关注禁用部分，这里是您使用指令实现此目的的最接近的解决方案。

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

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

<form autocomplete="off">

Answer 3

对于经典浏览器，您可以使用

autocomplete="off"

，而对于现代浏览器，您可以使用

autocomplete="nope"

，如下所示：

经典浏览器：

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

现代浏览器：

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

Answer 4

浏览器的自动完成行为与控件的

name

属性相关联。这个问题实际上与 Angular 无关，更多的是一个浏览器问题，Google Chrome 在这个问题上特别难处理。

解决方案1：

以下解决方案可能有效，但是至少一次 Google Chrome 停止支持它，应该有效的值是

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

属性，这个解决方案并不优雅，但它确实有效。

您可以在另一个问题中阅读有关该问题的更多信息。

特别适用于谷歌浏览器：

2021 年 9 月：最近他们的错误报告对于相关错误更加活跃，因为这似乎是一个回归问题。实际上是之一。您可以看到与 Chrome 忽略

autocomplete="off"

相关的问题仍然在 here 中打开。所以，目前看来，第二种方案是解决这个问题的唯一方法。

Answer 5

您只需在您的

输入

中添加一个id=""

 <form [formGroup]="formGroup" (ngSubmit)="onSubmit()" autocomplete="off">
    <mat-form-field appearance="outline">
      <mat-label>Password</mat-label>
      <input type="password" matInput formControlName="pwd"  id="new-pwd1">
    </mat-form-field>
    <mat-form-field appearance="outline">
      <mat-label>Confirme password</mat-label>
      <input type="password" matInput formControlName="pwd2" id="new-pwd2">
    </mat-form-field>

    <button [disabled]="formGroup.invalid">Send</button>
  </form>