8

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

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

4 回答 4

5

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

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

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

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

我的建议是不要与它作斗争，而是通过正确使用此处解释的 autocomplete 属性来利用它的潜力。

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

}
于 2021-09-13T13:42:40.690 回答
3

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

<form autocomplete="off">
于 2021-09-19T14:21:55.370 回答
2

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

经典浏览器：

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

现代浏览器：

<input name="name" ng-model="name" autocomplete="nope"/>
于 2021-09-13T17:26:46.480 回答
2

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

解决方案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属性用于您的任何逻辑，这个解决方案并不优雅，但它确实有效。

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

特别适用于谷歌浏览器：

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

于 2021-09-15T05:46:55.540 回答