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" />。

当测试这个时，它对我来说大部分时间都有效，但由于某种原因之后不再工作。

我的建议是不要对抗它，并通过正确使用自动完成属性来发挥它的潜力，如此处所述。

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