Angular Material mat-form-field输入框禁用自动补全失效问题求助

我完全懂你的困扰——明明试了autocomplete="off"和autocomplete="disabled"，Angular Material的输入框还是弹出之前的历史输入内容。这其实是现代浏览器（尤其是Chrome）的"自作主张"，它们会忽略这些常规属性，转而根据输入框的name、type甚至字段用途来判断是否触发自动补全。下面给你几个经过实践验证的解决方案：

方案1：使用autocomplete="new-password"（最推荐） #

这是个浏览器的"小trick"，大部分浏览器会对new-password这个值强制关闭自动补全逻辑（毕竟新密码字段本来就不该有历史补全），对普通文本输入框也同样生效。直接修改你的输入框属性就行：

<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="new-password" /> <!-- 修改这里 -->
</mat-form-field>

方案2：结合隐藏输入框+autocomplete="off" #

有些浏览器会根据name属性匹配历史记录，我们可以在表单里加个隐藏的同名输入框，让浏览器的自动补全"瞄准"这个无效框，放过实际的输入框：

<!-- 先加一个隐藏的同名输入框 -->
<input type="text" name="locatorId" style="position: absolute; left: -9999px;" autocomplete="off" disabled />

<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_real" <!-- 修改name为唯一值 -->
         maxlength="20" 
         [errorStateMatcher]="esMatcher" 
         autocomplete="off" />
</mat-form-field>

记得给隐藏框加disabled，避免它被提交到后端。

方案3：动态设置属性（Angular代码层面） #

如果前面的方法都不行，你可以在组件初始化时，通过Angular的Renderer2强制给输入框设置属性：
首先在组件里获取输入框的引用：

import { Component, ViewChild, ElementRef, Renderer2, AfterViewInit } from '@angular/core';

@Component({
  // 你的组件元数据
})
export class YourComponent implements AfterViewInit {
  @ViewChild('locatorInput') locatorInput!: ElementRef;

  constructor(private renderer: Renderer2) {}

  ngAfterViewInit(): void {
    // 强制设置autocomplete属性
    this.renderer.setAttribute(this.locatorInput.nativeElement, 'autocomplete', 'off');
    // 额外保险：可以临时设置readonly，聚焦时移除，失焦时恢复（谨慎用，会影响输入体验）
    // this.renderer.setAttribute(this.locatorInput.nativeElement, 'readonly', 'true');
    // this.locatorInput.nativeElement.addEventListener('focus', () => {
    //   this.renderer.removeAttribute(this.locatorInput.nativeElement, 'readonly');
    // });
    // this.locatorInput.nativeElement.addEventListener('blur', () => {
    //   this.renderer.setAttribute(this.locatorInput.nativeElement, 'readonly', 'true');
    // });
  }
}

然后在模板里给输入框加引用标记：

<mat-form-field [ngClass]="{ 'invalid-uinque-id': (form.errors.locatorId || form.errors.locatorIdInvalidBadge) }" id="sta_BadgeFormField" >
  <input #locatorInput <!-- 添加引用标记 -->
         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" />
</mat-form-field>

额外提示 #

如果以上方法都失效，检查下浏览器的自动填充设置（比如Chrome的"自动填充表单"选项），有些用户会强制开启自动补全，这种情况可能需要结合多种方法来规避。

内容的提问来源于stack exchange，提问作者indra257